Add for attribute for core product CI (#890)

Author: mdodgelooker

CHANGELOG.md

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `menuItemStyleContext` in `MenuContext` uses a new interface which contains "preserved icon space"-related properties
 - `MenuItem` renders an empty Box with the same size as the icon(s) of sibling `MenuItem's (if any)
 - `MenuList`, `MenuGroup` contain piece of state the tracks the size of the preserved icon space
+- Labels in `FieldInline` and `ButtonItem` now include the `for` attribute
 
 ### Fixed
 

packages/components/src/Button/ButtonItem.tsx

@@ -34,6 +34,7 @@ import {
   typography,
   TypographyProps,
 } from '@looker/design-tokens'
+import { useID } from '../utils'
 
 export interface ButtonItemProps
   extends SpaceProps,
@@ -116,6 +117,7 @@ const ButtonItemComponent = forwardRef(
     {
       children,
       disabled,
+      id: propsID,
       isControlled,
       name,
       onChange,
@@ -126,6 +128,7 @@ const ButtonItemComponent = forwardRef(
     ref: Ref<HTMLInputElement>
   ) => {
     const [uncontrolledSelected, setUncontrolledSelected] = useState(selected)
+    const id = useID(propsID)
 
     function handleChange(e: ChangeEvent<HTMLInputElement>) {
       if (onChange) {
@@ -141,6 +144,7 @@ const ButtonItemComponent = forwardRef(
     return (
       <ButtonItemLabel
         disabled={disabled}
+        htmlFor={id}
         fontFamily="brand"
         py="small"
         selected={showSelected}
@@ -150,6 +154,7 @@ const ButtonItemComponent = forwardRef(
           type={props.type}
           disabled={disabled}
           name={name}
+          id={id}
           onChange={handleChange}
           checked={showSelected}
           value={value}

packages/components/src/Form/Fields/FieldCheckbox/FieldCheckbox.tsx

@@ -26,7 +26,7 @@
 
 import React, { forwardRef, Ref } from 'react'
 import styled from 'styled-components'
-import { v4 as uuid } from 'uuid'
+import { useID } from '../../../utils'
 import { useFormContext } from '../../Form'
 import { Checkbox, CheckboxProps } from '../../Inputs/Checkbox/Checkbox'
 import { omitFieldProps, pickFieldProps } from '../Field'
@@ -38,7 +38,7 @@ export interface FieldCheckboxProps extends CheckboxProps, FieldBaseProps {}
 const FieldCheckboxLayout = forwardRef(
   (props: FieldCheckboxProps, ref: Ref<HTMLInputElement>) => {
     const validationMessage = useFormContext(props)
-    const { id = uuid() } = props
+    const id = useID(props.id)
     return (
       <FieldInline
         {...pickFieldProps(props)}

packages/components/src/Form/Fields/FieldCheckbox/__snapshots__/FieldCheckbox.test.tsx.snap

@@ -104,6 +104,7 @@ exports[`A FieldCheckbox 1`] = `
     color="palette.charcoal700"
     fontSize="xsmall"
     fontWeight="semiBold"
+    htmlFor="FieldCheckboxID"
   >
     👍
   </span>
@@ -254,6 +255,7 @@ exports[`A FieldCheckbox with checked value 1`] = `
     color="palette.charcoal700"
     fontSize="xsmall"
     fontWeight="semiBold"
+    htmlFor="FieldCheckboxID"
   >
     👍
   </span>

packages/components/src/Form/Fields/FieldCheckboxGroup/FieldCheckboxGroup.tsx

@@ -26,7 +26,7 @@
 
 import React, { FC } from 'react'
 import styled from 'styled-components'
-import { v4 as uuid } from 'uuid'
+import { useID } from '../../../utils'
 import { useFormContext } from '../../Form'
 import { CheckboxGroup, CheckboxGroupProps } from '../../Inputs'
 import { Field, FieldProps, omitFieldProps, pickFieldProps } from '../Field'
@@ -36,12 +36,13 @@ export interface FieldCheckboxGroupProps
     Omit<FieldProps, 'detail'> {}
 
 const FieldCheckboxGroupLayout: FC<FieldCheckboxGroupProps> = ({
-  id = uuid(),
+  id: propsID,
   options,
   value,
   ...props
 }) => {
   const validationMessage = useFormContext(props)
+  const id = useID(propsID)
 
   return (
     <Field

packages/components/src/Form/Fields/FieldInline.tsx

@@ -55,7 +55,7 @@ const FieldInlineLayout: FC<Omit<
 }) => {
   return (
     <label className={className}>
-      <Label as="span" fontSize={labelFontSize}>
+      <Label as="span" fontSize={labelFontSize} htmlFor={id}>
         {label}
         {required && <RequiredStar />}
       </Label>

packages/components/src/Form/Fields/FieldRadio/FieldRadio.tsx

@@ -26,7 +26,7 @@
 
 import React, { forwardRef, Ref } from 'react'
 import styled from 'styled-components'
-import { v4 as uuid } from 'uuid'
+import { useID } from '../../../utils'
 import { Radio, RadioProps } from '../../Inputs/Radio/Radio'
 import { omitFieldProps, pickFieldProps } from '../Field'
 import { FieldInline } from '../FieldInline'
@@ -38,7 +38,7 @@ export interface FieldRadioProps
 
 const FieldRadioLayout = forwardRef(
   (props: FieldRadioProps, ref: Ref<HTMLInputElement>) => {
-    const { id = uuid() } = props
+    const id = useID(props.id)
     return (
       <FieldInline {...pickFieldProps(props)} id={id}>
         <Radio

packages/components/src/Form/Fields/FieldRadio/__snapshots__/FieldRadio.test.tsx.snap

@@ -109,6 +109,7 @@ exports[`A FieldRadio 1`] = `
     color="palette.charcoal700"
     fontSize="xsmall"
     fontWeight="semiBold"
+    htmlFor="FieldRadioID"
   >
     👍
   </span>
@@ -245,6 +246,7 @@ exports[`A FieldRadio checked 1`] = `
     color="palette.charcoal700"
     fontSize="xsmall"
     fontWeight="semiBold"
+    htmlFor="FieldRadioID"
   >
     👍
   </span>

packages/components/src/Form/Fields/FieldRadioGroup/FieldRadioGroup.tsx

@@ -26,7 +26,7 @@
 
 import React, { FC } from 'react'
 import styled from 'styled-components'
-import { v4 as uuid } from 'uuid'
+import { useID } from '../../../utils'
 import { useFormContext } from '../../Form'
 import { Field, FieldProps, omitFieldProps, pickFieldProps } from '../Field'
 import { RadioGroup, RadioGroupProps } from '../../Inputs/OptionsGroup'
@@ -36,11 +36,12 @@ export interface FieldRadioGroupProps
     Omit<FieldProps, 'detail'> {}
 
 const FieldRadioGroupLayout: FC<FieldRadioGroupProps> = ({
-  id = uuid(),
+  id: propsID,
   options,
   ...props
 }) => {
   const validationMessage = useFormContext(props)
+  const id = useID(propsID)
 
   return (
     <Field

packages/components/src/Form/Fields/FieldSelect/FieldSelect.tsx

@@ -26,7 +26,7 @@
 
 import React, { forwardRef, Ref } from 'react'
 import styled from 'styled-components'
-import { v4 as uuid } from 'uuid'
+import { useID } from '../../../utils'
 import { useFormContext } from '../../Form'
 import { Select, SelectProps } from '../../Inputs/Select/Select'
 import { Field, FieldProps, omitFieldProps, pickFieldProps } from '../Field'
@@ -36,7 +36,7 @@ export interface FieldSelectProps extends FieldProps, SelectProps {}
 const FieldSelectComponent = forwardRef(
   (props: FieldSelectProps, ref: Ref<HTMLInputElement>) => {
     const validationMessage = useFormContext(props)
-    const { id = uuid() } = props
+    const id = useID(props.id)
     return (
       <Field
         {...pickFieldProps(props)}