From a205ce9a12067e79848f5690121376198eb971d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Inayaili=20Le=C3=B3n?= Date: Tue, 11 Jan 2022 14:28:06 +0000 Subject: [PATCH 1/6] Update Buttons.md (#1600) * Update Buttons.md fixing some capitalisation in examples * Smol change Co-authored-by: Pavithra Kodmad Co-authored-by: Mike Perrotti --- docs/content/Buttons.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/content/Buttons.md b/docs/content/Buttons.md index 8beb172e3cb..117472d6a79 100644 --- a/docs/content/Buttons.md +++ b/docs/content/Buttons.md @@ -15,10 +15,10 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. ` ```jsx live <> - Button Danger - Button Outline - Button Primary - Button Invisible + Button danger + Button outline + Button primary + Button invisible window.alert('button clicked')} /> @@ -27,7 +27,7 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. ` - Button Table List + Button table list ``` From 82961d441b2108243a8798990f896969fe245457 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 11 Jan 2022 10:46:03 -0500 Subject: [PATCH 2/6] Select input component (#1736) * adds Select component and stories * adds tests * styling fix for Firefox * adds docs * adds changeset * appease the linter * Update src/Select.tsx Co-authored-by: Rez * addresses PR feedback * addresses more PR feedback * adds props table to select * fix deployment failure * fixes docs build * change ternary to AND operator * adds comopnentId to docs frontmatter * adds Select as a possible InputField child * updates package-lock.json Co-authored-by: Rez --- .changeset/cool-parrots-double.md | 5 + docs/content/InputField.mdx | 75 +- docs/content/Select.mdx | 125 + .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 + package-lock.json | 37253 +--------------- src/InputField/InputField.tsx | 4 +- src/Select.tsx | 78 + src/_TextInputWrapper.tsx | 5 +- src/__tests__/Select.test.tsx | 136 + .../__snapshots__/Autocomplete.test.tsx.snap | 21 +- .../__snapshots__/TextInput.test.tsx.snap | 36 +- .../TextInputWithTokens.test.tsx.snap | 36 +- src/index.ts | 1 + src/stories/InputField.stories.tsx | 14 +- src/stories/Select.stories.tsx | 110 + 15 files changed, 630 insertions(+), 37271 deletions(-) create mode 100644 .changeset/cool-parrots-double.md create mode 100644 docs/content/Select.mdx create mode 100644 src/Select.tsx create mode 100644 src/__tests__/Select.test.tsx create mode 100644 src/stories/Select.stories.tsx diff --git a/.changeset/cool-parrots-double.md b/.changeset/cool-parrots-double.md new file mode 100644 index 00000000000..8ffb3c506db --- /dev/null +++ b/.changeset/cool-parrots-double.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Adds a component for a native select input diff --git a/docs/content/InputField.mdx b/docs/content/InputField.mdx index 741e9e1671b..2f6b71adbde 100644 --- a/docs/content/InputField.mdx +++ b/docs/content/InputField.mdx @@ -7,9 +7,7 @@ source: https://github.com/primer/react/blob/main/src/InputField/InputField.tsx storybook: '/react/storybook?path=/story/forms-inputfield--text-input-field' --- -import {InputField, TextInputWithTokens} from '@primer/react' -import {PropsTable} from '../src/props-table' -import {ComponentChecklist} from '../src/component-checklist' +import {InputField, TextInputWithTokens, Autocomplete, Select} from '@primer/react' ## Examples @@ -40,7 +38,7 @@ import {ComponentChecklist} from '../src/component-checklist' ``` -### Using a TextInputWithTokens input +### Using different input components ```javascript live noinline const TextInputWithTokensExample = () => { @@ -54,10 +52,49 @@ const TextInputWithTokensExample = () => { } return ( - - Name - - + * + *': { + marginTop: 4 + } + }} + > + + TextInputWithTokens + + + + Autocomplete + + + + + + + + + Select + + + ) } @@ -137,35 +174,35 @@ render(ValidationExample) The container that handles the layout and passes the relevant IDs and ARIA attributes it's children. - - - - - - + ### InputField.Label @@ -173,7 +210,7 @@ The container that handles the layout and passes the relevant IDs and ARIA attri A `InputField.Label` must be passed for the field to be accessible to assistive technology, but it may be visually hidden. - - - - + + Preferred Primer component interface + + + +``` + +### With grouped options + +```jsx live +<> + + Preferred Primer component interface + + + +``` + +### With a placeholder + +```jsx live +<> + + Preferred Primer component interface + + + +``` + +## Props + +### Select + + + Creates a full width input element} + /> + + + + MDN + } + /> + + + +### Select.OptGroup + +The `Select.OptGroup` component accepts the same props as a native HTML [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup). + +### Select.Option + +The `Select.Option` component accepts the same props as a native HTML [`