8758650910

Committed 19 Apr 2024 07:29PM UTC coverage: 32.054% (-0.03%) from 32.08%

Build # 8758650910

Build Type

Pull #9130

github

Committed by

b0b3rt

Commit Message

fix active tab text color on dark mode

Pull Request Pull Request #9130: [LW] Frontpage Tabs for the masses (including a recommendations one)

Run Details

4683 of 38018 branches covered (12.32%)

Branch coverage included in aggregate %.

46 of 161 new or added lines in 14 files covered. (28.57%)

5 existing lines in 3 files now uncovered.

27185 of 61402 relevant lines covered (44.27%)

182.01 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

8.14

/packages/lesswrong/components/common/TabPicker.tsx

import React, { useCallback, useEffect, useRef, useState} from 'react'
import {Components, registerComponent} from '../../lib/vulcan-lib'
import classNames from 'classnames'

const rightFadeStyle = (theme: ThemeType) => ({
  '&:after': {
    position: 'absolute',
    top: 0,
    right: -1,
    height: '100%',
    width: 50,
    content: '\'\'',
    background: `linear-gradient(to left, ${theme.palette.background.default}, ${theme.palette.background.transparent})`,
    pointerEvents: 'none',
  },
});

const styles = (theme: ThemeType) => ({
  tabsSection: {
    margin: 0,
    width: 'inherit',
  },
  tabsRow: {
    position: 'relative',
  },
  topicsBar: {
    display: 'flex',
    columnGap: 8,
    whiteSpace: 'nowrap',
    overflowX: 'scroll',
    scrollbarWidth: 'none',
    '&::-webkit-scrollbar': {
      height: 0,
    },
    transition: 'transform 0.2s ease',
    [theme.breakpoints.down('xs')]: {
      columnGap: 6,
    },
  },
  tabsWindowContainer: {
    position: 'relative',
  },
  tabsWindow: {
    position: 'relative',
  },
  leftFade: {
    '&:before': {
      position: 'absolute',
      top: 0,
      left: -1,
      height: '100%',
      width: 50,
      content: '\'\'',
      background: `linear-gradient(to right, ${theme.palette.background.default}, ${theme.palette.background.transparent})`,
      pointerEvents: 'none',
      zIndex: 1,
    },
  },
  rightFade: {
    ...rightFadeStyle(theme),
  },
  rightFadeMobile: {
    [theme.breakpoints.down('xs')]: {
      ...rightFadeStyle(theme),
    },
  },
  /**
   * These two breakpoints were determined by trial-and-error after adding the following:
   * - n tabs * 100px (their minWidth on mobile, assuming none of them have names that would cause them to be longer than that)
   * - (n - 1) tabs * 6px columnGap
   * - 18px for the settings gear icon
   * - 10px marginRight on the tabPicker (in LWHomePosts)
   * - 16px for 8x left & right padding on the sides of the screen from Layout
   * 
   * Now, this implies breakpoints of 356px for 3 tabs and 462px for 4 tabs.  I haven't figured out why they're off by 3px, but they are.
   */
  rightFadeThreeTabs: {
    '@media(max-width: 359px)': {
      ...rightFadeStyle(theme),
    },
  },
  rightFadeFourTabs: {
    '@media(max-width: 465px)': {
      ...rightFadeStyle(theme),
    },
  },
  tab: {
    minWidth: '120px',
    backgroundColor: theme.palette.panelBackground.default,
    color: theme.palette.tab.inactive.text,
    fontFamily: theme.typography.fontFamily,
    fontSize: 14,
    lineHeight: '23px',
    fontWeight: '500',
    padding: '4px 8px',
    borderRadius: 3,
    cursor: 'pointer',
    '&:hover': {
      color: theme.palette.tab.inactive.hover.text
    },
    [theme.breakpoints.down('xs')]: {
      fontSize: 13,
      padding: '3px 6px',
      minWidth: '100px',
    }
  },
  activeTab: {
    backgroundColor: theme.palette.tab.active.background,
    color: theme.palette.text.alwaysWhite,
    '&:hover': {
      color: theme.palette.text.alwaysWhite,
      backgroundColor: theme.palette.tab.active.hover.background
    },
  },
  tagDescriptionTooltip: {
    margin: 8,
  },
  arrow: {
    position: 'absolute',
    top: 0,
    height: 30,
    width: 28,
    color: theme.palette.grey[500],
    paddingTop: 7,
    paddingLeft: 6,
    cursor: 'pointer',
    '&:hover': {
      color: theme.palette.grey[700],
    },
    [theme.breakpoints.down('xs')]: {
      display: 'none',
    },
  },
  arrowIcon: {
    fontSize: 18,
  },
  leftArrow: {
    left: -30,
  },
  rightArrow: {
    right: -30,
  },
})

