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

Show tooltips on narrow tabbed views (#12624)

Browse source 
* Show tooltips on narrow tabbed views

* Also only show on left-side tabs

* Unused import

* Comments

* Add test

* More test

* Assert tooltip appears in playwright test
This commit is contained in:
David Baker 2024-06-14 15:17:46 +01:00 • committed by GitHub
parent 650b9cb0cf
commit 72a8f8f03b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 100 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/structures/TabbedView.tsx
View file

@ -24,6 +24,7 @@ import AutoHideScrollbar from "./AutoHideScrollbar";
import { PosthogScreenTracker, ScreenName } from "../../PosthogTrackers";
import { NonEmptyArray } from "../../@types/common";
import { RovingAccessibleButton, RovingTabIndexProvider } from "../../accessibility/RovingTabIndex";
import { useWindowWidth } from "../../hooks/useWindowWidth";
/**
* Represents a tab for the TabbedView.
@ -87,10 +88,11 @@ function TabPanel<T extends string>({ tab }: ITabPanelProps<T>): JSX.Element {
interface ITabLabelProps<T extends string> {
tab: Tab<T>;
isActive: boolean;
showToolip: boolean;
onClick: () => void;
}
function TabLabel<T extends string>({ tab, isActive, onClick }: ITabLabelProps<T>): JSX.Element {
function TabLabel<T extends string>({ tab, isActive, showToolip, onClick }: ITabLabelProps<T>): JSX.Element {
const classes = classNames("mx_TabbedView_tabLabel", {
mx_TabbedView_tabLabel_active: isActive,
});
@ -112,6 +114,7 @@ function TabLabel<T extends string>({ tab, isActive, onClick }: ITabLabelProps<T
aria-selected={isActive}
aria-controls={id}
element="li"
title={showToolip ? label : undefined}
>
{tabIcon}
<span className="mx_TabbedView_tabLabel_text" id={`${id}_label`}>
@ -152,12 +155,16 @@ export default function TabbedView<T extends string>(props: IProps<T>): JSX.Elem
return props.tabs.find((tab) => tab.id === id);
};
const windowWidth = useWindowWidth();
const labels = props.tabs.map((tab) => (
<TabLabel
key={"tab_label_" + tab.id}
tab={tab}
isActive={tab.id === props.activeTabId}
onClick={() => props.onChange(tab.id)}
// This should be the same as the the CSS breakpoint at which the tab labels are hidden
showToolip={windowWidth < 1024 && tabLocation == TabLocation.LEFT}
/>
));
const tab = getTabById(props.activeTabId);