From 73d51b93974ee9f7743a52c84866c294b95be286 Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Wed, 28 Feb 2024 17:42:32 -0600
Subject: [PATCH] feat(Label)!: remove deprecated props

- 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.
---
 src/components/Label/Label.module.css         | 10 -----
 src/components/Label/Label.stories.ts         | 21 ----------
 src/components/Label/Label.stories.tsx        | 39 +++++++++++++++++++
 src/components/Label/Label.tsx                | 30 +++-----------
 .../Label/__snapshots__/Label.test.ts.snap    | 16 ++++++++
 5 files changed, 60 insertions(+), 56 deletions(-)
 delete mode 100644 src/components/Label/Label.stories.ts
 create mode 100644 src/components/Label/Label.stories.tsx

diff --git a/src/components/Label/Label.module.css b/src/components/Label/Label.module.css
index 3ecfc7798..e42824b44 100644
--- a/src/components/Label/Label.module.css
+++ b/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
  *
diff --git a/src/components/Label/Label.stories.ts b/src/components/Label/Label.stories.ts
deleted file mode 100644
index f83f1d533..000000000
--- a/src/components/Label/Label.stories.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import type React from 'react';
-
-import { Label } from './Label';
-
-export default {
-  title: 'Components/Label',
-  component: Label,
-  parameters: {
-    badges: ['1.0'],
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof Label>;
-
-export const Default: StoryObj<Args> = {
-  args: {
-    text: 'Label',
-    required: true,
-  },
-};
diff --git a/src/components/Label/Label.stories.tsx b/src/components/Label/Label.stories.tsx
new file mode 100644
index 000000000..864c6d6b6
--- /dev/null
+++ b/src/components/Label/Label.stories.tsx
@@ -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>
+    ),
+  },
+};
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 8e1d842c3..80b93b0f4 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.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>
   );
diff --git a/src/components/Label/__snapshots__/Label.test.ts.snap b/src/components/Label/__snapshots__/Label.test.ts.snap
index 92a3428c6..6ac6118ce 100644
--- a/src/components/Label/__snapshots__/Label.test.ts.snap
+++ b/src/components/Label/__snapshots__/Label.test.ts.snap
@@ -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>
+`;