9763656125

Committed 02 Jul 2024 03:17PM UTC coverage: 32.004%. Remained the same

Build # 9763656125

Build Type

Pull #9473

github

Committed by

oetherington

Commit Message

Fix corner clipping issues on hover

Pull Request Pull Request #9473: [EA] People directory mobile styles

Run Details

4893 of 39909 branches covered (12.26%)

Branch coverage included in aggregate %.

18 of 32 new or added lines in 6 files covered. (56.25%)

101 existing lines in 7 files now uncovered.

28504 of 64443 relevant lines covered (44.23%)

180.65 hits per line

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

16.67

/packages/lesswrong/components/peopleDirectory/PeopleDirectoryFilterDropdown.tsx

import React, { ReactNode, useCallback, useRef, useState } from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import type { ForumIconName } from "../common/ForumIcon";
import classNames from "classnames";

export const styles = (theme: ThemeType) => ({
  root: {
    cursor: "pointer",
    display: "inline-block",
    padding: "4px 8px",
    fontFamily: theme.palette.fonts.sansSerifStack,
    borderRadius: theme.borderRadius.small,
  },
  dropdown: {
    color: theme.palette.grey[1000],
    border: `1px solid ${theme.palette.grey[300]}`,
    background: theme.palette.grey[0],
    "&:hover": {
      borderColor: theme.palette.grey[310],
      background: theme.palette.grey[25],
    },
    "&$active:hover": {
      background: theme.palette.primary.dark,
    },
  },
  button: {
    color: theme.palette.grey[600],
    "&:hover": {
      color: theme.palette.grey[800],
      background: theme.palette.grey[120],
    },
  },
  active: {
    color: theme.palette.text.alwaysWhite,
    background: theme.palette.primary.main,
    "& $chevron": {
      color: theme.palette.text.alwaysWhite,
    },
  },
  title: {
    userSelect: "none",
    fontSize: 14,
    fontWeight: 500,
    height: 24,
    display: "flex",
    alignItems: "center",
  },
  icon: {
    width: 20,
    marginRight: 4,
  },
  chevron: {
    width: 16,
    marginLeft: 4,
    color: theme.palette.grey[600],
  },
  chevronOpen: {
    transform: "rotateX(180deg)",
  },
  popper: {
    fontFamily: theme.palette.fonts.sansSerifStack,
    paddingTop: 4,
  },
  card: {
    background: theme.palette.grey[0],
    borderRadius: theme.borderRadius.default,
    border: `1px solid ${theme.palette.grey[120]}`,
    boxShadow: theme.palette.boxShadow.eaCard,
  },
});

export const PeopleDirectoryFilterDropdown = ({
  title,
  active,
  style = "dropdown",
  icon,
  onOpen,
  onClose,
  children,
  className,
  rootClassName,
  titleClassName,
  classes,
}: {
  title: ReactNode,
  active?: boolean,
  style?: "dropdown" | "button",
  icon?: ForumIconName,
  onOpen?: () => void,
  onClose?: () => void,
  children?: ReactNode,
  className?: string,
  rootClassName?: string,
  titleClassName?: string,
  classes: ClassesType<typeof styles>,
}) => {
  const [open, setOpen] = useState(false);
  const anchorRef = useRef<HTMLDivElement | null>(null);

  const onChangeOpen = useCallback((newOpen: boolean) => {
    setOpen((oldOpen) => {
      if (!oldOpen && newOpen) {
        onOpen?.();
      } else if (oldOpen && !newOpen) {
        onClose?.();
      }
      return newOpen;
    });
  }, [onOpen, onClose]);

  const {LWPopper, LWClickAwayListener, ForumIcon} = Components;
  return (
    <div
      ref={anchorRef}
      className={classNames(classes.root, rootClassName, {
        [classes.dropdown]: style === "dropdown",
        [classes.button]: style === "button",
        [classes.active]: active,
      })}
    >
      <div
        onClick={() => onChangeOpen(!open)}
        className={classNames(classes.title, titleClassName)}
      >
        {icon && <ForumIcon icon={icon} className={classes.icon} />}
        {title}
        {style === "dropdown" &&
          <ForumIcon
            icon="ThickChevronDown"
            className={classNames(classes.chevron, {[classes.chevronOpen]: open})}
          />
        }
      </div>
      <LWPopper
        placement="bottom-start"
        open={open}
        anchorEl={anchorRef.current}
        className={classes.popper}
      >
        <LWClickAwayListener onClickAway={() => onChangeOpen(false)}>
          <div className={classNames(classes.card, className)}>
            {children}
          </div>
        </LWClickAwayListener>
      </LWPopper>
    </div>
  );
}

const PeopleDirectoryFilterDropdownComponent = registerComponent(
  "PeopleDirectoryFilterDropdown",
  PeopleDirectoryFilterDropdown,
  {styles, stylePriority: -1},
);

declare global {
  interface ComponentTypes {
    PeopleDirectoryFilterDropdown: typeof PeopleDirectoryFilterDropdownComponent
  }
}

