feat(FieldLabel)!: introduce 2.0 component (#1953)

- This will replace InputLabel, simply renaming it
- InputLabelV2 is removed and InputLabel will be removed
- update snapshots and tests

src/components/InputLabel/InputLabel-v2.module.css → src/components/FieldLabel/FieldLabel.module.css

@@ -1,25 +1,25 @@
 @import '../../design-tokens/mixins.css';
 
 /*------------------------------------*\
-    # INPUT LABEL
+    # FIELD LABEL
 \*------------------------------------*/
 
 /**
- * Text labeling the input component.
+ * Text labeling the field component.
  */
 .label {
   color: var(--eds-theme-color-text-utility-default-primary);
 }
 
 /**
- * Disabled variant of the input label.
+ * Disabled variant of the field label.
  */
 .label--disabled {
   color: var(--eds-theme-color-text-utility-disabled-primary);
 }
 
 /**
- * Input label size variants.
+ * Field label size variants.
  */
 .label--md {
   font: var(--eds-theme-typography-body-sm);

src/components/InputLabel/InputLabel-v2.stories.ts → src/components/FieldLabel/FieldLabel.stories.ts

@@ -1,20 +1,20 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import type { ComponentProps } from 'react';
 
-import { InputLabel } from './InputLabel-v2';
+import { FieldLabel } from './FieldLabel';
 
 export default {
-  title: 'Components/V2/InputLabel',
-  component: InputLabel,
+  title: 'Components/V2/FieldLabel',
+  component: FieldLabel,
   args: {
     children: 'Label',
   },
   parameters: {
-    badges: ['intro-1.0'],
+    badges: ['intro-2.0', 'current-2.0'],
   },
 } as Meta<Args>;
 
-type Args = ComponentProps<typeof InputLabel>;
+type Args = ComponentProps<typeof FieldLabel>;
 
 export const Default: StoryObj<Args> = {};
 

src/components/InputLabel/InputLabel-v2.tsx → src/components/FieldLabel/FieldLabel.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import React, { type ReactNode } from 'react';
 import type { Size } from '../../util/variant-types';
-import styles from './InputLabel-v2.module.css';
+import styles from './FieldLabel.module.css';
 
-export type InputLabelProps = {
+export type FieldLabelProps = {
   // Component API
   /**
    * Text to render in label.
@@ -31,11 +31,11 @@ export type InputLabelProps = {
 };
 
 /**
- * `import {InputLabel} from "@chanzuckerberg/eds";`
+ * `import {FieldLabel} from "@chanzuckerberg/eds";`
  *
- * Label associated with an input element such as a radio or checkbox.
+ * Label associated with an input element or field.
  */
-export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(
+export const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
   ({ children, className, htmlFor, size = 'lg', disabled }, ref) => {
     const componentClassName = clsx(
       styles['label'],
@@ -52,4 +52,4 @@ export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(
   },
 );
 
-InputLabel.displayName = 'InputLabel';
+FieldLabel.displayName = 'FieldLabel';

src/components/FieldLabel/index.ts

@@ -0,0 +1 @@
+export { FieldLabel as default } from './FieldLabel';

src/components/InputField/InputField-v2.tsx

@@ -7,10 +7,10 @@ import type {
   EitherInclusive,
   ForwardedRefComponent,
 } from '../../util/utility-types';
+import FieldLabel from '../FieldLabel';
 import { FieldNoteV2 as FieldNote } from '../FieldNote';
 import { IconV2 as Icon, type IconNameV2 as IconName } from '../Icon';
 import { InputV2 as Input } from '../Input';
-import { InputLabelV2 as InputLabel } from '../InputLabel';
 import Text from '../Text';
 import styles from './InputField-v2.module.css';
 
@@ -149,7 +149,7 @@ type InputFieldType = ForwardedRefComponent<
   InputFieldProps
 > & {
   Input?: typeof Input;
-  Label?: typeof InputLabel;
+  Label?: typeof FieldLabel;
 };
 
 /**
@@ -245,9 +245,9 @@ export const InputField: InputFieldType = forwardRef(
         {shouldRenderOverline && (
           <div className={overlineClassName}>
             {label && (
-              <InputLabel className={labelClassName} htmlFor={idVar}>
+              <FieldLabel className={labelClassName} htmlFor={idVar}>
                 {label}
-              </InputLabel>
+              </FieldLabel>
             )}
             {required && showHint && (
               <Text
@@ -342,4 +342,4 @@ export const InputField: InputFieldType = forwardRef(
 
 InputField.displayName = 'InputField';
 InputField.Input = Input;
-InputField.Label = InputLabel;
+InputField.Label = FieldLabel;

src/components/InputLabel/index.ts

@@ -1,2 +1 @@
 export { InputLabel as default } from './InputLabel';
-export { InputLabel as InputLabelV2 } from './InputLabel-v2';

src/components/Select/Select-v2.tsx

@@ -12,9 +12,9 @@ import { usePopper } from 'react-popper';
 
 import { useId } from '../../util/useId';
 import type { ExtractProps } from '../../util/utility-types';
+import FieldLabel from '../FieldLabel';
 import { FieldNoteV2 as FieldNote } from '../FieldNote';
 import { IconV2 as Icon, type IconNameV2 as IconName } from '../Icon';
-import { InputLabelV2 as InputLabel } from '../InputLabel';
 import {
   defaultPopoverModifiers,
   PopoverContainerV2 as PopoverContainer,
@@ -350,7 +350,7 @@ const SelectLabel = ({
   return (
     <div className={overlineClassName}>
       <Listbox.Label
-        as={InputLabel}
+        as={FieldLabel}
         className={componentClassName}
         htmlFor={htmlFor}
       >

src/components/TextareaField/TextareaField-v2.tsx

@@ -8,8 +8,8 @@ import type {
   ForwardedRefComponent,
 } from '../../util/utility-types';
 
+import FieldLabel from '../FieldLabel';
 import { FieldNoteV2 as FieldNote } from '../FieldNote';
-import { InputLabelV2 as InputLabel } from '../InputLabel';
 import Text from '../Text';
 
 import styles from './TextareaField-v2.module.css';
@@ -78,7 +78,7 @@ type TextareaFieldType = ForwardedRefComponent<
   TextareaFieldProps
 > & {
   TextArea?: typeof TextArea;
-  Label?: typeof InputLabel;
+  Label?: typeof FieldLabel;
 };
 
 type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
@@ -229,9 +229,9 @@ export const TextareaField: TextareaFieldType = forwardRef(
         {shouldRenderOverline && (
           <div className={overlineClassName}>
             {label && (
-              <InputLabel className={labelClassName} htmlFor={idVar}>
+              <FieldLabel className={labelClassName} htmlFor={idVar}>
                 {label}
-              </InputLabel>
+              </FieldLabel>
             )}
             {required && showHint && (
               <Text
@@ -304,4 +304,4 @@ TextareaField.displayName = 'TextareaField';
 TextArea.displayName = 'TextareaField.Textarea';
 
 TextareaField.TextArea = TextArea;
-TextareaField.Label = InputLabel;
+TextareaField.Label = FieldLabel;

src/index.ts

@@ -57,6 +57,7 @@ export { ButtonV2 } from './components/Button';
 export { ButtonGroupV2 } from './components/ButtonGroup';
 export { CardV2 } from './components/Card';
 export { CheckboxV2 } from './components/Checkbox';
+export { default as FieldLabelV2 } from './components/FieldLabel';
 export { FieldNoteV2 } from './components/FieldNote';
 export { IconV2 } from './components/Icon';
 export { InlineNotificationV2 } from './components/InlineNotification';