Skip to content

Creating chromatic baseline for fixing combobox to use useFormProps #2334

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ktabors merged 9 commits into from
Sep 21, 2021
Merged

Creating chromatic baseline for fixing combobox to use useFormProps #2334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
371b416
fixing combobox to use useFormProps and adding more component to stor…
ktabors Sep 14, 2021
7dbdef0
updating package.json
ktabors Sep 14, 2021
87d4256
removed colorfield and slider from form and provider stories
ktabors Sep 15, 2021
bb12d5a
reordering chromatic form and provider components
ktabors Sep 17, 2021
695ca0b
alphabetizing form and provider stories
ktabors Sep 17, 2021
78263c9
Merge branch 'main' into field_formprops
ktabors Sep 17, 2021
5d4b2a9
removing the code changes to make this only chromatic and story updates
ktabors Sep 17, 2021
98edead
lint cleanups
ktabors Sep 17, 2021
bfc687e
Merge branch 'main' into field_formprops
dannify Sep 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 25 additions & 5 deletions packages/@react-spectrum/form/chromatic/Form.chromatic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,15 @@
*/

import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
import {ComboBox} from '@react-spectrum/combobox';
import {Form} from '../';
import {Item, Picker} from '@react-spectrum/picker';
import {Meta, Story} from '@storybook/react';
import {NumberField} from '@react-spectrum/numberfield';
import {Radio, RadioGroup} from '@react-spectrum/radio';
import React from 'react';
import {SearchField} from '@react-spectrum/searchfield';
import {SearchWithin} from '@react-spectrum/searchwithin';
import {SpectrumFormProps} from '@react-types/form';
import {TextArea, TextField} from '@react-spectrum/textfield';

