diff --git a/src/components/InputLabel/InputLabel-v2.module.css b/src/components/FieldLabel/FieldLabel.module.css similarity index 77% rename from src/components/InputLabel/InputLabel-v2.module.css rename to src/components/FieldLabel/FieldLabel.module.css index a11e5906c..15ae78032 100644 --- a/src/components/InputLabel/InputLabel-v2.module.css +++ b/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); diff --git a/src/components/InputLabel/InputLabel-v2.stories.ts b/src/components/FieldLabel/FieldLabel.stories.ts similarity index 82% rename from src/components/InputLabel/InputLabel-v2.stories.ts rename to src/components/FieldLabel/FieldLabel.stories.ts index ca9ee0807..b4fbc3aab 100644 --- a/src/components/InputLabel/InputLabel-v2.stories.ts +++ b/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; -type Args = ComponentProps; +type Args = ComponentProps; export const Default: StoryObj = {}; diff --git a/src/components/InputLabel/InputLabel-v2.tsx b/src/components/FieldLabel/FieldLabel.tsx similarity index 75% rename from src/components/InputLabel/InputLabel-v2.tsx rename to src/components/FieldLabel/FieldLabel.tsx index b168abf61..c18c83d07 100644 --- a/src/components/InputLabel/InputLabel-v2.tsx +++ b/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( +export const FieldLabel = React.forwardRef( ({ children, className, htmlFor, size = 'lg', disabled }, ref) => { const componentClassName = clsx( styles['label'], @@ -52,4 +52,4 @@ export const InputLabel = React.forwardRef( }, ); -InputLabel.displayName = 'InputLabel'; +FieldLabel.displayName = 'FieldLabel'; diff --git a/src/components/FieldLabel/index.ts b/src/components/FieldLabel/index.ts new file mode 100644 index 000000000..0f6425cbe --- /dev/null +++ b/src/components/FieldLabel/index.ts @@ -0,0 +1 @@ +export { FieldLabel as default } from './FieldLabel'; diff --git a/src/components/InputField/InputField-v2.tsx b/src/components/InputField/InputField-v2.tsx index 981d64564..06b160f2a 100644 --- a/src/components/InputField/InputField-v2.tsx +++ b/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 && (
{label && ( - + {label} - + )} {required && showHint && ( diff --git a/src/components/TextareaField/TextareaField-v2.tsx b/src/components/TextareaField/TextareaField-v2.tsx index 24dafd662..d84d2dd65 100644 --- a/src/components/TextareaField/TextareaField-v2.tsx +++ b/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 & { @@ -229,9 +229,9 @@ export const TextareaField: TextareaFieldType = forwardRef( {shouldRenderOverline && (
{label && ( - + {label} - + )} {required && showHint && (