feat(Label)!: remove deprecated props (#1868)

- remove `requiredLabel` from component
- remove `optionalLabel` from component

neither of these are used, and removing them adds clarity and simplicity
to the component.

Also added an additional story to the component documentation for
clarity.

Author: booc0mtaco

src/components/Label/Label.module.css

@@ -14,16 +14,6 @@
   display: inline-block;
 }
 
-/**
- * Label flag
- *
- * A flag to mark whether or not a field is required or optional. Currently a flag
- * is only present for optional fields.
- */
-.label__flag {
-  font: var(--eds-theme-typography-body-sm);
-}
-
 /**
  * Label after
  *

src/components/Label/Label.stories.ts

@@ -0,0 +1,39 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+
+import { Label } from './Label';
+import Tooltip from '../Tooltip';
+
+export default {
+  title: 'Components/Label',
+  component: Label,
+  parameters: {
+    badges: ['1.0'],
+  },
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof Label>;
+
+/**
+ * Labels can denote some text to label the content, and whether that content is marked as required.
+ */
+export const Default: StoryObj<Args> = {
+  args: {
+    text: 'Label',
+    required: true,
+  },
+};
+
+/**
+ * You can use `labelAfter` to affix additional functionality to the label, like an optional `<Tooltip>`.
+ */
+export const LabelAfter: StoryObj<Args> = {
+  args: {
+    text: 'Label',
+    labelAfter: (
+      <Tooltip text="Test">
+        <span>*</span>
+      </Tooltip>
+    ),
+  },
+};

src/components/Label/Label.stories.tsx

@@ -1,6 +1,8 @@
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
+
+import Text from '../Text';
 import styles from './Label.module.css';
 
 export interface Props {
@@ -24,26 +26,10 @@ export interface Props {
    * Slot for node to appear directly after field label. Typically used to include a Toolip
    */
   labelAfter?: ReactNode;
-  /**
-   * String for the optional label.
-   *
-   * **Default is `"(optional)"`**
-   *
-   * **Deprecated**. This will be removed in the next major version.
-   * @deprecated
-   */
-  optionalLabel?: string;
   /**
    * Indicates that field is required for form to be successfully submitted.
    */
   required?: boolean;
-  /**
-   * String for the required label to add additional information if needed.
-   *
-   * **Deprecated**. This will be removed in the next major version.
-   * @deprecated
-   */
-  requiredLabel?: string;
   /**
    * The label text string
    */
@@ -61,9 +47,7 @@ export const Label = ({
   htmlFor,
   id,
   labelAfter,
-  optionalLabel = '(optional)',
   required = true,
-  requiredLabel,
   text,
   ...other
 }: Props) => {
@@ -76,14 +60,10 @@ export const Label = ({
   return (
     <label className={componentClassName} htmlFor={htmlFor} id={id} {...other}>
       {text}{' '}
-      {!required && (
-        <span className={styles['label__flag']}>{optionalLabel}</span>
-      )}
-      {requiredLabel && (
-        <span className={styles['label__flag']}>{requiredLabel}</span>
-      )}
       {labelAfter && (
-        <span className={styles['label__after']}>{labelAfter}</span>
+        <Text as="span" preset="body-sm">
+          {labelAfter}
+        </Text>
       )}
     </label>
   );

src/components/Label/Label.tsx

@@ -8,3 +8,19 @@ exports[`<Label /> Default story renders snapshot 1`] = `
    
 </label>
 `;
+
+exports[`<Label /> LabelAfter story renders snapshot 1`] = `
+<label
+  class="label"
+>
+  Label
+   
+  <span
+    class="text text--body-sm"
+  >
+    <span>
+      *
+    </span>
+  </span>
+</label>
+`;