export interface TabRecord {
  name: string,
  label: string,
  description?: string,
  disabled?: boolean,
}

/**
 * A horizontal bar of clickable tabs as alternative to a dropdown
 */
const TabPicker = <T extends TabRecord[]>(
  {
    classes,
    sortedTabs,
    defaultTab,
    onTabSelectionUpdate,
    showDescriptionOnHover = false,
  }: {
    classes: ClassesType<typeof styles>,
    sortedTabs: T,
    defaultTab?: T[number]['name'],
    onTabSelectionUpdate: (tab: T[number]['name']) => void,
    showDescriptionOnHover?: boolean,
  },
) => {
  const { LWTooltip, SingleColumnSection, ForumIcon } = Components;

  const [activeTab, setActiveTab] = useState<T[number]['name']>(defaultTab ?? sortedTabs[0].name);

  // we use the widths of the tab list container when calculating how far to scroll left and right
  const tabsListRef = useRef<HTMLDivElement | null>(null);

  // we store the tab list scrollLeft offsets that correspond to displaying each "set" of tabs
  const offsets = useRef<Array<number>>([0]);

  const [leftArrowVisible, setLeftArrowVisible] = useState(false);
  const [rightArrowVisible, setRightArrowVisible] = useState(false);
  // We have the unfortunate situation where we want the right arrow + fade to be visible on mobile by default,
  // since the tabs will be too wide to display in full, while not being visible on wider screens, during SSR.
  // We also want the arrows to behave correctly after the user does any scrolling.  So we do the following:
  // 1. Default `rightArrowVisible` to false, which controls the `rightFade` class.
  // 2. Record whether the user has ever manually scrolled on the tab bar, which informs the `rightFade${Three|Four}Tabs` classes.
  //    Those classes ensure that users on mobile have a rightFade + arrow by default until they scroll if they have enough tabs to justify it.
  // NOTE: If we implement enough tabs that we'll have scrolling on desktops as well, we can get rid of all of this and just switch the `rightArrowVisible` default back to true
  const [everScrolled, setEverScrolled] = useState(false);

  /**
   * When the tabs bar is scrolled, hide/show the left/right arrows as necessary.
   */
  const updateArrows = useCallback(() => {
    if (!tabsListRef.current) return;

    const currentScrollLeft = tabsListRef.current.scrollLeft;
    // max amount we can scroll to the right, reduced a bit to make sure that
    // we hide the right arrow when scrolled all the way to the right
    const maxScrollLeft = tabsListRef.current.scrollWidth - tabsListRef.current.clientWidth;

    setLeftArrowVisible(currentScrollLeft > 0);
    setRightArrowVisible(currentScrollLeft < maxScrollLeft);
    setEverScrolled(true);
  }, []);

  useEffect(() => {
    if (!tabsListRef.current) return;
    offsets.current = [0];
    Array.from(tabsListRef.current.children).forEach((tab: HTMLElement) => {
      if (!tabsListRef.current) return;
      // we are looking for the tab that would get cut off at the end of each "set",
      // by checking if the right edge would be past the window
      // - if so, this will be the first in the next "set"
      if (tab.offsetLeft + tab.offsetWidth - offsets.current[offsets.current.length - 1] > tabsListRef.current.offsetWidth) {
        // subtract 30px to account for the fade on the left side of the tabs window
        offsets.current.push(tab.offsetLeft - 30);
      }
    });

    // updateArrows();
  }, [tabsListRef, updateArrows, sortedTabs]);

  const updateActiveTab = useCallback((activeTab: T[number]['name']) => {
    setActiveTab(activeTab)
    onTabSelectionUpdate(activeTab)
  }, [onTabSelectionUpdate]);

  /**
   * Clicking the left arrow smooth scrolls us to the previous offset (or defaults to 0).
   */
  const scrollLeft = () => {
    if (!tabsListRef.current) return;
    // look for the offset that is to the left of us
    const nextOffset = Array.from(offsets.current).reverse().find(os => {
      if (!tabsListRef.current) return false;
      return os < (tabsListRef.current.scrollLeft - 2);
    }) || 0;

    tabsListRef.current.scrollTo({
      left: nextOffset,
      behavior: 'smooth',
    });
    setRightArrowVisible(true);
    setEverScrolled(true);
  };

  /**
   * Clicking the right arrow smooth scrolls us to the next offset (if one exists).
   */
  const scrollRight = () => {
    if (!tabsListRef.current) return;
    // look for the offset that is to the right of us
    const nextOffset = offsets.current.find(os => {
      if (!tabsListRef.current) return false;
      return os > tabsListRef.current.scrollLeft;
    });

    if (!nextOffset) return;
    tabsListRef.current.scrollTo({
      left: nextOffset,
      behavior: 'smooth',
    });
    setLeftArrowVisible(true);
    setEverScrolled(true);
  };

  return (
    <SingleColumnSection className={classes.tabsSection}>
      <div className={classes.tabsRow}>
        {leftArrowVisible && <div onClick={scrollLeft} className={classNames(classes.arrow, classes.leftArrow)}>
          <ForumIcon icon="ThickChevronLeft" className={classes.arrowIcon}/>
        </div>}
        <div className={classNames(classes.tabsWindowContainer, {
          [classes.leftFade]: leftArrowVisible,
          [classes.rightFade]: rightArrowVisible,
          [classes.rightFadeThreeTabs]: sortedTabs.length === 3 && !everScrolled,
          [classes.rightFadeFourTabs]: sortedTabs.length === 4 && !everScrolled,
        })}>
          <div ref={tabsListRef} className={classes.topicsBar} onScroll={() => updateArrows()}>
            {sortedTabs.map(tab => {
              const isActive = tab.name === activeTab;
              return <LWTooltip
                title={showDescriptionOnHover ? tab.description : null} 
                popperClassName={classes.tagDescriptionTooltip}
                key={tab.name}
                hideOnTouchScreens
              >
                <button
                  onClick={() => updateActiveTab(tab.name)}
                  className={classNames(classes.tab, { [classes.activeTab]: isActive })}
                >
                  {tab.label}
                </button>
              </LWTooltip>
            })}
          </div>
        </div>
        {rightArrowVisible && <div onClick={scrollRight} className={classNames(classes.arrow, classes.rightArrow)}>
          <ForumIcon icon="ThickChevronRight" className={classes.arrowIcon}/>
        </div>}
      </div>
    </SingleColumnSection>
  );
}

