imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add tabs to the right panel (#12672)

Browse source 
* Create new method for header button behaviour

With the introduction of tabs, the behaviour of the header buttons is
changed as follows:
- Close any right panel if open
- Open the correct right panel if no panel was open before

The old method (and behaviour) is retained as showOrHidePhase.

* Implement tabs in the right panel

There are three tabs: Info, People and Threads

* Remove unwanted code from RoomSummaryCard

- Remove the menu item for opening the memberlist since that is now
  taken of by the tabs.
- Remove the close button

* Remove code for focusing close button from tac item

See https://github.com/matrix-org/matrix-react-sdk/pull/12410

There's no longer a close button to focus so we instead focus the thread
tab. This is done in RightPaneltabs.tsx so we just need to remove this
code.

* Introduce a room info icon to the header

This was previously present in the legacy room header but not in the new
header.

* BaseCard changes

- Adds id, ariaLabelledBy and role props to implement tab accessibility.
- Adds hideHeaderButtons prop to hide header buttons (think back and
  close buttons).
- Change confusing header rendering code:
  header is not rendered ONLY when no header is passed AND
  hideHeaderButtons is true.

* Refactor repeated code into function

Created a new function createSpaceScopeHeader which returns the
component if the room is a space room. Previously this code was
duplicated in every component that uses SpaceScopeHeader component.

* Pass BaseCard attributes and use helper function

Actually using the code from the last two commits

* Add, update and remove tests/screenshots/snapshots

* Fix distance between search bar and tabs

* Update compound

* Update screenshots/snapshots
This commit is contained in:
R Midhun Suresh 2024-07-09 17:06:50 +05:30 • committed by GitHub
parent cd39d91c15
commit cf8b87fd14
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
41 changed files with 501 additions and 294 deletions
Download patch file Download diff file Expand all files Collapse all files

119
test/components/views/right_panel/__snapshots__/RightPanelTabs-test.tsx.snap Normal file
View file

@ -0,0 +1,119 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<RightPanelTabs /> Component renders the correct tabs 1`] = `
<div>
<nav
class="mx_RightPanelTabs _nav-bar_135dy_16"
role="presentation"
>
<ul
aria-label="right panel"
class="_nav-bar-items_135dy_22"
role="tablist"
>
<li
class="_nav-tab_135dy_33"
data-current="true"
role="presentation"
>
<button
aria-controls="room-summary-panel"
aria-selected="true"
class="_nav-item_135dy_55"
id="room-summary-panel-tab"
role="tab"
>
Info
</button>
</li>
<li
class="_nav-tab_135dy_33"
role="presentation"
>
<button
aria-controls="memberlist-panel"
aria-selected="false"
class="_nav-item_135dy_55"
id="memberlist-panel-tab"
role="tab"
>
People
</button>
</li>
<li
class="_nav-tab_135dy_33"
role="presentation"
>
<button
aria-controls="thread-panel"
aria-selected="false"
class="_nav-item_135dy_55"
id="thread-panel-tab"
role="tab"
>
Threads
</button>
</li>
</ul>
</nav>
</div>
`;
exports[`<RightPanelTabs /> Correct tab is active 1`] = `
<div>
<nav
class="mx_RightPanelTabs _nav-bar_135dy_16"
role="presentation"
>
<ul
aria-label="right panel"
class="_nav-bar-items_135dy_22"
role="tablist"
>
<li
class="_nav-tab_135dy_33"
role="presentation"
>
<button
aria-controls="room-summary-panel"
aria-selected="false"
class="_nav-item_135dy_55"
id="room-summary-panel-tab"
role="tab"
>
Info
</button>
</li>
<li
class="_nav-tab_135dy_33"
data-current="true"
role="presentation"
>
<button
aria-controls="memberlist-panel"
aria-selected="true"
class="_nav-item_135dy_55"
id="memberlist-panel-tab"
role="tab"
>
People
</button>
</li>
<li
class="_nav-tab_135dy_33"
role="presentation"
>
<button
aria-controls="thread-panel"
aria-selected="false"
class="_nav-item_135dy_55"
id="thread-panel-tab"
role="tab"
>
Threads
</button>
</li>
</ul>
</nav>
</div>
`;

129
test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
View file

@ -3,7 +3,10 @@
exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
<div>
<div
aria-labelledby="room-summary-panel-tab"
class="mx_BaseCard mx_RoomSummaryCard"
id="room-summary-panel"
role="tabpanel"
>
<div
class="mx_AutoHideScrollbar"
@ -12,15 +15,7 @@ exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
<header
class="mx_Flex mx_RoomSummaryCard_header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x);"
>
<div
aria-label="Close"
class="mx_AccessibleButton mx_BaseCard_close"
data-testid="base-card-close-button"
role="button"
tabindex="0"
/>
</header>
/>
<header
class="mx_RoomSummaryCard_container"
>
@ -244,36 +239,6 @@ exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
data-orientation="horizontal"
role="separator"
/>
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
role="menuitem"
>
<div
aria-hidden="true"
class="_icon_1gwvj_44"
height="24"
width="24"
/>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
>
People
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</button>
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
@ -423,7 +388,10 @@ exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
exports[`<RoomSummaryCard /> renders the room summary 1`] = `
<div>
<div
aria-labelledby="room-summary-panel-tab"
class="mx_BaseCard mx_RoomSummaryCard"
id="room-summary-panel"
role="tabpanel"
>
<div
class="mx_AutoHideScrollbar"
@ -432,15 +400,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
<header
class="mx_Flex mx_RoomSummaryCard_header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x);"
>
<div
aria-label="Close"
class="mx_AccessibleButton mx_BaseCard_close"
data-testid="base-card-close-button"
role="button"
tabindex="0"
/>
</header>
/>
<header
class="mx_RoomSummaryCard_container"
>
@ -637,36 +597,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
data-orientation="horizontal"
role="separator"
/>
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
role="menuitem"
>
<div
aria-hidden="true"
class="_icon_1gwvj_44"
height="24"
width="24"
/>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
>
People
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</button>
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
@ -816,7 +746,10 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
<div>
<div
aria-labelledby="room-summary-panel-tab"
class="mx_BaseCard mx_RoomSummaryCard"
id="room-summary-panel"
role="tabpanel"
>
<div
class="mx_AutoHideScrollbar"
@ -825,15 +758,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
<header
class="mx_Flex mx_RoomSummaryCard_header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x);"
>
<div
aria-label="Close"
class="mx_AccessibleButton mx_BaseCard_close"
data-testid="base-card-close-button"
role="button"
tabindex="0"
/>
</header>
/>
<header
class="mx_RoomSummaryCard_container"
>
@ -1041,36 +966,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
data-orientation="horizontal"
role="separator"
/>
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"
role="menuitem"
>
<div
aria-hidden="true"
class="_icon_1gwvj_44"
height="24"
width="24"
/>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
>
People
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</button>
<button
class="_item_1gwvj_17 _interactive_1gwvj_36"
data-kind="primary"