changing the prop subLabel

WestpacGEL · Dec 6, 2023 · e179107 · e179107
1 parent 3d2d50e
commit e179107
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 35 deletions.
diff --git a/apps/site/src/components/code/components/demos/employment/employment-usage.demo.tsx b/apps/site/src/components/code/components/demos/employment/employment-usage.demo.tsx
@@ -76,7 +76,7 @@ export const EmploymentSelectFullPattern = ({ showErrors = false }) => {
             <Form.Label>Length of time with this {employment === 'self' ? 'company' : 'employer'}</Form.Label>
             {error && <Form.ErrorMessage message={error} />}
             <fieldset className="flex gap-3">
-              <Field label="Years" subLabel>
+              <Field label="Years" labelSize="small">
                 <Select
                   value={years}
                   onChange={(e: any) => {
@@ -89,7 +89,7 @@ export const EmploymentSelectFullPattern = ({ showErrors = false }) => {
                   <option value={2}>2</option>
                 </Select>
               </Field>
-              <Field label="Months" subLabel>
+              <Field label="Months" labelSize="small">
                 <Select size="large">
                   <option>Select</option>
                   <option value={1}>1</option>
@@ -133,14 +133,14 @@ export const EmploymentSelectFullPattern = ({ showErrors = false }) => {
             <Form.Label>Length of time with this {prevEmployment === 'self' ? 'company' : 'employer'}</Form.Label>
             {error && <Form.ErrorMessage message={error} />}
             <fieldset className="flex gap-3">
-              <Field label="Years" subLabel>
+              <Field label="Years" labelSize="small">
                 <Select size="large">
                   <option>Select</option>
                   <option value="1">1</option>
                   <option value="2">2</option>
                 </Select>
               </Field>
-              <Field label="Months" subLabel>
+              <Field label="Months" labelSize="small">
                 <Select size="large">
                   <option>Select</option>
                   <option value="1">1</option>

diff --git a/.../src/content/design-system/patterns/dates/date-of-birth/design/date-of-birth/content.mdoc b/.../src/content/design-system/patterns/dates/date-of-birth/design/date-of-birth/content.mdoc
@@ -7,7 +7,7 @@ This pattern is defined as a ‘memorable date’, of which users will know the
   <Form.Label>Date of birth</Form.Label>
   <Form.Hint>Example: 31 3 1980</Form.Hint>
   <fieldset className="flex gap-4">
-    <Field label="Day" subLabel>
+    <Field label="Day" labelSize="small">
       <Input
         type="number"
         size="large"
@@ -17,7 +17,7 @@ This pattern is defined as a ‘memorable date’, of which users will know the
         autoComplete="bday-day"
       />
     </Field>
-    <Field label="Month" subLabel>
+    <Field label="Month" labelSize="small">
       <Input
         type="number"
         size="large"
@@ -27,7 +27,7 @@ This pattern is defined as a ‘memorable date’, of which users will know the
         autoComplete="bday-month"
       />
     </Field>
-    <Field label="Year" subLabel>
+    <Field label="Year" labelSize="small">
       <Input className="w-14" type="number" size="large" pattern="[0-9]*" autoComplete="bday-year" />
     </Field>
   </fieldset>

diff --git a/...e/src/content/design-system/patterns/dates/date-of-birth/design/error-states/content.mdoc b/...e/src/content/design-system/patterns/dates/date-of-birth/design/error-states/content.mdoc
@@ -11,13 +11,13 @@ If more than one field has an error, the errors stack in a group under the hint
   <Form.ErrorMessage message="Day must be valid" />
   <Form.ErrorMessage message="Year must be valid" />
   <fieldset className="flex gap-4">
-    <Field label="Day" subLabel>
+    <Field label="Day" labelSize="small">
       <Input type="number" size="large" pattern="[0-9]*" min="1" max="31" autoComplete="bday-day" invalid />
     </Field>
-    <Field label="Month" subLabel>
+    <Field label="Month" labelSize="small">
       <Input type="number" size="large" pattern="[0-9]*" min="1" max="12" autoComplete="bday-month" />
     </Field>
-    <Field label="Year" subLabel>
+    <Field label="Year" labelSize="small">
       <Input className="w-14" type="number" size="large" pattern="[0-9]*" autoComplete="bday-year" invalid />
     </Field>
   </fieldset>

diff --git a/...ite/src/content/design-system/patterns/dates/expiry-date/design/error-states/content.mdoc b/...ite/src/content/design-system/patterns/dates/expiry-date/design/error-states/content.mdoc
@@ -11,10 +11,10 @@ The Expiry date pattern can isolate which field carries the error and highlight
   <Form.ErrorMessage message="Month must be valid" />
   <Form.ErrorMessage message="Year must be valid" />
   <fieldset className="flex gap-4">
-    <Field label="Month" subLabel>
+    <Field label="Month" labelSize="small">
       <Input invalid type="number" size="large" pattern="[0-9]*" min="1" max="12" autoComplete="bday-month" />
     </Field>
-    <Field label="Year" subLabel>
+    <Field label="Year" labelSize="small">
       <Input invalid className="w-14" type="number" size="large" pattern="[0-9]*" autoComplete="bday-year" />
     </Field>
   </fieldset>
@@ -28,15 +28,15 @@ The Expiry date pattern can isolate which field carries the error and highlight
   <Form.Label>Expiry date</Form.Label>
   <Form.ErrorMessage message="Error message goes here if activated" />
   <fieldset className="flex gap-4">
-    <Field label="Month" subLabel>
+    <Field label="Month" labelSize="small">
       <Select invalid size="large" width={30}>
         <option>Select</option>
         {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(value => (
           <option value={value}>{value}</option>
         ))}
       </Select>
     </Field>
-    <Field label="Year" subLabel>
+    <Field label="Year" labelSize="small">
       <Select size="large" width={30}>
         <option>Select</option>
         {[2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030].map(value => (

diff --git a/...site/src/content/design-system/patterns/dates/expiry-date/design/expiry-date/content.mdoc b/...site/src/content/design-system/patterns/dates/expiry-date/design/expiry-date/content.mdoc
@@ -11,10 +11,10 @@ This pattern exists as a [widget in the WDP system](https://one.dev1.ui.westpac.
   <Form.Label>Expiry date</Form.Label>
   <Form.Hint>Example: 03 2020</Form.Hint>
   <fieldset className="flex gap-4">
-    <Field label="Month" subLabel>
+    <Field label="Month" labelSize="small">
       <Input type="number" size="large" pattern="[0-9]*" min="1" max="12" autoComplete="bday-month" />
     </Field>
-    <Field label="Year" subLabel>
+    <Field label="Year" labelSize="small">
       <Input className="w-14" type="number" size="large" pattern="[0-9]*" autoComplete="bday-year" />
     </Field>
   </fieldset>
@@ -31,15 +31,15 @@ This pattern exists as a [widget in the WDP system](https://one.dev1.ui.westpac.
 <Form.Group>
   <Form.Label>Expiry date</Form.Label>
   <fieldset className="flex gap-4">
-    <Field label="Month" subLabel>
+    <Field label="Month" labelSize="small">
       <Select size="large" width={30}>
         <option>Select</option>
         {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(value => (
           <option value={value}>{value}</option>
         ))}
       </Select>
     </Field>
-    <Field label="Year" subLabel>
+    <Field label="Year" labelSize="small">
       <Select size="large" width={30}>
         <option>Select</option>
         {[2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030].map(value => (

diff --git a/packages/ui/src/components/field/field.component.tsx b/packages/ui/src/components/field/field.component.tsx
@@ -16,7 +16,7 @@ export function Field({
   hintMessage,
   errorMessage,
   labelElementType,
-  subLabel,
+  labelSize,
   ...props
 }: FieldProps) {
   const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
@@ -37,7 +37,7 @@ export function Field({
 
   return (
     <Tag className={styles({ className })} {...props}>
-      <FormLabel subLabel={subLabel} {...labelProps}>
+      <FormLabel size={labelSize} {...labelProps}>
         {label}
       </FormLabel>
       {hintMessage && <FormHint {...descriptionProps}>{hintMessage}</FormHint>}

diff --git a/packages/ui/src/components/field/field.types.ts b/packages/ui/src/components/field/field.types.ts
@@ -13,9 +13,9 @@ export type FieldProps = {
    */
   hintMessage?: FormHintProps['children'];
   /**
-   * Sub-label mode (smaller label text size)
+   * label size
    */
-  subLabel?: FormLabelProps['subLabel'];
+  labelSize?: FormLabelProps['size'];
   /**
    * Tag to render
    */

diff --git a/packages/ui/src/components/form-label/form-label.component.tsx b/packages/ui/src/components/form-label/form-label.component.tsx
@@ -11,15 +11,15 @@ export function FormLabel({
   spacing,
   srOnly,
   children,
-  subLabel = false,
+  size = 'medium',
   ...props
 }: FormLabelProps) {
   const finalSpacing = spacing || 'medium';
 
   return srOnly ? (
     <VisuallyHidden>{children}</VisuallyHidden>
   ) : (
-    <Tag className={styles({ className, spacing: finalSpacing, subLabel })} {...props}>
+    <Tag className={styles({ className, spacing: finalSpacing, size })} {...props}>
       {children}
     </Tag>
   );

diff --git a/packages/ui/src/components/form-label/form-label.styles.ts b/packages/ui/src/components/form-label/form-label.styles.ts
@@ -8,29 +8,29 @@ export const styles = tv(
         medium: '',
         large: '',
       },
-      subLabel: {
-        true: 'typography-body-10',
-        false: 'typography-body-9',
+      size: {
+        small: 'typography-body-10',
+        medium: 'typography-body-9',
       },
     },
     compoundVariants: [
       {
-        subLabel: true,
+        size: 'medium',
         spacing: 'medium',
         className: 'mb-1',
       },
       {
-        subLabel: true,
+        size: 'medium',
         spacing: 'large',
         className: 'mb-1',
       },
       {
-        subLabel: false,
+        size: 'small',
         spacing: 'medium',
         className: 'mb-2',
       },
       {
-        subLabel: false,
+        size: 'small',
         spacing: 'large',
         className: 'mb-3',
       },

diff --git a/packages/ui/src/components/form-label/form-label.types.ts b/packages/ui/src/components/form-label/form-label.types.ts
@@ -16,6 +16,10 @@ export type FormLabelProps = {
    *
    */
   htmlFor?: string;
+  /**
+   * label size
+   */
+  size?: Variants['size'];
   /**
    * Spacing
    */
@@ -24,10 +28,6 @@ export type FormLabelProps = {
    * Enable ‘screen reader only’ mode
    */
   srOnly?: boolean;
-  /**
-   * Sub-label mode (smaller label text size)
-   */
-  subLabel?: Variants['subLabel'];
   /**
    * Component tag
    */