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';