Repository: marigold-ui/marigold
Pull request #2054 (2022-05-06 08:02:03)

refa: Move <Label> and <HelpText> to components root
- remove legacy label component
- no docs for <HelpText> since we don't know if we want to expose it

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 2a99cbd086a656ece3c162dc7ade23aa7058d830

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/remove-legacy-label?filename=.changeset/real-paws-watch.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A---%0A%0Arefa%3A%20Move%20%26lt%3BLabel%26gt%3B%20and%20%26lt%3BHelpText%26gt%3B%20to%20components%20root%0A)



Patch:
diff --git a/.changeset/real-paws-watch.md b/.changeset/real-paws-watch.md
new file mode 100644
index 000000000..46282c965
--- /dev/null
+++ b/.changeset/real-paws-watch.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": major
+"@marigold/components": major
+---
+
+refa: Move &lt;Label&gt; and &lt;HelpText&gt; to components root
diff --git a/docs/content/components/label.mdx b/docs/content/components/label.mdx
index 3aa5f0082..715728069 100644
--- a/docs/content/components/label.mdx
+++ b/docs/content/components/label.mdx
@@ -1,16 +1,16 @@
 ---
 title: Label
+figma: https://www.figma.com/file/DFKyTGHAoDxOsUBPszLLxP/%F0%9F%8F%B5%EF%B8%8FMarigold?node-id=92%3A0
 ---
 
 import { FigmaLink } from '../../src/components/FigmaLink';
 
 # Label
 
-With the Label component you can add a HTML `<Label>` element to your form.
-The variant can be added with the variant prop. The default variant is `above`.
+The `Label` component is used to accosiate and describe a form field.
 
 <MarigoldTheme>
-  <Label htmlFor="labelId">Just a simple label</Label>
+  <Label>Some Label</Label>
 </MarigoldTheme>
 
 ```tsx onlyCode
@@ -25,76 +25,17 @@ import { Label } from '@marigold/components';
 
 ## Props
 
-| Property              | Type                           | Default |
-| :-------------------- | :----------------------------- | :------ |
-| `variant` (optional)  | `string`                       | `above` |
-| `required` (optional) | `boolean`                      | `false` |
-| `color` (optional)    | `ResponsiveStyleValue<string>` | `text`  |
-| `htmlFor`             | `string`                       |         |
+| Property              | Type                | Default   |
+| :-------------------- | :------------------ | :-------- |
+| `variant` (optional)  | `string`            |           |
+| `size` (optional)     | `string`            |           |
+| `as` (optional)       | `'label' \| 'span'` | `'label'` |
+| `required` (optional) | `boolean`           |           |
 
 ## Examples
 
 ### Label required
 
 ```tsx
