CSF 3.0 Label and HelpText #3152
Conversation
|
Build successful! 🎉 |
|
Auditing the HelpText Chromatic stories. The following are stories not included and why. An example of |
| <TextField label="Password" {...props} /> | ||
| ); | ||
| } | ||
| export const ContainerWithTextAlignmentSet = { |
There was a problem hiding this comment.
This story was in storybook and since it wasn't interactive I moved it to Chromatic.
|
Build successful! 🎉 |
| export const ContainerWithTextAlignmentSet = { | ||
| render: () => ( | ||
| <Flex | ||
| direction="column" | ||
| gap="size-200" | ||
| UNSAFE_style={{ | ||
| textAlign: 'center' | ||
| }}> | ||
| <TextField label="Password" description="Enter a single digit number." /> | ||
| <TextField | ||
| label="Password 2" | ||
| errorMessage="Create a password with at least 8 characters." | ||
| validationState="invalid" /> | ||
| </Flex> | ||
| ), | ||
| name: 'container with text alignment set' | ||
| }; |
There was a problem hiding this comment.
Let's break this into two and use decorators so that we don't need a custom renderer and we can just use args (I probably have some typos in this, but this is the general idea)
| export const ContainerWithTextAlignmentSet = { | |
| render: () => ( | |
| <Flex | |
| direction="column" | |
| gap="size-200" | |
| UNSAFE_style={{ | |
| textAlign: 'center' | |
| }}> | |
| <TextField label="Password" description="Enter a single digit number." /> | |
| <TextField | |
| label="Password 2" | |
| errorMessage="Create a password with at least 8 characters." | |
| validationState="invalid" /> | |
| </Flex> | |
| ), | |
| name: 'container with text alignment set' | |
| }; | |
| export const ContainerWithTextAlignmentSetDescription = { | |
| args: { | |
| label: 'Password' | |
| description: 'Enter a single digit number' | |
| }, | |
| name: 'textAlign center description', | |
| decorator: [textAlignDecorator] | |
| }; | |
| export const ContainerWithTextAlignmentSetError = { | |
| args: { | |
| label: 'Password' | |
| errorMessage: 'Create a password with at least 8 characters.' | |
| }, | |
| name: 'textAlign center errorMessage', | |
| decorator: [textAlignDecorator] | |
| }; | |
| function textAlignDecorator(Story) { | |
| return ( | |
| <Flex | |
| direction="column" | |
| gap="size-200" | |
| UNSAFE_style={{ | |
| textAlign: 'center' | |
| }}> | |
| <Story /> | |
| </Flex> | |
| ) | |
| } |
There was a problem hiding this comment.
I assumed we wanted two TextFields next to each other.
| function TextFieldLabel(props: SpectrumLabelProps = {}) { | ||
| return ( | ||
| <div style={{whiteSpace: 'nowrap'}}> | ||
| <Label {...props} for="test"> |
| } as ComponentMeta<typeof Label>; | ||
|
|
||
| export let Default: LabelStory = { | ||
| render: (args) => <TextFieldLabel {...args} /> |
There was a problem hiding this comment.
We can do a similar setup to the helptext so we don't need a custom render, we can use a decorator for these so args is just applied directly to the Label
| errorMessage: 'Remove input.' | ||
| }, | ||
| argTypes: {validationState: {control: {disable: true}}}, | ||
| render: (props) => <TextFieldWithValidationState {...props} /> |
There was a problem hiding this comment.
same comment
the reason for this is so that stories are actually about our component and types across stories are the same
this should make it easy to track controls as well
There was a problem hiding this comment.
I tried using instead of and I couldn't add the state this story uses. 👎
| } as ComponentMeta<typeof Label>; | ||
|
|
||
| export let Default: LabelStory = { | ||
| render: (args) => <TextFieldLabel {...args} /> |
ktabors
changed the title
|
Build successful! 🎉 |
|
Build successful! 🎉 |
Part of the Storybook CSF 3.0 migration in issue 3056.
There are changes to Chromatic so we'll need to confirm the migrated stories didn't change and approve the new stories.
✅ Pull Request Checklist:
📝 Test Instructions:
Goto storybook and review the new HelpText and Label stories. Confirm that via controls you can do everything we used to be able to do. There used to be many specific stories and now there are just a couple of general stories.
🧢 Your Project:
RSP