From b10267c8f4e052ed6811c9b0272cd8c286fc48af Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 11 Feb 2021 13:47:45 -0800 Subject: [PATCH 1/7] fix Dropdown docs & types --- docs/content/Dropdown.md | 37 +------------------------------------ index.d.ts | 8 +++----- src/Dropdown.js | 4 +++- 3 files changed, 7 insertions(+), 42 deletions(-) diff --git a/docs/content/Dropdown.md b/docs/content/Dropdown.md index 1254428aec0..48adbd83f85 100644 --- a/docs/content/Dropdown.md +++ b/docs/content/Dropdown.md @@ -34,31 +34,6 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi ``` -## Manage the open state manually -The `Dropdown` element is built to also let you manage the open state and toggle functionality if necessary. Just provide values to the `open` and `onToggle` props. - -**Note:** Closing the dropdown on outside clicks will not function automatically if you chose to provide your own `open` state. You'll need to implement this yourself. You can use the `onClickOutside` prop to implement and customize this behavior. - -```jsx live - - {([open, setOpen]) => { - - const handleToggle = (e) => setOpen(e.target.open) - const handleClickOutside = () => setOpen(false) - - return ( - - Dropdown - - Item 1 - Item 2 - Item 3 - - - ) - }} - -``` ## System props @@ -66,17 +41,7 @@ Dropdown, Dropdown.Menu, Dropdown.Button, Dropdown.Caret, and Dropdown.Item all ## Component props -The Dropdown component is extended from the [`Details`](/Details) component and gets all props that the [`Details`](/Details) component gets. They are listed below, but you may reference the [`Details`](/Details) docs for more details on how to manage your own `open` state. - -#### Dropdown -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| defaultOpen | Boolean | | Sets the initial open/closed state | -| overlay | Boolean | false | Sets whether or not element will close when user clicks outside of it | -| open | Boolean | | Use the open prop if you'd like to manage the open state | -| onToggle | Function | | Called whenever user clicks on `summary` element. If you are controlling your own `open` state this will be the only function called on click, otherwise it's called before the internal `handleToggle` function.| -| onClickOutside | Function | | Function to call whenever user clicks outside of the Details component. This is optional and only necessary if you are controlling your own `open` state. | - +The Dropdown component is extended from the [`Details`](/Details) component and gets all props that the [`Details`](/Details) component gets. #### Dropdown.Menu diff --git a/index.d.ts b/index.d.ts index 21fff14e7dd..c476ed8f73d 100644 --- a/index.d.ts +++ b/index.d.ts @@ -76,9 +76,8 @@ declare module '@primer/components' { export interface DetailsProps extends CommonProps, Omit, 'color'> { - onToggle: (event: React.SyntheticEvent) => void - open: boolean - ref: React.RefObject + open?: boolean + ref?: React.RefObject } export const Details: React.FunctionComponent @@ -184,7 +183,6 @@ declare module '@primer/components' { export const StyledOcticon: React.FunctionComponent - export interface DropdownProps extends DetailsProps {} export interface DropdownItemProps extends CommonProps, Omit, 'color'> {} export interface DropdownMenuProps extends CommonProps, Omit, 'color'> { @@ -195,7 +193,7 @@ declare module '@primer/components' { export interface DropdownCaretProps extends CommonProps, Omit, 'color'> {} - export const Dropdown: React.FunctionComponent & { + export const Dropdown: React.FunctionComponent & { Menu: React.FunctionComponent Item: React.FunctionComponent Button: React.FunctionComponent diff --git a/src/Dropdown.js b/src/Dropdown.js index ba9b920c013..2a033cdf52a 100644 --- a/src/Dropdown.js +++ b/src/Dropdown.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import styled from 'styled-components' import Button from './Button' import Details from './Details' +import useDetails from './hooks/useDetails' import {COMMON, get} from './constants' import getDirectionStyles from './DropdownStyles' import theme from './theme' @@ -14,8 +15,9 @@ const StyledDetails = styled(Details)` ` const Dropdown = ({children, className, ...rest}) => { + const {getDetailsProps} = useDetails({closeOnOutsideClick: true}) return ( - + {children} ) From f83df0f81dded5af35581450bf9644aac927745a Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 11 Feb 2021 13:54:50 -0800 Subject: [PATCH 2/7] update types again --- index.d.ts | 1 - src/Details.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/index.d.ts b/index.d.ts index c476ed8f73d..d30b1c7c61c 100644 --- a/index.d.ts +++ b/index.d.ts @@ -76,7 +76,6 @@ declare module '@primer/components' { export interface DetailsProps extends CommonProps, Omit, 'color'> { - open?: boolean ref?: React.RefObject } diff --git a/src/Details.tsx b/src/Details.tsx index aa59f5ec6b9..e46fb7dbc80 100644 --- a/src/Details.tsx +++ b/src/Details.tsx @@ -5,7 +5,6 @@ import {ComponentProps} from './utils/types' import sx, {SxProp} from './sx' type StyledDetailsProps = { - open?: boolean } & SystemCommonProps & SxProp From be82a50033e8392c2dd80f56df9f398397f45379 Mon Sep 17 00:00:00 2001 From: emplums Date: Thu, 11 Feb 2021 13:56:33 -0800 Subject: [PATCH 3/7] Create tricky-mugs-attend.md --- .changeset/tricky-mugs-attend.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/tricky-mugs-attend.md diff --git a/.changeset/tricky-mugs-attend.md b/.changeset/tricky-mugs-attend.md new file mode 100644 index 00000000000..a8a6e45c76e --- /dev/null +++ b/.changeset/tricky-mugs-attend.md @@ -0,0 +1,7 @@ +--- +"@primer/components": patch +--- + +- Fixed Dropdown & Details types. + +- Added useDetails behavior back to Dropdown From 2d56748dc2ae52653958ef15bd484c216bb05887 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 11 Feb 2021 14:22:50 -0800 Subject: [PATCH 4/7] Update Details.tsx --- src/Details.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Details.tsx b/src/Details.tsx index e46fb7dbc80..37ad3c8db86 100644 --- a/src/Details.tsx +++ b/src/Details.tsx @@ -4,9 +4,7 @@ import {COMMON, SystemCommonProps} from './constants' import {ComponentProps} from './utils/types' import sx, {SxProp} from './sx' -type StyledDetailsProps = { -} & SystemCommonProps & - SxProp +type StyledDetailsProps = SystemCommonProps & SxProp const Details = styled.details` & > summary { From d56954e406c4f4e23f95b1a2e4cc0f2f903e49ac Mon Sep 17 00:00:00 2001 From: emplums Date: Tue, 16 Feb 2021 13:10:18 -0800 Subject: [PATCH 5/7] Update .changeset/tricky-mugs-attend.md --- .changeset/tricky-mugs-attend.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/.changeset/tricky-mugs-attend.md b/.changeset/tricky-mugs-attend.md index a8a6e45c76e..be8143084c6 100644 --- a/.changeset/tricky-mugs-attend.md +++ b/.changeset/tricky-mugs-attend.md @@ -3,5 +3,3 @@ --- - Fixed Dropdown & Details types. - -- Added useDetails behavior back to Dropdown From 7c4c726c822fafc524e9b6928a7f9d413e1a7bc8 Mon Sep 17 00:00:00 2001 From: emplums Date: Tue, 16 Feb 2021 13:10:39 -0800 Subject: [PATCH 6/7] Create violet-oranges-speak.md --- .changeset/violet-oranges-speak.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/violet-oranges-speak.md diff --git a/.changeset/violet-oranges-speak.md b/.changeset/violet-oranges-speak.md new file mode 100644 index 00000000000..0f1d3f3ad47 --- /dev/null +++ b/.changeset/violet-oranges-speak.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +- Added useDetails behavior back to Dropdown From db1c616fa2c0a03d09420927eb1a4c1a07dd8d3b Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Tue, 16 Feb 2021 13:20:38 -0800 Subject: [PATCH 7/7] update snapshot --- src/__tests__/__snapshots__/Dropdown.js.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/src/__tests__/__snapshots__/Dropdown.js.snap b/src/__tests__/__snapshots__/Dropdown.js.snap index a17dfe8f19a..731fb758646 100644 --- a/src/__tests__/__snapshots__/Dropdown.js.snap +++ b/src/__tests__/__snapshots__/Dropdown.js.snap @@ -16,6 +16,7 @@ exports[`Dropdown renders consistently 1`] = `
Hello!