-
Notifications
You must be signed in to change notification settings - Fork 256
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(react/ui): add Fieldset Primitive (#4348)
* initial commit * clean up, add new tokens * docs snapshots * docs * docs * types and docs * row column docs stuff * add size tokens, update docs * docs snaps * reset css changes * fieldset context * Update fieldset to use context, update form inputs to use fieldset context * update detecting if disabled by fieldset * type, theme, and docs updates * docs updates, snapshots * Remove isNestedFieldset from context, update usage across controls. Update docs * Update packages/react/src/primitives/Fieldset/useFieldset.ts Co-authored-by: Caleb Pollman <cpollman@amazon.com> * Update packages/react/src/primitives/Fieldset/Fieldset.tsx Co-authored-by: Caleb Pollman <cpollman@amazon.com> * Update legend prop description, remove test file in docs * update theme and docs styling examples * Update type for fieldset size, update description * Update snapshots, tests * update tests for nested fieldsets * Create afraid-waves-switch.md * remove unused imports * Update docs/src/pages/[platform]/components/fieldset/examples/DisabledFieldset.tsx Co-authored-by: Danny Banks <djb@amazon.com> * Update docs/src/pages/[platform]/components/fieldset/react.mdx Co-authored-by: Danny Banks <djb@amazon.com> * use proper BEM syntax * udpate snapshots * update changeset * update useFieldset to return isFieldsetDisabled to avoid re-mapping * Update docs/src/pages/[platform]/components/fieldset/examples/FieldsetDirection.tsx --------- Co-authored-by: Heather Buchel <buchel@amazon.com> Co-authored-by: Caleb Pollman <cpollman@amazon.com> Co-authored-by: Danny Banks <djb@amazon.com>
- Loading branch information
4 people
committed
Aug 29, 2023
1 parent
ec495a6
commit 2769685
Showing
49 changed files
with
2,067 additions
and
21 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,13 @@ | ||
| --- | ||
| "@aws-amplify/ui-react": minor | ||
| "@aws-amplify/ui": minor | ||
| --- | ||
|
|
||
| feat(react/ui): add new Fieldset Primitive | ||
|
|
||
| Usage: | ||
| ``` | ||
| <Fieldset legend="Legend test"> | ||
| // Fieldset content/form controls | ||
| </Fieldset> | ||
| ``` |
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
Large diffs are not rendered by default.
Oops, something went wrong.
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
111 changes: 111 additions & 0 deletions
111
docs/src/pages/[platform]/components/fieldset/FieldsetPropControls.tsx
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,111 @@ | ||
| import { | ||
| FieldsetProps, | ||
| Flex, | ||
| SelectField, | ||
| SwitchField, | ||
| TextField, | ||
| } from '@aws-amplify/ui-react'; | ||
| import * as React from 'react'; | ||
|
|
||
| export interface FieldsetPropControlsProps extends FieldsetProps { | ||
| setDirection: ( | ||
| value: React.SetStateAction<FieldsetProps['direction']> | ||
| ) => void; | ||
| setIsDisabled: ( | ||
| value: React.SetStateAction<FieldsetProps['isDisabled']> | ||
| ) => void; | ||
| setLegend: (value: React.SetStateAction<FieldsetProps['legend']>) => void; | ||
| setLegendHidden: ( | ||
| value: React.SetStateAction<FieldsetProps['legendHidden']> | ||
| ) => void; | ||
| setSize: (value: React.SetStateAction<FieldsetProps['size']>) => void; | ||
| setVariation: ( | ||
| value: React.SetStateAction<FieldsetProps['variation']> | ||
| ) => void; | ||
| } | ||
|
|
||
| interface FieldsetPropControlsInterface { | ||
| (props: FieldsetPropControlsProps): JSX.Element; | ||
| } | ||
|
|
||
| export const FieldsetPropControls: FieldsetPropControlsInterface = ({ | ||
| direction, | ||
| isDisabled, | ||
| legend, | ||
| legendHidden, | ||
| size, | ||
| variation, | ||
| setDirection, | ||
| setIsDisabled, | ||
| setLegend, | ||
| setLegendHidden, | ||
| setSize, | ||
| setVariation, | ||
| }) => { | ||
| return ( | ||
| <Flex direction="column"> | ||
| <TextField | ||
| label="Legend" | ||
| value={legend as string} | ||
| onChange={(event) => | ||
| setLegend(event.target.value as FieldsetProps['legend']) | ||
| } | ||
| /> | ||
| <SelectField | ||
| name="variation" | ||
| label="Variation" | ||
| value={variation} | ||
| onChange={(event) => | ||
| setVariation(event.target.value as FieldsetProps['variation']) | ||
| } | ||
| > | ||
| <option value="outlined">outlined (default)</option> | ||
| <option value="plain">plain</option> | ||
| </SelectField> | ||
| <SelectField | ||
| label="direction" | ||
| name="direction" | ||
| value={direction as string} | ||
| onChange={(event) => | ||
| setDirection(event.target.value as FieldsetProps['direction']) | ||
| } | ||
| > | ||
| <option value="column">column</option> | ||
| <option value="column-reverse">column-reverse</option> | ||
| <option value="row">row</option> | ||
| <option value="row-reverse">row-reverse</option> | ||
| </SelectField> | ||
| <SelectField | ||
| name="size" | ||
| label="Size" | ||
| defaultValue="" | ||
| value={size} | ||
| onChange={(event) => | ||
| setSize(event.target.value as FieldsetProps['size']) | ||
| } | ||
| > | ||
| <option value="small">small</option> | ||
| <option value="">default</option> | ||
| <option value="large">large</option> | ||
| </SelectField> | ||
| <SwitchField | ||
| label="isDisabled" | ||
| isChecked={isDisabled} | ||
| labelPosition="end" | ||
| onChange={(event) => { | ||
| setIsDisabled(event.target.checked as FieldsetProps['isDisabled']); | ||
| }} | ||
| /> | ||
| <SwitchField | ||
| label="legendHidden" | ||
| isChecked={legendHidden} | ||
| labelPosition="end" | ||
| onChange={(event) => { | ||
| setLegendHidden( | ||
| event.target.checked as FieldsetProps['legendHidden'] | ||
| ); | ||
| }} | ||
| /> | ||
| </Flex> | ||
| ); | ||
| }; |
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,75 @@ | ||
| import * as React from 'react'; | ||
| import { Fieldset, CheckboxField, FieldsetProps } from '@aws-amplify/ui-react'; | ||
| import { Demo } from '@/components/Demo'; | ||
| import { FieldsetPropControls } from './FieldsetPropControls'; | ||
| import { useFieldsetProps } from './useFieldsetProps'; | ||
| import { demoState } from '@/utils/demoState'; | ||
| import { getPropString } from '../utils/getPropString'; | ||
|
|
||
| const propsToCode = (props) => { | ||
| return ( | ||
| `<Fieldset` + | ||
| getPropString(props.legend, 'legend') + | ||
| getPropString(props.variation, 'variation') + | ||
| getPropString(props.size, 'size') + | ||
| getPropString(props.isDisabled, 'isDisabled') + | ||
| getPropString(props.direction, 'direction') + | ||
| `> | ||
| <CheckboxField | ||
| label="Apple"` + | ||
| (props.size ? `\n size=${JSON.stringify(props.size)}` : '') + | ||
| ` | ||
| name="apple" | ||
| /> | ||
| <CheckboxField | ||
| label="Pear"` + | ||
| (props.size ? `\n size=${JSON.stringify(props.size)}` : '') + | ||
| ` | ||
| name="pear" | ||
| /> | ||
| </Fieldset>` | ||
| ); | ||
| }; | ||
|
|
||
| const defaultFieldsetProps: FieldsetProps = { | ||
| legend: 'Favorite fruits', | ||
| legendHidden: false, | ||
| isDisabled: false, | ||
| direction: 'column', | ||
| variation: 'outlined', | ||
| }; | ||
|
|
||
| export const FieldsetDemo = () => { | ||
| const fieldsetProps = useFieldsetProps( | ||
| (demoState.get('Fieldset') as FieldsetProps) || defaultFieldsetProps | ||
| ); | ||
|
|
||
| return ( | ||
| <Demo | ||
| code={propsToCode(fieldsetProps)} | ||
| propControls={<FieldsetPropControls {...fieldsetProps} />} | ||
| > | ||
| <Fieldset | ||
| variation={fieldsetProps.variation} | ||
| size={fieldsetProps.size} | ||
| isDisabled={fieldsetProps.isDisabled} | ||
| legend={fieldsetProps.legend} | ||
| legendHidden={fieldsetProps.legendHidden} | ||
| direction={fieldsetProps.direction} | ||
| > | ||
| <CheckboxField | ||
| label="Apple" | ||
| size={fieldsetProps.size} | ||
| name="apple" | ||
| value="yes" | ||
| /> | ||
| <CheckboxField | ||
| label="Pear" | ||
| size={fieldsetProps.size} | ||
| name="pear" | ||
| value="yes" | ||
| /> | ||
| </Fieldset> | ||
| </Demo> | ||
| ); | ||
| }; |
5 changes: 5 additions & 0 deletions
5
docs/src/pages/[platform]/components/fieldset/examples/BasicFieldset.tsx
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 @@ | ||
| import { Fieldset } from '@aws-amplify/ui-react'; | ||
|
|
||
| export const BasicFieldset = () => { | ||
| return <Fieldset legend="Basic fieldset">Fieldset content</Fieldset>; | ||
| }; |
19 changes: 19 additions & 0 deletions
19
docs/src/pages/[platform]/components/fieldset/examples/DisabledFieldset.tsx
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,19 @@ | ||
| import { Fieldset, Text, TextField } from '@aws-amplify/ui-react'; | ||
|
|
||
| export const DisabledFieldset = () => { | ||
| return ( | ||
| <Fieldset legend="Disabled Fieldset" isDisabled> | ||
| <Text fontStyle="italic" variation="tertiary"> | ||
| The input in this fieldset is disabled because of the parent fieldset. | ||
| </Text> | ||
| <TextField label="Test input" /> | ||
| <Fieldset legend="Nested fieldset"> | ||
| <Text fontStyle="italic" variation="tertiary"> | ||
| This input is also disabled because the fieldset above it is disabled, | ||
| even though its immediate parent fieldset is not disabled. | ||
| </Text> | ||
| <TextField label="Test nested input" /> | ||
| </Fieldset> | ||
| </Fieldset> | ||
| ); | ||
| }; |
Oops, something went wrong.