Expand All @@ -34,22 +37,35 @@ let flatOptions = [

const Template = (): Story<SpectrumFormProps> => (args) => (
<Form {...args}>
<TextField label="City" placeholder="San Francisco" />
<Picker label="Animals" placeholder="Choose an animal" items={flatOptions}>
{item => <Item key={item.id}>{item.name}</Item>}
</Picker>
<NumberField label="Test" />
<CheckboxGroup defaultValue={['dragons']} label="Pets">
<Checkbox value="dogs">Dogs</Checkbox>
<Checkbox value="cats">Cats</Checkbox>
<Checkbox value="dragons">Dragons</Checkbox>
</CheckboxGroup>
<ComboBox label="More Animals">
<Item key="red panda">Red Panda</Item>
<Item key="aardvark">Aardvark</Item>
<Item key="kangaroo">Kangaroo</Item>
<Item key="snake">Snake</Item>
</ComboBox>
<NumberField label="Test" />
<Picker label="Animals" placeholder="Choose an animal" items={flatOptions}>
{item => <Item key={item.id}>{item.name}</Item>}
</Picker>
<RadioGroup defaultValue="dragons" label="Favorite pet" name="favorite-pet-group">
<Radio value="dogs">Dogs</Radio>
<Radio value="cats">Cats</Radio>
<Radio value="dragons">Dragons</Radio>
</RadioGroup>
<SearchField label="Search" />
<SearchWithin label="Search">
<SearchField placeholder="Search" />
<Picker label="State" placeholder="Select a state" items={flatOptions}>
{item => <Item key={item.id}>{item.name}</Item>}
</Picker>
</SearchWithin>
<TextArea label="Comments" placeholder="How do you feel?" />
<TextField label="City" placeholder="San Francisco" />
</Form>
);

Expand All @@ -66,6 +82,10 @@ export const LabelAlignEnd = Template().bind({});
LabelAlignEnd.storyName = 'label align: end';
LabelAlignEnd.args = {...Default.args, labelAlign: 'end'};

export const LabelAlignSideEnd = Template().bind({});
LabelAlignSideEnd.storyName = 'label position: side, label align: end';
LabelAlignSideEnd.args = {...Default.args, labelPosition: 'side', labelAlign: 'end'};

export const Required = Template().bind({});
Required.storyName = 'isRequired';
Required.args = {...Default.args, isRequired: true};
Expand Down
43 changes: 25 additions & 18 deletions packages/@react-spectrum/form/stories/Form.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {action} from '@storybook/addon-actions';
import {Button} from '@react-spectrum/button';
import {ButtonGroup} from '@react-spectrum/buttongroup';
import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
import {ComboBox} from '@react-spectrum/combobox';
import {countries, states} from './data';
import {Flex} from '@react-spectrum/layout';
import {Form} from '../';
Expand All @@ -24,6 +25,7 @@ import React, {Key, useState} from 'react';
import {SearchField} from '@react-spectrum/searchfield';
import {SearchWithin} from '@react-spectrum/searchwithin';
import {storiesOf} from '@storybook/react';
import {Switch} from '@react-spectrum/switch';
import {TextArea, TextField} from '@react-spectrum/textfield';

storiesOf('Form', module)
Expand Down Expand Up @@ -133,28 +135,24 @@ storiesOf('Form', module)
function render(props: any = {}) {
return (
<Form {...props}>
<TextField label="First Name" placeholder="John" />
<TextField label="Last Name" placeholder="Smith" />
<TextField label="Street Address" placeholder="123 Any Street" description="Please include apartment or suite number." errorMessage="Please enter a valid street address." />
<TextField label="City" placeholder="San Francisco" />
<CheckboxGroup defaultValue={['dragons']} label="Pets">
<Checkbox value="dogs">Dogs</Checkbox>
<Checkbox value="cats">Cats</Checkbox>
<Checkbox value="dragons">Dragons</Checkbox>
</CheckboxGroup>
<ComboBox label="More Animals">
<Item key="red panda">Red Panda</Item>
<Item key="aardvark">Aardvark</Item>
<Item key="kangaroo">Kangaroo</Item>
<Item key="snake">Snake</Item>
</ComboBox>
<NumberField label="Years lived there" />
<Picker label="State" placeholder="Select a state" items={states}>
{item => <Item key={item.abbr}>{item.name}</Item>}
</Picker>
<TextField label="Zip code" placeholder="12345" description="Please enter a five-digit zip code." errorMessage="Please remove letters and special characters." />
<Picker label="Country" placeholder="Select a country" items={countries}>
{item => <Item key={item.name}>{item.name}</Item>}
</Picker>
<CheckboxGroup defaultValue={['dragons']} label="Pets">
<Checkbox value="dogs">Dogs</Checkbox>
<Checkbox value="cats">Cats</Checkbox>
<Checkbox value="dragons">Dragons</Checkbox>
</CheckboxGroup>
<RadioGroup label="Favorite pet" name="favorite-pet-group">
<Radio value="dogs">Dogs</Radio>
<Radio value="cats">Cats</Radio>
<Radio value="dragons">Dragons</Radio>
</RadioGroup>
<Picker label="Favorite color" description="Select any color you like." errorMessage="Please select a nicer color.">
<Item>Red</Item>
<Item>Orange</Item>
Expand All @@ -163,13 +161,22 @@ function render(props: any = {}) {
<Item>Blue</Item>
<Item>Purple</Item>
</Picker>
<TextArea label="Comments" placeholder="How do you feel?" description="Express yourself!" errorMessage="No wrong answers, except for this one." />
<SearchWithin label="Search">
<SearchField placeholder="Search" />
<RadioGroup label="Favorite pet" name="favorite-pet-group">
<Radio value="dogs">Dogs</Radio>
<Radio value="cats">Cats</Radio>
<Radio value="dragons">Dragons</Radio>
</RadioGroup>
<SearchField label="Search" />
<SearchWithin label="Search cities">
<SearchField placeholder="City" />
<Picker label="State" placeholder="Select a state" items={states}>
{item => <Item key={item.abbr}>{item.name}</Item>}
</Picker>
</SearchWithin>
<Switch>Low power mode</Switch>
<TextArea label="Comments" placeholder="How do you feel?" description="Express yourself!" errorMessage="No wrong answers, except for this one." />
<TextField label="City" placeholder="San Francisco" />
<TextField label="Zip code" placeholder="12345" description="Please enter a five-digit zip code." errorMessage="Please remove letters and special characters." />
</Form>
);
}
Expand Down
152 changes: 117 additions & 35 deletions packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,22 @@
*/

import {Button} from '@react-spectrum/button';
import {Checkbox} from '@react-spectrum/checkbox';
import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
import {ComboBox} from '@react-spectrum/combobox';
import customTheme from './custom-theme.css';
import {Flex} from '@react-spectrum/layout';
import {Form} from '@react-spectrum/form';
import {Item, Picker} from '@react-spectrum/picker';
import {Meta, Story} from '@storybook/react';
import {NumberField} from '@react-spectrum/numberfield';
import {Provider} from '../';
import {ProviderProps} from '@react-types/provider';
import {Radio, RadioGroup} from '@react-spectrum/radio';
import React from 'react';
import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
import {storiesOf} from '@storybook/react';
import {SearchField} from '@react-spectrum/searchfield';
import {SearchWithin} from '@react-spectrum/searchwithin';
import {Switch} from '@react-spectrum/switch';
import {TextField} from '@react-spectrum/textfield';

Expand All @@ -30,37 +36,113 @@ const THEME = {
large: scaleLarge
};

storiesOf('Provider', module)
// don't need all the isEmphasized etc tests, the value being sent is tested in unit tests
// that the components look correctly with those values is being tested in those components chromatic tests

// keeping custom theme to show that the theme only changes expected things, in this case, the button, nothing else
.add(
'custom theme',
() => render({theme: THEME})
);

function render(props = {}) {
return (
<Provider {...props} UNSAFE_style={{padding: 50}}>
<Form>
<Flex> {/* Extra div via Flex so that the button does not expand to 100% width */}
<Button variant="primary">I am a button</Button>
</Flex>
<TextField
label="A text field"
placeholder="Something"
marginTop="size-100"
necessityIndicator="label"
value="dummy value" />
<Checkbox isSelected>Cats!</Checkbox>
<Switch isSelected>Dogs!</Switch>
<RadioGroup value="dogs" label="A radio group">
<Radio value="dogs">Dogs</Radio>
<Radio value="cats">Cats</Radio>
<Radio value="horses">Horses</Radio>
</RadioGroup>
</Form>
const meta: Meta<ProviderProps> = {
title: 'Provider'
};

export default meta;

const Template = (): Story<ProviderProps> => (args) => (
<Provider {...args} UNSAFE_style={{padding: 50}}>
<Form>
<Flex> {/* Extra div via Flex so that the button does not expand to 100% width */}
<Button variant="primary">I am a button</Button>
</Flex>
<Checkbox isSelected>Cats!</Checkbox>
<CheckboxGroup defaultValue={['dragons']} label="Pets">
<Checkbox value="dogs">Dogs</Checkbox>
<Checkbox value="cats">Cats</Checkbox>
<Checkbox value="dragons">Dragons</Checkbox>
</CheckboxGroup>
<ComboBox label="More Animals">
<Item key="red panda">Red Panda</Item>
<Item key="aardvark">Aardvark</Item>
<Item key="kangaroo">Kangaroo</Item>
<Item key="snake">Snake</Item>
</ComboBox>
<NumberField label="Years lived there" />
<RadioGroup value="dogs" label="A radio group">
<Radio value="dogs">Dogs</Radio>
<Radio value="cats">Cats</Radio>
<Radio value="horses">Horses</Radio>
</RadioGroup>
<SearchField label="Search" />
<SearchWithin label="Search">
<SearchField placeholder="Search" />
<Picker name="favorite-color3" label="Favorite color searchwithin">
<Item key="red">Red</Item>
<Item key="orange">Orange</Item>
<Item key="yellow">Yellow</Item>
<Item key="green">Green</Item>
<Item key="blue">Blue</Item>
<Item key="purple">Purple</Item>
</Picker>
</SearchWithin>
<Switch isSelected>Dogs!</Switch>
<TextField
label="A text field"
placeholder="Something"
marginTop="size-100"
necessityIndicator="label"
value="dummy value" />
</Form>
</Provider>
);

const NestedColorSchemeTemplate = (): Story<ProviderProps> => () => (
<Provider colorScheme="dark" UNSAFE_style={{padding: 50, textAlign: 'center', width: 500}}>
<Button variant="primary">I am a dark button</Button>
<Provider colorScheme="light" UNSAFE_style={{padding: 50, margin: 50, textAlign: 'center'}}>
<Button variant="primary">I am a light button</Button>
</Provider>
);
}
</Provider>
);

const NestedPropTemplate = (): Story<ProviderProps> => () => (
<Provider isDisabled>
<Button variant="primary">I am disabled</Button>
<Provider isQuiet>
<Button variant="primary">I am disabled and quiet</Button>
</Provider>
</Provider>
);

export const Default = Template().bind({});
Default.storyName = 'default';
Default.args = {};

// keeping custom theme to show that the theme only changes expected things, in this case, the button, nothing else
export const CustomTheme = Template().bind({});
CustomTheme.storyName = 'custom theme';
CustomTheme.args = {theme: THEME};

export const NestedColorScheme = NestedColorSchemeTemplate().bind({});
NestedColorScheme.storyName = 'nested color schemes';
NestedColorScheme.args = {};

export const NestedProp = NestedPropTemplate().bind({});
NestedProp.storyName = 'nested props';
NestedProp.args = {};

// Previous this weren't included because of unit tests and visual comparisions
// in the individual components, but we should have this to confirm that components
// are using usePRoviderProps correctly
export const Quiet = Template().bind({});
Quiet.storyName = 'isQuiet';
Quiet.args = {isQuiet: true};

export const Emphasized = Template().bind({});
Emphasized.storyName = 'isEmphasized';
Emphasized.args = {isEmphasized: true};

export const Disabled = Template().bind({});
Disabled.storyName = 'isDisabled';
Disabled.args = {isDisabled: true};

export const ReadOnly = Template().bind({});
ReadOnly.storyName = 'isReadOnly';
ReadOnly.args = {isReadOnly: true};

export const Required = Template().bind({});
Required.storyName = 'isRequired';
Required.args = {isRequired: true};
45 changes: 37 additions & 8 deletions packages/@react-spectrum/provider/stories/Provider.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,20 @@
*/

import {Button} from '@react-spectrum/button';
import {Checkbox} from '@react-spectrum/checkbox';
import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
import {ComboBox} from '@react-spectrum/combobox';
import customTheme from './custom-theme.css';
import {Flex} from '@react-spectrum/layout';
import {Form} from '@react-spectrum/form';
import {Item, Picker} from '@react-spectrum/picker';
import {NumberField} from '@react-spectrum/numberfield';
import {Provider} from '../';
import {Radio, RadioGroup} from '@react-spectrum/radio';
import React from 'react';
import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
import {SearchField} from '@react-spectrum/searchfield';
import {SearchWithin} from '@react-spectrum/searchwithin';
import {storiesOf} from '@storybook/react';
import {Switch} from '@react-spectrum/switch';
import {TextField} from '@react-spectrum/textfield';
Expand Down Expand Up @@ -168,18 +173,42 @@ function render(props = {}) {
<Flex> {/* Extra div via Flex so that the button does not expand to 100% width */}
<Button variant="primary">I am a button</Button>
</Flex>
<TextField
label="A text field"
placeholder="Something"
marginTop="size-100"
necessityIndicator="label" />
<Checkbox>Cats!</Checkbox>
<Switch>Dogs!</Switch>
<CheckboxGroup defaultValue={['dragons']} label="Pets">
<Checkbox value="dogs">Dogs</Checkbox>
<Checkbox value="cats">Cats</Checkbox>
<Checkbox value="dragons">Dragons</Checkbox>
</CheckboxGroup>
<ComboBox label="More Animals">
<Item key="red panda">Red Panda</Item>
<Item key="aardvark">Aardvark</Item>
<Item key="kangaroo">Kangaroo</Item>
<Item key="snake">Snake</Item>
</ComboBox>
<NumberField label="Years lived there" />
<RadioGroup label="A radio group">
<Radio value="dogs">Dogs</Radio>
<Radio value="cats">Cats</Radio>
<Radio value="horses">Horses</Radio>
</RadioGroup>
<SearchField label="Search" />
<SearchWithin label="Search">
<SearchField placeholder="Search" />
<Picker name="favorite-color3" label="Favorite color searchwithin">
<Item key="red">Red</Item>
<Item key="orange">Orange</Item>
<Item key="yellow">Yellow</Item>
<Item key="green">Green</Item>
<Item key="blue">Blue</Item>
<Item key="purple">Purple</Item>
</Picker>
</SearchWithin>
<Switch isSelected>Dogs!</Switch>
<TextField
label="A text field"
placeholder="Something"
marginTop="size-100"
necessityIndicator="label"
value="dummy value" />
</Form>
</Provider>
);
Expand Down
1 change: 0 additions & 1 deletion packages/@react-spectrum/searchwithin/src/SearchWithin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,4 +103,3 @@ function SearchWithin(props: SpectrumSearchWithinProps, ref: FocusableRef<HTMLEl
*/
const _SearchWithin = React.forwardRef(SearchWithin);
export {_SearchWithin as SearchWithin};