Dropdown v6 Update (#379)

* v6 first pass. * Improve api. * Update and add styling. * Add basic keyboard-nav. * Add split dropdown button. * Add dropdown children. * Style cleanup. * Add documentation. * Shuffle and export new components. * Fix disabled menu-items. * Bit of clean up. * Deprecate the v5 components. * Update hover. * Add title component. * Add checks to top of examples. * Line up avatar and thumbnail. * Address review. * v5.66.0
Faithlife · Nov 5, 2020 · 1168be9 · 1168be9
1 parent 07698ed
commit 1168be9
Show file tree

Hide file tree

Showing 30 changed files with 1,011 additions and 133 deletions.
diff --git a/catalog/dropdown/variations-v6.md b/catalog/dropdown/variations-v6.md
@@ -0,0 +1,132 @@
+- [✔] Styled Systems support
+- [✔] WAI-ARIA compliant
+
+## Dropdown v6
+
+```react
+showSource: true
+state: { isOpen: false }
+---
+<DropdownDemo>
+	<Dropdown isOpen={state.isOpen} onToggleMenu={() => setState({ isOpen: !state.isOpen })}>
+		<Dropdown.Toggle>Show a Dropdown!</Dropdown.Toggle>
+		<Dropdown.Menu>
+			<Dropdown.Item onClick={() => alert("Menu Item 1")}>Menu Item 1</Dropdown.Item>
+			<Dropdown.Item onClick={() => alert("Menu Item 2")}>Menu Item 2</Dropdown.Item>
+			<Dropdown.Item disabled onClick={() => alert("Menu Item 3")}>Menu Item 3</Dropdown.Item>
+		</Dropdown.Menu>
+	</Dropdown>
+</DropdownDemo>
+```
+
+## Split Dropdown Toggle
+
+```react
+showSource: true
+state: { isOpen: false }
+---
+<DropdownDemo>
+	<Dropdown isOpen={state.isOpen} onToggleMenu={() => setState({ isOpen: !state.isOpen })}>
+		<Dropdown.Toggle>
+			<Dropdown.ActionButton onClick={() => alert("Different Action")}>Show a Dropdown!</Dropdown.ActionButton>
+		</Dropdown.Toggle>
+		<Dropdown.Menu>
+			<Dropdown.Item onClick={() => alert("Menu Item 1")}>Menu Item 1</Dropdown.Item>
+			<Dropdown.Item onClick={() => alert("Menu Item 2")}>Menu Item 2</Dropdown.Item>
+			<Dropdown.Item disabled onClick={() => alert("Menu Item 3")}>Menu Item 3</Dropdown.Item>
+		</Dropdown.Menu>
+	</Dropdown>
+</DropdownDemo>
+```
+
+## Dropdown Menu Items
+
+```react
+showSource: true
+state: { isOpen: false, isChecked: false }
+---
+<DropdownDemo>
+	<Dropdown isOpen={state.isOpen} onToggleMenu={() => setState({ isOpen: !state.isOpen })}>
+		<Dropdown.Toggle>Show a Dropdown!</Dropdown.Toggle>
+		<Dropdown.Menu>
+			<Dropdown.Title>Dropdown</Dropdown.Title>
+			<Dropdown.Separator />
+			<Dropdown.Item onClick={() => alert("Menu Item")}>Menu Item</Dropdown.Item>
+			<Dropdown.CheckboxItem isChecked={state.isChecked} onToggle={() => setState({ isChecked: !state.isChecked })}>Menu Checkbox</Dropdown.CheckboxItem>
+			<Dropdown.LinkItem href="https://faithlife.github.io/styled-ui/#/icons" target="_blank">Menu Link</Dropdown.LinkItem>
+		</Dropdown.Menu>
+	</Dropdown>
+</DropdownDemo>
+```
+
+## Using custom toggle component
+
+```react
+showSource: true
+state: { isOpen: false }
+---
+<DropdownDemo>
+	<Dropdown isOpen={state.isOpen} onToggleMenu={() => setState({ isOpen: !state.isOpen })}>
+		<Dropdown.Toggle>
+			{(ref, {onKeyDown, onClick, ariaProps}) =>
+				<Button variant="primary" size="medium" ref={ref} onKeyDown={onKeyDown} onClick={onClick} {...ariaProps}>Show a Dropdown!</Button>}
+		</Dropdown.Toggle>
+		<Dropdown.Menu>
+			<Dropdown.Item onClick={() => alert("Menu Item 1")}>Menu Item 1</Dropdown.Item>
+			<Dropdown.Item onClick={() => alert("Menu Item 2")}>Menu Item 2</Dropdown.Item>
+			<Dropdown.Item onClick={() => alert("Menu Item 3")}>Menu Item 3</Dropdown.Item>
+		</Dropdown.Menu>
+	</Dropdown>
+</DropdownDemo>
+```
+
+## With icon
+
+variant = icon | thumbnail | avatar
+
+```react
+showSource: true
+state: { isOpen: false }
+---
+<DropdownDemo>
+	<Dropdown isOpen={state.isOpen} width="280px" onToggleMenu={() => setState({ isOpen: !state.isOpen })}>
+		<Dropdown.Toggle>Show a Dropdown!</Dropdown.Toggle>
+		<Dropdown.Menu>
+			<Dropdown.Item onClick={() => alert("Menu Item 1")}>
+				<Dropdown.ItemIcon><FavoriteFilled /></Dropdown.ItemIcon>
+				<Dropdown.ItemPrimaryText>Menu Item 1</Dropdown.ItemPrimaryText>
+				<Dropdown.ItemSecondaryText>Variant = Icon</Dropdown.ItemSecondaryText>
+			</Dropdown.Item>
+			<Dropdown.Item onClick={() => alert("Menu Item 2")}>
+				<Dropdown.ItemIcon src={thumbnailSrc} variant="thumbnail" />
+				<Dropdown.ItemPrimaryText>Menu Item 2</Dropdown.ItemPrimaryText>
+				<Dropdown.ItemSecondaryText>Variant = Thumbnail</Dropdown.ItemSecondaryText>
+			</Dropdown.Item>
+			<Dropdown.Item onClick={() => alert("Menu Item 3")}>
+				<Dropdown.ItemIcon src={avatarSrc} variant="avatar" />
+				<Dropdown.ItemPrimaryText fontWeight={1}>Menu Item 3 (Avatar)</Dropdown.ItemPrimaryText>
+			</Dropdown.Item>
+		</Dropdown.Menu>
+	</Dropdown>
+</DropdownDemo>
+```
+
+## Styling
+
+Toggle, Menu, Title, Item, Item variants, and Item config children all accept styled-system props.
+
+```react
+showSource: true
+state: { isOpen: false }
+---
+<DropdownDemo>
+	<Dropdown isOpen={state.isOpen} onToggleMenu={() => setState({ isOpen: !state.isOpen })}>
+		<Dropdown.Toggle variant="minor">Show a Dropdown!</Dropdown.Toggle>
+		<Dropdown.Menu>
+			<Dropdown.Item onClick={() => alert("Menu Item 1")}>Menu Item 1</Dropdown.Item>
+			<Dropdown.Item onClick={() => alert("Menu Item 2")}>Menu Item 2</Dropdown.Item>
+			<Dropdown.Item color="red" onClick={() => alert("Menu Item 3")}>Menu Item 3</Dropdown.Item>
+		</Dropdown.Menu>
+	</Dropdown>
+</DropdownDemo>
+```
diff --git a/catalog/index.js b/catalog/index.js
@@ -66,7 +66,12 @@ import {
 	Switch,
 	theme,
 } from '../index';
-import { Modal as V6Modal, Button as V6Button, SegmentedButtonGroup } from '../index-v6';
+import {
+	Modal as V6Modal,
+	Button as V6Button,
+	SegmentedButtonGroup,
+	Dropdown as V6Dropdown,
+} from '../index-v6';
 import { GroupSelector, LargeGroupSelector } from '../components/group-selector';
 import { ShareDialog } from '../components/share-dialog';
 import { GearIcon } from '../components/icons';
@@ -483,6 +488,25 @@ const pages = [
 					Button,
 				},
 			},