const TabPickerComponent = registerComponent('TabPicker', TabPicker, {styles})

declare global {
  interface ComponentTypes {
    TabPicker: typeof TabPickerComponent
  }
}

1	import React, { useCallback, useEffect, useRef, useState} from 'react'	2✔
2	import {Components, registerComponent} from '../../lib/vulcan-lib'	1✔
3	import classNames from 'classnames'	1✔
4
5	const rightFadeStyle = (theme: ThemeType) => ({	4✔
6	'&:after': {
7	position: 'absolute',
8	top: 0,
9	right: -1,
10	height: '100%',
11	width: 50,
12	content: '\'\'',
13	background: `linear-gradient(to left, ${theme.palette.background.default}, ${theme.palette.background.transparent})`,
14	pointerEvents: 'none',
15	},
16	});
17
18	const styles = (theme: ThemeType) => ({	1✔
19	tabsSection: {
20	margin: 0,
21	width: 'inherit',
22	},
23	tabsRow: {
24	position: 'relative',
25	},
26	topicsBar: {
27	display: 'flex',
28	columnGap: 8,
29	whiteSpace: 'nowrap',
30	overflowX: 'scroll',
31	scrollbarWidth: 'none',
32	'&::-webkit-scrollbar': {
33	height: 0,
34	},
35	transition: 'transform 0.2s ease',
36	[theme.breakpoints.down('xs')]: {
37	columnGap: 6,
38	},
39	},
40	tabsWindowContainer: {
41	position: 'relative',
42	},
43	tabsWindow: {
44	position: 'relative',
45	},
46	leftFade: {
47	'&:before': {
48	position: 'absolute',
49	top: 0,
50	left: -1,
51	height: '100%',
52	width: 50,
53	content: '\'\'',
54	background: `linear-gradient(to right, ${theme.palette.background.default}, ${theme.palette.background.transparent})`,
55	pointerEvents: 'none',
56	zIndex: 1,
57	},
58	},
59	rightFade: {
60	...rightFadeStyle(theme),
61	},
62	rightFadeMobile: {
63	[theme.breakpoints.down('xs')]: {
64	...rightFadeStyle(theme),
65	},
66	},
67	/**
68	* These two breakpoints were determined by trial-and-error after adding the following:
69	* - n tabs * 100px (their minWidth on mobile, assuming none of them have names that would cause them to be longer than that)
70	* - (n - 1) tabs * 6px columnGap
71	* - 18px for the settings gear icon
72	* - 10px marginRight on the tabPicker (in LWHomePosts)
73	* - 16px for 8x left & right padding on the sides of the screen from Layout
74	*
75	* Now, this implies breakpoints of 356px for 3 tabs and 462px for 4 tabs. I haven't figured out why they're off by 3px, but they are.
76	*/
77	rightFadeThreeTabs: {
78	'@media(max-width: 359px)': {
79	...rightFadeStyle(theme),
80	},
81	},
82	rightFadeFourTabs: {
83	'@media(max-width: 465px)': {
84	...rightFadeStyle(theme),
85	},
86	},
87	tab: {
88	minWidth: '120px',
89	backgroundColor: theme.palette.panelBackground.default,
90	color: theme.palette.tab.inactive.text,
91	fontFamily: theme.typography.fontFamily,
92	fontSize: 14,
93	lineHeight: '23px',
94	fontWeight: '500',
95	padding: '4px 8px',
96	borderRadius: 3,
97	cursor: 'pointer',
98	'&:hover': {
99	color: theme.palette.tab.inactive.hover.text
100	},
101	[theme.breakpoints.down('xs')]: {
102	fontSize: 13,
103	padding: '3px 6px',
104	minWidth: '100px',
105	}
106	},
107	activeTab: {
108	backgroundColor: theme.palette.tab.active.background,
109	color: theme.palette.text.alwaysWhite,
110	'&:hover': {
111	color: theme.palette.text.alwaysWhite,
112	backgroundColor: theme.palette.tab.active.hover.background
113	},
114	},
115	tagDescriptionTooltip: {
116	margin: 8,
117	},
118	arrow: {
119	position: 'absolute',
120	top: 0,
121	height: 30,
122	width: 28,
123	color: theme.palette.grey[500],
124	paddingTop: 7,
125	paddingLeft: 6,
126	cursor: 'pointer',
127	'&:hover': {
128	color: theme.palette.grey[700],
129	},
130	[theme.breakpoints.down('xs')]: {
131	display: 'none',
132	},
133	},
134	arrowIcon: {
135	fontSize: 18,
136	},
137	leftArrow: {
138	left: -30,
139	},
140	rightArrow: {
141	right: -30,
142	},
143	})
144
145	export interface TabRecord {
146	name: string,
147	label: string,
148	description?: string,
149	disabled?: boolean,
150	}
151
152	/**
153	* A horizontal bar of clickable tabs as alternative to a dropdown
154	*/
155	const TabPicker = <T extends TabRecord[]>(	1✔
156	{
157	classes,
158	sortedTabs,
159	defaultTab,
160	onTabSelectionUpdate,
161	showDescriptionOnHover = false,	×
162	}: {
163	classes: ClassesType<typeof styles>,
164	sortedTabs: T,
165	defaultTab?: T[number]['name'],
166	onTabSelectionUpdate: (tab: T[number]['name']) => void,
167	showDescriptionOnHover?: boolean,
168	},
169	) => {
NEW 170	const { LWTooltip, SingleColumnSection, ForumIcon } = Components;	×
171
NEW 172	const [activeTab, setActiveTab] = useState<T[number]['name']>(defaultTab ?? sortedTabs[0].name);	×
173
174	// we use the widths of the tab list container when calculating how far to scroll left and right
NEW 175	const tabsListRef = useRef<HTMLDivElement \| null>(null);	×
176
177	// we store the tab list scrollLeft offsets that correspond to displaying each "set" of tabs
NEW 178	const offsets = useRef<Array<number>>([0]);	×
179
NEW 180	const [leftArrowVisible, setLeftArrowVisible] = useState(false);	×
NEW 181	const [rightArrowVisible, setRightArrowVisible] = useState(false);	×
182	// We have the unfortunate situation where we want the right arrow + fade to be visible on mobile by default,
183	// since the tabs will be too wide to display in full, while not being visible on wider screens, during SSR.
184	// We also want the arrows to behave correctly after the user does any scrolling. So we do the following:
185	// 1. Default `rightArrowVisible` to false, which controls the `rightFade` class.
186	// 2. Record whether the user has ever manually scrolled on the tab bar, which informs the `rightFade${Three\|Four}Tabs` classes.
187	// Those classes ensure that users on mobile have a rightFade + arrow by default until they scroll if they have enough tabs to justify it.
188	// NOTE: If we implement enough tabs that we'll have scrolling on desktops as well, we can get rid of all of this and just switch the `rightArrowVisible` default back to true
NEW 189	const [everScrolled, setEverScrolled] = useState(false);	×
190
191	/**
192	* When the tabs bar is scrolled, hide/show the left/right arrows as necessary.
193	*/
NEW 194	const updateArrows = useCallback(() => {	×
NEW 195	if (!tabsListRef.current) return;	×
196
NEW 197	const currentScrollLeft = tabsListRef.current.scrollLeft;	×
198	// max amount we can scroll to the right, reduced a bit to make sure that
199	// we hide the right arrow when scrolled all the way to the right
NEW 200	const maxScrollLeft = tabsListRef.current.scrollWidth - tabsListRef.current.clientWidth;	×
201
NEW 202	setLeftArrowVisible(currentScrollLeft > 0);	×
NEW 203	setRightArrowVisible(currentScrollLeft < maxScrollLeft);	×
NEW 204	setEverScrolled(true);	×
205	}, []);
206
NEW 207	useEffect(() => {	×
NEW 208	if (!tabsListRef.current) return;	×
NEW 209	offsets.current = [0];	×
NEW 210	Array.from(tabsListRef.current.children).forEach((tab: HTMLElement) => {	×
NEW 211	if (!tabsListRef.current) return;	×
212	// we are looking for the tab that would get cut off at the end of each "set",
213	// by checking if the right edge would be past the window
214	// - if so, this will be the first in the next "set"
NEW 215	if (tab.offsetLeft + tab.offsetWidth - offsets.current[offsets.current.length - 1] > tabsListRef.current.offsetWidth) {	×
216	// subtract 30px to account for the fade on the left side of the tabs window
NEW 217	offsets.current.push(tab.offsetLeft - 30);	×
218	}
219	});
220
221	// updateArrows();
222	}, [tabsListRef, updateArrows, sortedTabs]);
223
224	const updateActiveTab = useCallback((activeTab: T[number]['name']) => {	×
225	setActiveTab(activeTab)	×
226	onTabSelectionUpdate(activeTab)	×
227	}, [onTabSelectionUpdate]);
228
229	/**
230	* Clicking the left arrow smooth scrolls us to the previous offset (or defaults to 0).
231	*/
NEW 232	const scrollLeft = () => {	×
NEW 233	if (!tabsListRef.current) return;	×
234	// look for the offset that is to the left of us
NEW 235	const nextOffset = Array.from(offsets.current).reverse().find(os => {	×
NEW 236	if (!tabsListRef.current) return false;	×
NEW 237	return os < (tabsListRef.current.scrollLeft - 2);	×
238	}) \|\| 0;
239
NEW 240	tabsListRef.current.scrollTo({	×
241	left: nextOffset,
242	behavior: 'smooth',
243	});
NEW 244	setRightArrowVisible(true);	×
NEW 245	setEverScrolled(true);	×
246	};
247
248	/**
249	* Clicking the right arrow smooth scrolls us to the next offset (if one exists).
250	*/
NEW 251	const scrollRight = () => {	×
NEW 252	if (!tabsListRef.current) return;	×
253	// look for the offset that is to the right of us
NEW 254	const nextOffset = offsets.current.find(os => {	×
NEW 255	if (!tabsListRef.current) return false;	×
NEW 256	return os > tabsListRef.current.scrollLeft;	×
257	});
258
NEW 259	if (!nextOffset) return;	×
NEW 260	tabsListRef.current.scrollTo({	×
261	left: nextOffset,
262	behavior: 'smooth',
263	});
NEW 264	setLeftArrowVisible(true);	×
NEW 265	setEverScrolled(true);	×
266	};
267
NEW 268	return (	×
269	<SingleColumnSection className={classes.tabsSection}>
270	<div className={classes.tabsRow}>
271	{leftArrowVisible && <div onClick={scrollLeft} className={classNames(classes.arrow, classes.leftArrow)}>	×
272	<ForumIcon icon="ThickChevronLeft" className={classes.arrowIcon}/>
273	</div>}
274	<div className={classNames(classes.tabsWindowContainer, {
275	[classes.leftFade]: leftArrowVisible,
276	[classes.rightFade]: rightArrowVisible,
277	[classes.rightFadeThreeTabs]: sortedTabs.length === 3 && !everScrolled,	×
278	[classes.rightFadeFourTabs]: sortedTabs.length === 4 && !everScrolled,	×
279	})}>
NEW 280	<div ref={tabsListRef} className={classes.topicsBar} onScroll={() => updateArrows()}>	×
281	{sortedTabs.map(tab => {
NEW 282	const isActive = tab.name === activeTab;	×
NEW 283	return <LWTooltip	×
284	title={showDescriptionOnHover ? tab.description : null}	×
285	popperClassName={classes.tagDescriptionTooltip}
286	key={tab.name}
287	hideOnTouchScreens
288	>
289	<button
NEW 290	onClick={() => updateActiveTab(tab.name)}	×
291	className={classNames(classes.tab, { [classes.activeTab]: isActive })}
292	>
293	{tab.label}
294	</button>
295	</LWTooltip>
296	})}
297	</div>
298	</div>
299	{rightArrowVisible && <div onClick={scrollRight} className={classNames(classes.arrow, classes.rightArrow)}>	×
300	<ForumIcon icon="ThickChevronRight" className={classes.arrowIcon}/>
301	</div>}
302	</div>
303	</SingleColumnSection>
304	);
305	}
306
307	const TabPickerComponent = registerComponent('TabPicker', TabPicker, {styles})	1✔
308
309	declare global {
310	interface ComponentTypes {
311	TabPicker: typeof TabPickerComponent
312	}
313	}

ForumMagnum / ForumMagnum / 8758650910

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous