Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 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 <rezrah@github.com> * 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 <rezrah@github.com>
- Loading branch information
Showing
15 changed files
with
630 additions
and
37,271 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@primer/react': minor | ||
| --- | ||
|
|
||
| Adds a component for a native select input |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| --- | ||
| componentId: select | ||
| title: Select | ||
| description: Use a select input when a user needs to select one option from a long list | ||
| status: Alpha | ||
| source: https://github.com/primer/react/blob/main/src/Select.tsx | ||
| storybook: '/react/storybook?path=/story/forms-select--default' | ||
| --- | ||
|
|
||
| import {Select, Text} from '@primer/react' | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Basic | ||
|
|
||
| ```jsx live | ||
| <> | ||
| <Text fontWeight="bold" fontSize={1} as="label" display="block" htmlFor="basic"> | ||
| Preferred Primer component interface | ||
| </Text> | ||
| <Select id="basic"> | ||
| <Select.Option value="figma">Figma</Select.Option> | ||
| <Select.Option value="css">Primer CSS</Select.Option> | ||
| <Select.Option value="prc">Primer React components</Select.Option> | ||
| <Select.Option value="pvc">Primer ViewComponents</Select.Option> | ||
| </Select> | ||
| </> | ||
| ``` | ||
|
|
||
| ### With grouped options | ||
|
|
||
| ```jsx live | ||
| <> | ||
| <Text fontWeight="bold" fontSize={1} as="label" display="block" htmlFor="grouped"> | ||
| Preferred Primer component interface | ||
| </Text> | ||
| <Select id="grouped"> | ||
| <Select.OptGroup label="GUI"> | ||
| <Select.Option value="figma">Figma</Select.Option> | ||
| </Select.OptGroup> | ||
| <Select.OptGroup label="Code"> | ||
| <Select.Option value="css">Primer CSS</Select.Option> | ||
| <Select.Option value="prc">Primer React components</Select.Option> | ||
| <Select.Option value="pvc">Primer ViewComponents</Select.Option> | ||
| </Select.OptGroup> | ||
| </Select> | ||
| </> | ||
| ``` | ||
|
|
||
| ### With a placeholder | ||
|
|
||
| ```jsx live | ||
| <> | ||
| <Text fontWeight="bold" fontSize={1} as="label" display="block" htmlFor="withPlaceholder"> | ||
| Preferred Primer component interface | ||
| </Text> | ||
| <Select id="withPlaceholder" placeholder="Pick an interface"> | ||
| <Select.Option value="figma">Figma</Select.Option> | ||
| <Select.Option value="css">Primer CSS</Select.Option> | ||
| <Select.Option value="prc">Primer React components</Select.Option> | ||
| <Select.Option value="pvc">Primer ViewComponents</Select.Option> | ||
| </Select> | ||
| </> | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| ### Select | ||
|
|
||
| <PropsTable> | ||
| <PropsTableRow | ||
| name="block" | ||
| type="boolean" | ||
| defaultValue="false" | ||
| description={<>Creates a full width input element</>} | ||
| /> | ||
| <PropsTableRow | ||
| name="contrast" | ||
| type="boolean" | ||
| defaultValue="false" | ||
| description="Changes background color to a higher contrast color" | ||
| /> | ||
| <PropsTableRow | ||
| name="size" | ||
| type="'small' | 'medium' | 'large'" | ||
| description="Creates a smaller or larger input than the default." | ||
| /> | ||
| <PropsTableRow name="validationStatus" type="'warning' | 'error'" description="Style the input to match the status" /> | ||
| <PropsTablePassthroughPropsRow | ||
| elementName="select" | ||
| passthroughPropsLink={ | ||
| <Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes">MDN</Link> | ||
| } | ||
| /> | ||
|
|
||
| </PropsTable> | ||
|
|
||
| ### Select.OptGroup | ||
|
|
||
| The `Select.OptGroup` component accepts the same props as a native HTML [`<optgroup>`](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 [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option). | ||
|
|
||
| ## Status | ||
|
|
||
| <ComponentChecklist | ||
| items={{ | ||
| propsDocumented: true, | ||
| noUnnecessaryDeps: true, | ||
| adaptsToThemes: true, | ||
| adaptsToScreenSizes: true, | ||
| fullTestCoverage: true, | ||
| usedInProduction: false, | ||
| usageExamplesDocumented: true, | ||
| hasStorybookStories: true, | ||
| designReviewed: false, | ||
| a11yReviewed: false, | ||
| stableApi: false, | ||
| addressedApiFeedback: false, | ||
| hasDesignGuidelines: false, | ||
| hasFigmaComponent: false | ||
| }} | ||
| /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.