+			{
+				path: '/dropdown/variations/v6',
+				title: 'Dropdown v6',
+				content: pageLoader(() => import('./dropdown/variations-v6.md')),
+				imports: {
+					Dropdown: V6Dropdown,
+					DropdownDemo: styled.div`
+						display: flex;
+						align-items: flex-start;
+						justify-content: space-between;
+					`,
+					Button: V6Button,
+					FavoriteFilled,
+					avatarSrc:
+						'https://files.logoscdn.com/v1/files/45929047/content.svg?signature=LanlyvDyHzxkch6f8DNUV1J15Lw',
+					thumbnailSrc:
+						'https://files.logoscdn.com/v1/files/46191785/assets/11156922/content.png?signature=ogDB6y5KmpyPWtBWitethsnveRw',
+				},
+			},
 			{
 				path: '/dropdown/documentation',
 				title: 'Dropdown Documentation',

diff --git a/components/button/Button.js b/components/button/Button.js
@@ -81,8 +81,8 @@ const Button = React.forwardRef(({ children, icon, ...props }, ref) => (
 	</ButtonCore>
 ));
 
-const SegmentedButtonGroup = styled(Box).attrs(() => ({
-	border: 1,
+const SegmentedButtonGroup = styled(Box).attrs(({ border }) => ({
+	border: border ?? 1,
 	borderColor: 'button.segmentedButtonGroupBorder',
 	borderRadius: 1,
 	backgroundColor: 'button.segmentedButtonGroupBackground',

diff --git a/components/check-box/styled.jsx b/components/check-box/styled.jsx
@@ -3,7 +3,7 @@ import { resetStyles } from '../utils';
 import { Box } from '../Box';
 
 export const CheckboxDiv = styled(Box)`
-	position: absolute;
+	position: ${({ position }) => position ?? 'absolute'};
 	border: solid 1px
 		${({ theme, themeOverrides }) => themeOverrides?.border ?? theme.colors.checkbox.border};
 	border-radius: 3px;