CSF 3.0 Label and HelpText

packages/@react-spectrum/label/chromatic/HelpText.chromatic.tsx

@@ -9,68 +9,133 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
+import {Flex} from '@react-spectrum/layout';
 import React from 'react';
-import {SpectrumTextFieldProps} from '@react-types/textfield';
-import {storiesOf} from '@storybook/react';
 import {TextField} from '@react-spectrum/textfield';
 
-storiesOf('HelpText', module)
-  .addParameters({providerSwitcher: {status: 'positive'}})
-  .add(
-    'description',
-    () => render({description: 'Password must be at least 8 characters.'})
-  )
-  .add(
-    'error message',
-    () => render({errorMessage: 'Create a password with at least 8 characters.', validationState: 'invalid'})
-  )
-  .add(
-    'disabled',
-    () => render({description: 'Password must be at least 8 characters.', isDisabled: true})
-  )
-  .add(
-    'labelAlign: end',
-    () => render({
-      description: 'Password must be at least 8 characters.',
-      labelAlign: 'end'
-    })
-  )
-  .add(
-    'labelPosition: side',
-    () => render({
-      description: 'Password must be at least 8 characters.',
-      labelPosition: 'side'
-    })
-  )
-  .add(
-    'no visible label',
-    () => render({
-      label: null,
-      'aria-label': 'Password',
-      description: 'Password must be at least 8 characters.'
-    })
-  )
-  .add(
-    'custom width',
-    () => render({
-      label: 'Password',
-      description: 'Password must be at least 8 characters.',
-      width: '100px'
-    })
-  )
-  .add(
-    'custom width, labelPosition: side',
-    () => render({
-      label: 'Password',
-      description: 'Password must be at least 8 characters.',
-      width: '440px',
-      labelPosition: 'side'
-    })
-  );
+type HelpTextStory = ComponentStoryObj<typeof TextField>;
+
+export default {
+  title: 'HelpText',
+  component: TextField,
+  args: {
+    label: 'Password',
+    description: 'Password must be at least 8 characters.'
+  }
+} as ComponentMeta<typeof TextField>;
+
+export let Default: HelpTextStory = {
+  name: 'description'
+};
+
+export const ErrorMessage = {
+  ...Default,
+  args: {
+    errorMessage: 'Create a password with at least 8 characters.',
+    validationState: 'invalid'
+  },
+  name: 'error message'
+};
+
+export const Disabled = {
+  ...Default,
+  args: {
+    isDisabled: true
+  },
+  name: 'disabled'
+};
+
+export const LabelAlignEnd = {
+  ...Default,
+  args: {
+    labelAlign: 'end'
+  },
+  name: 'labelAlign: end'
+};
+
+export const LabelPositionSide = {
+  ...Default,
+  args: {
+    labelPosition: 'side'
+  },
+  name: 'labelPosition: side'
+};
+
+export const NoVisibleLabel = {
+  ...Default,
+  args: {
+    label: null,
+    'aria-label': 'Password'
+  },
+  name: 'no visible label'
+};
+
+export const CustomWidth = {
+  ...Default,
+  args: {
+    width: '100px'
+  },
+  name: 'custom width'
+};
+
+export const CustomWidthLabelPositionSide = {
+  ...Default,
+  args: {
+    width: '440px',
+    labelPosition: 'side'
+  },
+  name: 'custom width, labelPosition: side'
+};
+
+export const ContainerWithTextAlignmentSetDescription = {
+  args: {
+    label: 'Password',
+    description: 'Enter a single digit number'
+  },
+  name: 'textAlign center description',
+  decorators: [TextAlignDecorator]
+};
+
+export const ContainerWithTextAlignmentSetError = {
+  args: {
+    label: 'Password',
+    errorMessage: 'Create a password with at least 8 characters.',
+    validationState: 'invalid'
+  },
+  name: 'textAlign center errorMessage',
+  decorators: [TextAlignDecorator]
+};
+
+export const ContainerWithTextAlignmentSetDescriptionAndSetError = {
+  args: {
+    label: 'Password',
+    errorMessage: 'Create a password with at least 8 characters.',
+    validationState: 'invalid'
+  },
+  name: 'textAlign center errorMessage',
+  decorators: [(Story) => (
+    <Flex
+      direction="column"
+      gap="size-200"
+      UNSAFE_style={{
+        textAlign: 'center'
+      }}>
+      <TextField label="Username" description="Please use your email" />
+      <Story />
+    </Flex>
+  )]
+};
 
-function render(props: SpectrumTextFieldProps = {}) {
+function TextAlignDecorator(Story) {
   return (
-    <TextField label="Password" {...props} />
+    <Flex
+      direction="column"
+      gap="size-200"
+      UNSAFE_style={{
+        textAlign: 'center'
+      }}>
+      <Story />
+    </Flex>
   );
 }

packages/@react-spectrum/label/chromatic/Label.chromatic.tsx

@@ -0,0 +1,75 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
+import {Label} from '../';
+import React from 'react';
+import {TextField} from '@react-spectrum/textfield';
+
+type LabelStory = ComponentStoryObj<typeof Label>;
+
+export default {
+  title: 'Label',
+  component: Label,
+  args: {
+    width: '100%',
+    htmlFor: 'test',
+    children: 'Test'
+  },
+  decorators: [(Story, Context) => (
+    <div style={{whiteSpace: 'nowrap'}}>
+      <Story htmlFor="test" />
+      <TextField id="test" isRequired={Context.args.isRequired} />
+    </div>
+  )]
+} as ComponentMeta<typeof Label>;
+
+export let Default: LabelStory = {};
+
+export let LabelAlignStart: LabelStory = {
+  args: {labelAlign: 'start'},
+  name: 'labelAlign: start'
+};
+
+export let LabelAlignEnd: LabelStory = {
+  args: {labelAlign: 'end'},
+  name: 'labelAlign: end'
+};
+
+export let LabelPositionSideLabelAlignStart: LabelStory = {
+  args: {...LabelAlignStart.args, width: 80, labelPosition: 'side'},
+  name: 'labelPosition: side, labelAlign: start'
+};
+
+export let LabelPositionSideLabelAlignEnd: LabelStory = {
+  args: {...LabelPositionSideLabelAlignStart.args, labelAlign: 'end'},
+  name: 'labelPosition: side, labelAlign: end'
+};
+
+export let IsRequired: LabelStory = {
+  args: {isRequired: true},
+  name: 'isRequired'
+};
+
+export let IsRequiredNecessityIndicatorIcon: LabelStory = {
+  args: {...IsRequired.args, necessityIndicator: 'icon'},
+  name: 'isRequired: true, necessityIndicator: icon'
+};
+
+export let NecessityIndicatorLabel: LabelStory = {
+  args: {...Default.args, necessityIndicator: 'label'},
+  name: 'necessityIndicator: label'
+};
+
+export let IsRequiredNecessityIndicatorLabel: LabelStory = {
+  args: {...IsRequired.args, necessityIndicator: 'label'},
+  name: 'isRequired: true, necessityIndicator: label'
+};