1	import React, { ReactNode, useCallback, useRef, useState } from "react";	4✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import type { ForumIconName } from "../common/ForumIcon";
4	import classNames from "classnames";	1✔
5
6	export const styles = (theme: ThemeType) => ({	2✔
7	root: {
8	cursor: "pointer",
9	display: "inline-block",
10	padding: "4px 8px",
11	fontFamily: theme.palette.fonts.sansSerifStack,
12	borderRadius: theme.borderRadius.small,
13	},
14	dropdown: {
15	color: theme.palette.grey[1000],
16	border: `1px solid ${theme.palette.grey[300]}`,
17	background: theme.palette.grey[0],
18	"&:hover": {
19	borderColor: theme.palette.grey[310],
20	background: theme.palette.grey[25],
21	},
22	"&$active:hover": {
23	background: theme.palette.primary.dark,
24	},
25	},
26	button: {
27	color: theme.palette.grey[600],
28	"&:hover": {
29	color: theme.palette.grey[800],
30	background: theme.palette.grey[120],
31	},
32	},
33	active: {
34	color: theme.palette.text.alwaysWhite,
35	background: theme.palette.primary.main,
36	"& $chevron": {
37	color: theme.palette.text.alwaysWhite,
38	},
39	},
40	title: {
41	userSelect: "none",
42	fontSize: 14,
43	fontWeight: 500,
44	height: 24,
45	display: "flex",
46	alignItems: "center",
47	},
48	icon: {
49	width: 20,
50	marginRight: 4,
51	},
52	chevron: {
53	width: 16,
54	marginLeft: 4,
55	color: theme.palette.grey[600],
56	},
57	chevronOpen: {
58	transform: "rotateX(180deg)",
59	},
60	popper: {
61	fontFamily: theme.palette.fonts.sansSerifStack,
62	paddingTop: 4,
63	},
64	card: {
65	background: theme.palette.grey[0],
66	borderRadius: theme.borderRadius.default,
67	border: `1px solid ${theme.palette.grey[120]}`,
68	boxShadow: theme.palette.boxShadow.eaCard,
69	},
70	});
71
72	export const PeopleDirectoryFilterDropdown = ({	1✔
73	title,
74	active,
75	style = "dropdown",	×
76	icon,
77	onOpen,
78	onClose,
79	children,
80	className,
81	rootClassName,
82	titleClassName,
83	classes,
84	}: {
85	title: ReactNode,
86	active?: boolean,
87	style?: "dropdown" \| "button",
88	icon?: ForumIconName,
89	onOpen?: () => void,
90	onClose?: () => void,
91	children?: ReactNode,
92	className?: string,
93	rootClassName?: string,
94	titleClassName?: string,
95	classes: ClassesType<typeof styles>,
96	}) => {
UNCOV 97	const [open, setOpen] = useState(false);	×
98	const anchorRef = useRef<HTMLDivElement \| null>(null);	×
99
UNCOV 100	const onChangeOpen = useCallback((newOpen: boolean) => {	×
UNCOV 101	setOpen((oldOpen) => {	×
UNCOV 102	if (!oldOpen && newOpen) {	×
103	onOpen?.();	×
104	} else if (oldOpen && !newOpen) {	×
UNCOV 105	onClose?.();	×
106	}
107	return newOpen;	×
108	});
109	}, [onOpen, onClose]);
110
111	const {LWPopper, LWClickAwayListener, ForumIcon} = Components;	×
UNCOV 112	return (	×
113	<div
114	ref={anchorRef}
115	className={classNames(classes.root, rootClassName, {
116	[classes.dropdown]: style === "dropdown",
117	[classes.button]: style === "button",
118	[classes.active]: active,
119	})}
120	>
121	<div
UNCOV 122	onClick={() => onChangeOpen(!open)}	×
123	className={classNames(classes.title, titleClassName)}
124	>
125	{icon && <ForumIcon icon={icon} className={classes.icon} />}	×
126	{title}
127	{style === "dropdown" &&	×
128	<ForumIcon
129	icon="ThickChevronDown"
130	className={classNames(classes.chevron, {[classes.chevronOpen]: open})}
131	/>
132	}
133	</div>
134	<LWPopper
135	placement="bottom-start"
136	open={open}
137	anchorEl={anchorRef.current}
138	className={classes.popper}
139	>
UNCOV 140	<LWClickAwayListener onClickAway={() => onChangeOpen(false)}>	×
141	<div className={classNames(classes.card, className)}>
142	{children}
143	</div>
144	</LWClickAwayListener>
145	</LWPopper>
146	</div>
147	);
148	}
149
150	const PeopleDirectoryFilterDropdownComponent = registerComponent(	1✔
151	"PeopleDirectoryFilterDropdown",
152	PeopleDirectoryFilterDropdown,
153	{styles, stylePriority: -1},
154	);
155
156	declare global {
157	interface ComponentTypes {
158	PeopleDirectoryFilterDropdown: typeof PeopleDirectoryFilterDropdownComponent
159	}
160	}

ForumMagnum / ForumMagnum / 9763656125

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