From 79d9f68046c9e156bca55c7f57ab09ac73e47650 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 8 Apr 2020 10:34:25 -0700 Subject: [PATCH 1/4] add menu context docs --- docs/content/SelectMenu.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/docs/content/SelectMenu.md b/docs/content/SelectMenu.md index 3a95eb0fe65..74b9672b33f 100644 --- a/docs/content/SelectMenu.md +++ b/docs/content/SelectMenu.md @@ -40,6 +40,42 @@ SelectMenu components get `COMMON` system props. Read our [System Props](/system | :- | :- | :-: | :- | | initialTab | String | | If using the `SelectMenu.Tabs` component, you can use this prop to change the tab shown on open. By default, the first tab will be used. +## SelectMenu.MenuContext +SelectMenu.MenuContext is a [context object](https://reactjs.org/docs/context.html#reactcreatecontext) that exposes some helpful state values to be used via [`React.useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext) in consuming applications. SelectMenu.MenuContext can only be used in components that are already wrapped in a `SelectMenu` as `SelectMenu` contains the [context provider](https://reactjs.org/docs/context.html#contextprovider). + +### Values and functions available on MenuContext +| Name | Type | Description | +| :- | :- | :- | +| selectedTab | string | The currently selected tab | +| setSelectedTab | function | Used to update the currently selected tab state | +| open | boolean | State for open/closed status of the menu content | +| setOpen | function | Used to update the `open` state | +| initialTab | string | Mostly used internally to pass down which tab should be set to open by default. To change this value it's best to use the `initialTab` prop on `SelectMenu` instead. | + + +### Example Usage +```jsx +import {SelectMenu, Button} from `@primer/components` +import React, {useContext} from 'react' + +const MyMenu = () => { + + + + content + + +} + +// note that we can only use the context in components that are already wrapped by SelectMenu (and thus the Context.Provider) +const MyButton = () => { + const menuContext = useContext(SelectMenu.MenuContext); + + return ( + + ) +} +``` ## SelectMenu.Modal Used to wrap the content in a `SelectMenu`. From a7e0304ca4b12349fcd66e0ba5f18c967e7491d5 Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 8 Apr 2020 11:24:10 -0700 Subject: [PATCH 2/4] Update docs/content/SelectMenu.md Co-Authored-By: Cole Bemis --- docs/content/SelectMenu.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/SelectMenu.md b/docs/content/SelectMenu.md index 74b9672b33f..49130f28290 100644 --- a/docs/content/SelectMenu.md +++ b/docs/content/SelectMenu.md @@ -43,7 +43,7 @@ SelectMenu components get `COMMON` system props. Read our [System Props](/system ## SelectMenu.MenuContext SelectMenu.MenuContext is a [context object](https://reactjs.org/docs/context.html#reactcreatecontext) that exposes some helpful state values to be used via [`React.useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext) in consuming applications. SelectMenu.MenuContext can only be used in components that are already wrapped in a `SelectMenu` as `SelectMenu` contains the [context provider](https://reactjs.org/docs/context.html#contextprovider). -### Values and functions available on MenuContext +### Values available on MenuContext | Name | Type | Description | | :- | :- | :- | | selectedTab | string | The currently selected tab | @@ -320,4 +320,4 @@ Use a `SelectMenu.Header` to add a header to the top of the select menu content. SelectMenu.Header components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ### Component Props -SelectMenu.Header components do not get any additional props besides system props. \ No newline at end of file +SelectMenu.Header components do not get any additional props besides system props. From 0003527109b608f4bc218a6a7b499d3518dcb967 Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 8 Apr 2020 11:24:18 -0700 Subject: [PATCH 3/4] Update docs/content/SelectMenu.md Co-Authored-By: Cole Bemis --- docs/content/SelectMenu.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/SelectMenu.md b/docs/content/SelectMenu.md index 49130f28290..9cb807f2d53 100644 --- a/docs/content/SelectMenu.md +++ b/docs/content/SelectMenu.md @@ -48,7 +48,7 @@ SelectMenu.MenuContext is a [context object](https://reactjs.org/docs/context.ht | :- | :- | :- | | selectedTab | string | The currently selected tab | | setSelectedTab | function | Used to update the currently selected tab state | -| open | boolean | State for open/closed status of the menu content | +| open | boolean | State for open/closed status of the menu modal | | setOpen | function | Used to update the `open` state | | initialTab | string | Mostly used internally to pass down which tab should be set to open by default. To change this value it's best to use the `initialTab` prop on `SelectMenu` instead. | From b4cfb3040d3327378684fedcdaedcfb75f6cc0a3 Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 8 Apr 2020 11:24:45 -0700 Subject: [PATCH 4/4] Update docs/content/SelectMenu.md Co-Authored-By: Cole Bemis --- docs/content/SelectMenu.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/SelectMenu.md b/docs/content/SelectMenu.md index 9cb807f2d53..fd3d009b130 100644 --- a/docs/content/SelectMenu.md +++ b/docs/content/SelectMenu.md @@ -50,7 +50,7 @@ SelectMenu.MenuContext is a [context object](https://reactjs.org/docs/context.ht | setSelectedTab | function | Used to update the currently selected tab state | | open | boolean | State for open/closed status of the menu modal | | setOpen | function | Used to update the `open` state | -| initialTab | string | Mostly used internally to pass down which tab should be set to open by default. To change this value it's best to use the `initialTab` prop on `SelectMenu` instead. | +| initialTab | string | Mostly used internally to pass down which tab should be set to open by default. To change this value use the `initialTab` prop on `SelectMenu`. | ### Example Usage