FieldCheckboxGroup: Apply proper error state styles (#1622)

* Added error styling to FieldCheckboxGroup when validationMessage.type is "error"

* Added example of validation styling for FieldCheckboxGroup to playground

* Reverted changes to InputText.tsx

* Utilized inputTextValidation css helper function to get validation css for FieldCheckboxGroup

* Added CHANGELOG entry

* Reverting playground changes

* Reverted changes to InputText.tsx

* Added FieldCheckboxGroup story

* Revered changes to Field.tsx

* Removed FieldCheckboxGroup.story file

* Used validationMessage prop to trigger error state styles on child FieldCheckboxes

* Converted CheckboxGroup.stories to utilize Template.bind({})

* Moved FieldCheckboxGroup.stories file into the components package
- For image snapshot purposes

* Added FieldCheckbox image snapshots

* Update packages/components/src/Form/Fields/FieldCheckboxGroup/FieldCheckboxGroup.story.tsx

Co-authored-by: mdodgelooker <[email protected]>

* Moved Forms/CheckboxGroup to their own dir

* Deleted "CheckboxGroup" snapshots

* Moved CheckboxGroup snapshots to FieldCheckboxGroup dir

Co-authored-by: mdodgelooker <[email protected]>

Author: Elliot

packages/components/CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- `FieldCheckboxGroup` now sets `border-color` of child checkboxes to "critical" when validationMessage.type is equal to 'error'
 - `Select` on a mobile device or with "tap to click" on a touch pad reopens immediately after clicking on an option
 - `Select` options not being announced in a screen reader on keyboard navigation
 - Controlled `Select` losing focus if there's delay between `onChange` and `value` update

packages/components/snapshots/FieldCheckboxGroup/Basic-snap.png

@@ -49,7 +49,10 @@ const FieldCheckboxLayout = forwardRef(
           {...omitFieldProps(props)}
           aria-describedby={`${id}-describedby`}
           id={id}
-          validationType={validationMessage && validationMessage.type}
+          validationType={
+            (validationMessage && validationMessage.type) ||
+            props.validationType
+          }
           ref={ref}
         />
       </FieldInline>

packages/components/snapshots/FieldCheckboxGroup/Disabled-snap.png

@@ -25,10 +25,14 @@
  */
 
 import React from 'react'
-import { FieldCheckboxGroup } from '@looker/components'
+import { Story } from '@storybook/react/types-6-0'
+import {
+  FieldCheckboxGroup,
+  FieldCheckboxGroupProps,
+} from './FieldCheckboxGroup'
 
 export default {
-  title: 'Forms/CheckboxGroup',
+  title: 'FieldCheckboxGroup',
 }
 
 const options = [
@@ -87,72 +91,51 @@ const options = [
 
 const defaultValueCheckbox = ['swiss', 'cheddar']
 
-export const Basic = () => (
+const Template: Story<FieldCheckboxGroupProps> = (args) => (
   <FieldCheckboxGroup
+    {...args}
     defaultValue={defaultValueCheckbox}
     label="Cheeses"
     description="Pick all your cheeses"
     options={options}
   />
 )
 
-export const Disabled = () => (
-  <FieldCheckboxGroup
-    defaultValue={defaultValueCheckbox}
-    label="Cheeses"
-    description="Pick all your cheeses"
-    options={options}
-    disabled
-  />
-)
+export const Basic = Template.bind({})
+Basic.args = {}
 
-export const Required = () => (
-  <FieldCheckboxGroup
-    defaultValue={defaultValueCheckbox}
-    label="Cheeses"
-    inline
-    description="Pick all your cheeses"
-    options={options}
-  />
-)
+export const Disabled = Template.bind({})
+Disabled.args = {
+  disabled: true,
+}
 
-export const Inline = () => (
-  <FieldCheckboxGroup
-    defaultValue={defaultValueCheckbox}
-    label="Cheeses"
-    inline
-    description="Pick all your cheeses"
-    options={options}
-  />
-)
+export const Required = Template.bind({})
+Required.args = {
+  required: true,
+}
 
-export const Error = () => (
-  <FieldCheckboxGroup
-    defaultValue={defaultValueCheckbox}
-    label="Cheeses"
-    validationMessage={{
-      message: 'Select at least 1 cheese',
-      type: 'error',
-    }}
-    description="Pick all your cheeses"
-    options={options}
-  />
-)
+export const Inline = Template.bind({})
+Inline.args = {
+  inline: true,
+}
 
-export const ErrorInline = () => (
-  <FieldCheckboxGroup
-    defaultValue={defaultValueCheckbox}
-    label="Cheeses"
-    inline
-    required
-    validationMessage={{
-      message: 'Select at least 1 cheese',
-      type: 'error',
-    }}
-    description="Pick all your cheeses"
-    options={options}
-  />
-)
+export const Error = Template.bind({})
+Error.args = {
+  validationMessage: {
+    message: 'Select at least 1 cheese',
+    type: 'error',
+  },
+}
+
+export const ErrorInline = Template.bind({})
+ErrorInline.args = {
+  inline: true,
+  required: true,
+  validationMessage: {
+    message: 'Select at least 1 cheese',
+    type: 'error',
+  },
+}
 
 // export const Controlled = () => 'TODO'
 

packages/components/snapshots/FieldCheckboxGroup/Error Inline-snap.png

@@ -49,11 +49,7 @@ const FieldCheckboxGroupLayout: FC<FieldCheckboxGroupProps> = ({
   const id = useID(propsID)
 
   return (
-    <Field
-      {...pickFieldProps(props)}
-      validationMessage={validationMessage}
-      id={id}
-    >
+    <Field {...pickFieldProps(props)} id={id}>
       <CheckboxGroup
         {...omitFieldProps(props)}
         aria-describedby={`${id}-describedby`}
@@ -62,6 +58,7 @@ const FieldCheckboxGroupLayout: FC<FieldCheckboxGroupProps> = ({
         inline={props.inline || inputsInline}
         name={name || id}
         options={options}
+        validationType={validationMessage && validationMessage.type}
         value={value}
       />
     </Field>