-<Label htmlFor="labelId" required>
-  I am a required Label!
-</Label>
-```
-
-### Label colored
-
-```tsx
-<Label htmlFor="labelId" color="info">
-  I am a disabled Label!
-</Label>
-```
-
-### Label above
-
-```tsx
-<>
-  <Label htmlFor="labelId">Name:</Label>
-  <Input id="labelId" />
-</>
-```
-
-### Label inline
-
-```tsx
-<Inline space="xxsmall">
-  <Checkbox id="labelId" />
-  <Label variant="inline" htmlFor="labelId">
-    Agree to Marigold terms
-  </Label>
-</Inline>
-```
-
-### Section Label
-
-```tsx
-<Stack>
-  <Label htmlFor="labelId" variant="section">
-    Payment Selection
-  </Label>
-  <Divider variant="section" />
-  <Inline space="small">
-    <Radio id="one" name="Section1" value="RadioOne" label="Radio One" />
-    <Label variant="inline" htmlFor="labelId">
-      Visa
-    </Label>
-  </Inline>
-  <Inline space="small">
-    <Radio id="two" name="Section2" value="RadioTwo" label="Radio Two" />
-    <Label variant="inline" htmlFor="labelId">
-      Paypal
-    </Label>
-  </Inline>
-  <Inline space="small">
-    <Radio id="two" name="Section3" value="RadioThree" label="Radio Three" />
-    <Label variant="inline" htmlFor="labelId">
-      Sofortüberweisung
-    </Label>
-  </Inline>
-</Stack>
+<Label required>I am a required Label!</Label>
 ```
diff --git a/docs/content/components/validation-message.mdx b/docs/content/components/validation-message.mdx
deleted file mode 100644
index ebdabadbd..000000000
--- a/docs/content/components/validation-message.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: ValidationMessage
----
-
-import { FigmaLink } from '../../src/components/FigmaLink';
-
-# ValidationMessage
-
-Simple colored element to display a validation message as a reaction to an event.
-
-<MarigoldTheme>
-  <ValidationMessage>
-    <Exclamation />
-    Validation message
-  </ValidationMessage>
-</MarigoldTheme>
-
-```tsx onlyCode
-import { ValidationMessage } from '@marigold/components';
-```
-
-<FigmaLink
-  to={
-    'https://www.figma.com/file/DFKyTGHAoDxOsUBPszLLxP/%F0%9F%8F%B5%EF%B8%8FMarigold?node-id=471%3A3'
-  }
-/>
-
-## Props
-
-| Property             | Type     | Default |
-| :------------------- | :------- | :------ |
-| `variant` (optional) | `string` | `error` |
-
-## Examples
-
-```tsx expandCode
-<ValidationMessage>
-  <Exclamation />
-  Validation message
-</ValidationMessage>
-```
diff --git a/packages/components/src/Checkbox/CheckboxGroup.tsx b/packages/components/src/Checkbox/CheckboxGroup.tsx
index 89bdd1bf1..6bf28925b 100644
--- a/packages/components/src/Checkbox/CheckboxGroup.tsx
+++ b/packages/components/src/Checkbox/CheckboxGroup.tsx
@@ -13,7 +13,7 @@ import {
 } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 
-import { Label } from '../Field/Label';
+import { Label } from '../Label';
 
 // Context
 // ---------------
diff --git a/packages/components/src/Field/Label.stories.tsx b/packages/components/src/Field/Label.stories.tsx
deleted file mode 100644
index 0d8073e2f..000000000
--- a/packages/components/src/Field/Label.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { Label } from './Label';
-
-export default {
-  title: 'Components/Label',
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'Text of the label',
-      defaultValue: 'Label',
-    },
-    required: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Hint that the related control required',
-      defaultValue: false,
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Label> = ({ children, ...args }) => (
-  <Label {...args}>{children}</Label>
-);
diff --git a/packages/components/src/Field/Label.tsx b/packages/components/src/Field/Label.tsx
deleted file mode 100644
index cdeddd464..000000000
--- a/packages/components/src/Field/Label.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-// TODO: But this back into the root, when we realease all the new fields!
-import React from 'react';
-import { Required } from '@marigold/icons';
-import { Box, ThemeExtension, useComponentStyles } from '@marigold/system';
-import { ComponentProps } from '@marigold/types';
-
-// Theme Extension
-// ---------------
-export interface LabelThemeExtension extends ThemeExtension<'Label'> {}
-
-// Props
-// ---------------
-export interface LabelProps extends ComponentProps<'label'> {
-  as?: 'label' | 'span';
-  variant?: string;
-  size?: string;
-  required?: boolean;
-}
-
-// Component
-// ---------------
-export const Label = ({
-  as = 'label',
-  required,
-  children,
-  variant,
-  size,
-  ...props
-}: LabelProps) => {
-  const styles = useComponentStyles('Label', { size, variant });
-
-  return (
-    <Box
-      {...props}
-      as={as}
-      __baseCSS={{ display: 'flex', alignItems: 'center', gap: 4 }}
-      css={styles}
-    >
-      {children}
-      {/*
-       * aria-required is set on the field and will already be announced,
-       * so we don't need to add it here.
-       */}
-      {required && <Required role="presentation" size={16} fill="error" />}
-    </Box>
-  );
-};
diff --git a/packages/components/src/Field/FieldBase.stories.tsx b/packages/components/src/FieldBase/FieldBase.stories.tsx
similarity index 100%
rename from packages/components/src/Field/FieldBase.stories.tsx
rename to packages/components/src/FieldBase/FieldBase.stories.tsx
diff --git a/packages/components/src/Field/FieldBase.test.tsx b/packages/components/src/FieldBase/FieldBase.test.tsx
similarity index 100%
rename from packages/components/src/Field/FieldBase.test.tsx
rename to packages/components/src/FieldBase/FieldBase.test.tsx
diff --git a/packages/components/src/Field/FieldBase.tsx b/packages/components/src/FieldBase/FieldBase.tsx
similarity index 95%
rename from packages/components/src/Field/FieldBase.tsx
rename to packages/components/src/FieldBase/FieldBase.tsx
index 50c68275b..095f70307 100644
--- a/packages/components/src/Field/FieldBase.tsx
+++ b/packages/components/src/FieldBase/FieldBase.tsx
@@ -1,8 +1,8 @@
 import React, { HTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
 import { Box, StateAttrProps } from '@marigold/system';
 
-import { Label, LabelProps } from './Label';
-import { HelpText } from './HelpText';
+import { Label, LabelProps } from '../Label';
+import { HelpText } from '../HelpText';
 
 // Props
 // ---------------
diff --git a/packages/components/src/Field/index.ts b/packages/components/src/FieldBase/index.ts
similarity index 100%
rename from packages/components/src/Field/index.ts
rename to packages/components/src/FieldBase/index.ts
diff --git a/packages/components/src/Field/HelpText.stories.tsx b/packages/components/src/HelpText/HelpText.stories.tsx
similarity index 95%
rename from packages/components/src/Field/HelpText.stories.tsx
rename to packages/components/src/HelpText/HelpText.stories.tsx
index 0fc92f258..d09208e10 100644
--- a/packages/components/src/Field/HelpText.stories.tsx
+++ b/packages/components/src/HelpText/HelpText.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
-import { HelpText } from './HelpText';
+import { HelpText } from '../HelpText';
 
 export default {
   title: 'Components/HelpText',
diff --git a/packages/components/src/Field/HelpText.test.tsx b/packages/components/src/HelpText/HelpText.test.tsx
similarity index 100%
rename from packages/components/src/Field/HelpText.test.tsx
rename to packages/components/src/HelpText/HelpText.test.tsx
diff --git a/packages/components/src/Field/HelpText.tsx b/packages/components/src/HelpText/HelpText.tsx
similarity index 100%
rename from packages/components/src/Field/HelpText.tsx
rename to packages/components/src/HelpText/HelpText.tsx
diff --git a/packages/components/src/HelpText/index.ts b/packages/components/src/HelpText/index.ts
new file mode 100644
index 000000000..45df2b379
--- /dev/null
+++ b/packages/components/src/HelpText/index.ts
@@ -0,0 +1,1 @@
+export * from './HelpText';
diff --git a/packages/components/src/Label/Label.stories.tsx b/packages/components/src/Label/Label.stories.tsx
index 0fa12e278..0d8073e2f 100644
--- a/packages/components/src/Label/Label.stories.tsx
+++ b/packages/components/src/Label/Label.stories.tsx
@@ -5,37 +5,23 @@ import { Label } from './Label';
 export default {
   title: 'Components/Label',
   argTypes: {
-    variant: {
+    children: {
       control: {
         type: 'text',
       },
-      description: '?',
-      table: {
-        defaultValue: {
-          summary: 'above',
-        },
-      },
-    },
-    htmlFor: {
-      control: {
-        type: 'text',
-      },
-      defaultValue: 'input',
+      description: 'Text of the label',
+      defaultValue: 'Label',
     },
     required: {
       control: {
         type: 'boolean',
       },
-      description: 'Adds required Icon to label',
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
+      description: 'Hint that the related control required',
+      defaultValue: false,
     },
   },
 } as Meta;
 
-export const Basic: ComponentStory<typeof Label> = args => (
-  <Label {...args}>Label</Label>
+export const Basic: ComponentStory<typeof Label> = ({ children, ...args }) => (
+  <Label {...args}>{children}</Label>
 );
diff --git a/packages/components/src/Label/Label.tsx b/packages/components/src/Label/Label.tsx
index 1bbaa3fcc..cdeddd464 100644
--- a/packages/components/src/Label/Label.tsx
+++ b/packages/components/src/Label/Label.tsx
@@ -1,64 +1,47 @@
+// TODO: But this back into the root, when we realease all the new fields!
 import React from 'react';
-
-import { ComponentProps } from '@marigold/types';
 import { Required } from '@marigold/icons';
-import { ResponsiveStyleValue } from '@marigold/system';
-
-import { Box } from '../Box';
+import { Box, ThemeExtension, useComponentStyles } from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
 
 // Theme Extension
 // ---------------
-export interface LabelThemeExtension<Value> {
-  label?: {
-    [key: string]: Value;
-  };
-}
+export interface LabelThemeExtension extends ThemeExtension<'Label'> {}
 
-// LabelBase
+// Props
 // ---------------
-export type LabelBaseProps = {
-  htmlFor?: string;
+export interface LabelProps extends ComponentProps<'label'> {
+  as?: 'label' | 'span';
   variant?: string;
+  size?: string;
   required?: boolean;
-  color?: ResponsiveStyleValue<string>;
-} & ComponentProps<'label'>;
+}
 
-export const LabelBase: React.FC<LabelProps> = ({
-  variant = 'above',
+// Component
+// ---------------
+export const Label = ({
+  as = 'label',
   required,
-  color = 'text',
   children,
+  variant,
+  size,
   ...props
-}) => {
+}: LabelProps) => {
+  const styles = useComponentStyles('Label', { size, variant });
+
   return (
     <Box
       {...props}
-      as="label"
-      __baseCSS={{ color: color }}
-      variant={`label.${variant}`}
+      as={as}
+      __baseCSS={{ display: 'flex', alignItems: 'center', gap: 4 }}
+      css={styles}
     >
       {children}
+      {/*
+       * aria-required is set on the field and will already be announced,
+       * so we don't need to add it here.
+       */}
+      {required && <Required role="presentation" size={16} fill="error" />}
     </Box>
   );
 };
-
-// Label
-// ---------------
-export interface LabelProps extends LabelBaseProps {
-  required?: boolean;
-}
-
-export const Label: React.FC<LabelProps> = ({
-  required,
-  children,
-  ...props
-}) => {
-  return required ? (
-    <Box as="span" display="inline-flex" alignItems="center">
-      <LabelBase {...props}>{children}</LabelBase>
-      {required && <Required size={16} fill="error" />}
-    </Box>
-  ) : (
-    <LabelBase {...props}>{children}</LabelBase>
-  );
-};
diff --git a/packages/components/src/Radio/RadioGroup.tsx b/packages/components/src/Radio/RadioGroup.tsx
index e7dbe5924..da8e7383a 100644
--- a/packages/components/src/Radio/RadioGroup.tsx
+++ b/packages/components/src/Radio/RadioGroup.tsx
@@ -9,7 +9,7 @@ import {
   useComponentStyles,
 } from '@marigold/system';
 
-import { Label } from '../Field/Label';
+import { Label } from '../Label';
 
 // Context
 // ---------------
diff --git a/packages/components/src/Select/Select.tsx b/packages/components/src/Select/Select.tsx
index 322cb1f41..c1272575e 100644
--- a/packages/components/src/Select/Select.tsx
+++ b/packages/components/src/Select/Select.tsx
@@ -18,7 +18,7 @@ import {
 } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 
-import { FieldBase } from '../Field';
+import { FieldBase } from '../FieldBase';
 import { ListBox } from '../ListBox';
 import { Popover } from '../Overlay';
 import { messages } from './intl';
diff --git a/packages/components/src/TextArea/TextArea.tsx b/packages/components/src/TextArea/TextArea.tsx
index 004769ac8..99f770e91 100644
--- a/packages/components/src/TextArea/TextArea.tsx
+++ b/packages/components/src/TextArea/TextArea.tsx
@@ -10,7 +10,7 @@ import {
 } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 
-import { FieldBase, FieldBaseProps } from '../Field';
+import { FieldBase, FieldBaseProps } from '../FieldBase';
 import { useHover } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
 
diff --git a/packages/components/src/TextField/TextField.tsx b/packages/components/src/TextField/TextField.tsx
index 17b946801..79b22a6e7 100644
--- a/packages/components/src/TextField/TextField.tsx
+++ b/packages/components/src/TextField/TextField.tsx
@@ -7,7 +7,7 @@ import { AriaTextFieldProps } from '@react-types/textfield';
 import { useStateProps } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 
-import { FieldBase, FieldBaseProps } from '../Field';
+import { FieldBase, FieldBaseProps } from '../FieldBase';
 import { Input } from '../Input';
 
 // Props
diff --git a/packages/components/src/theme.ts b/packages/components/src/theme.ts
index 2574bfb9f..f80f5571c 100644
--- a/packages/components/src/theme.ts
+++ b/packages/components/src/theme.ts
@@ -18,10 +18,10 @@ import type { DividerThemeExtension } from './Divider';
 import type { FooterThemeExtension } from './Footer';
 import type { HeaderThemeExtension } from './Header';
 import type { HeadlineThemeExtension } from './Headline';
-import type { HelpTextThemeExtension } from './Field/HelpText';
+import type { HelpTextThemeExtension } from './HelpText';
 import type { ImageThemeExtension } from './Image';
 import type { InputThemeExtension } from './Input';
-import type { LabelThemeExtension } from './Field/Label';
+import type { LabelThemeExtension } from './Label';
 import type { LinkThemeExtension } from './Link';
 import type { ListBoxThemeExtension } from './ListBox';
 import type { MenuThemeExtension } from './Menu';
@@ -35,7 +35,6 @@ import type { TextThemeExtension } from './Text';
 import type { TextAreaThemeExtension } from './TextArea';
 
 // Old Styling Solution
-import { type LabelThemeExtension as LegacyLabelThemeExtension } from './Label';
 import { type TooltipThemeExtension } from './Tooltip';
 
 interface ComponentStyles
@@ -69,7 +68,6 @@ interface ComponentStyles
 export interface Theme
   extends Scales,
     RootThemeExtension<CSSObject>,
-    LegacyLabelThemeExtension<CSSObject>,
     TooltipThemeExtension<CSSObject> {
   components: ComponentStyles;
 }


Test patch:
diff --git a/packages/components/src/Field/Label.test.tsx b/packages/components/src/Field/Label.test.tsx
deleted file mode 100644
index 8ce8bab4d..000000000
--- a/packages/components/src/Field/Label.test.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from 'react';
-import { render, screen, within } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Label } from './Label';
-
-const theme = {
-  fonts: {
-    body: 'Inter Regular',
-    label: 'Oswald',
-  },
-  colors: {
-    text: 'black',
-  },
-  components: {
-    Label: {
-      base: {
-        fontFamily: 'body',
-        color: 'text',
-      },
-    },
-  },
-};
-
-test('uses base styles from theme', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Label>label</Label>
-    </ThemeProvider>
-  );
-  const label = screen.getByText(/label/);
-
-  expect(label).toHaveStyle(`font-family: Inter Regular`);
-  expect(label).toHaveStyle(`color: black`);
-});
-
-test('supports htmlFor prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Label htmlFor="labelId">label</Label>
-    </ThemeProvider>
-  );
-  const label = screen.getByText(/label/);
-
-  expect(label).toHaveAttribute('for');
-});
-
-test('supports required prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Label data-testid="label" required>
-        label
-      </Label>
-    </ThemeProvider>
-  );
-  const label = screen.getByTestId(/label/);
-  const requiredIcon = within(label).getByRole('presentation');
-  expect(requiredIcon).toBeInTheDocument();
-});
-
-test('renders <label> element by default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Label>label</Label>
-    </ThemeProvider>
-  );
-  const label = screen.getByText(/label/);
-  expect(label instanceof HTMLLabelElement).toBeTruthy();
-});
-
-test('can render as <span>', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Label as="span">label</Label>
-    </ThemeProvider>
-  );
-  const label = screen.getByText(/label/);
-  expect(label instanceof HTMLSpanElement).toBeTruthy();
-});
diff --git a/packages/components/src/Label/Label.test.tsx b/packages/components/src/Label/Label.test.tsx
index b2af676fb..8ce8bab4d 100644
--- a/packages/components/src/Label/Label.test.tsx
+++ b/packages/components/src/Label/Label.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
 import { Label } from './Label';
 
@@ -8,24 +8,23 @@ const theme = {
     body: 'Inter Regular',
     label: 'Oswald',
   },
-  label: {
-    above: {
-      fontFamily: 'body',
-    },
-    myLabel: {
-      fontFamily: 'label',
-    },
-  },
   colors: {
     text: 'black',
-    disabled: 'gray',
+  },
+  components: {
+    Label: {
+      base: {
+        fontFamily: 'body',
+        color: 'text',
+      },
+    },
   },
 };
 
-test('supports default variant and styles', () => {
+test('uses base styles from theme', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Label htmlFor="labelId">label</Label>
+      <Label>label</Label>
     </ThemeProvider>
   );
   const label = screen.getByText(/label/);
@@ -34,19 +33,6 @@ test('supports default variant and styles', () => {
   expect(label).toHaveStyle(`color: black`);
 });
 
-test('supports other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Label htmlFor="labelId" variant="myLabel">
-        label
-      </Label>
-    </ThemeProvider>
-  );
-  const label = screen.getByText(/label/);
-
-  expect(label).toHaveStyle(`font-family: Oswald`);
-});
-
 test('supports htmlFor prop', () => {
   render(
     <ThemeProvider theme={theme}>
@@ -61,50 +47,32 @@ test('supports htmlFor prop', () => {
 test('supports required prop', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Label htmlFor="labelId" required>
+      <Label data-testid="label" required>
         label
       </Label>
     </ThemeProvider>
   );
-  const label = screen.getByText(/label/);
-  // eslint-disable-next-line testing-library/no-node-access
-  const parent = label.parentElement;
-
-  expect(parent instanceof HTMLSpanElement).toBeTruthy();
-});
-
-test('supports color prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Label htmlFor="labelId" color="disabled">
-        label
-      </Label>
-    </ThemeProvider>
-  );
-  const label = screen.getByText(/label/);
-  expect(label).toHaveStyle(`color: gray`);
+  const label = screen.getByTestId(/label/);
+  const requiredIcon = within(label).getByRole('presentation');
+  expect(requiredIcon).toBeInTheDocument();
 });
 
-test('renders <label> element', () => {
+test('renders <label> element by default', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Label htmlFor="labelId">label</Label>
+      <Label>label</Label>
     </ThemeProvider>
   );
   const label = screen.getByText(/label/);
-
   expect(label instanceof HTMLLabelElement).toBeTruthy();
 });
 
-test('accepts custom styles prop className', () => {
+test('can render as <span>', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Label htmlFor="labelId" className="custom-class-name" title="label">
-        label
-      </Label>
+      <Label as="span">label</Label>
     </ThemeProvider>
   );
-  const label = screen.getByTitle(/label/);
-
-  expect(label.className).toMatch('custom-class-name');
+  const label = screen.getByText(/label/);
+  expect(label instanceof HTMLSpanElement).toBeTruthy();
 });