@instructure/ui-checkbox 9.8.1 → 9.9.0

package/lib/Checkbox/theme.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = theme => {
+  const colors = theme.colors,
+    forms = theme.forms,
+    spacing = theme.spacing;
+  const componentVariables = {
+    requiredInvalidColor: colors === null || colors === void 0 ? void 0 : colors.textDanger,
+    toggleErrorInsetWidth: `calc(${forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall}*1.5 + ${spacing === null || spacing === void 0 ? void 0 : spacing.small})`,
+    checkErrorInsetWidth: `calc(1.25em + ${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall})`
+  };
+  return {
+    ...componentVariables
+  };
+};
+var _default = exports.default = generateComponentTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-checkbox",
-  "version": "9.8.1",
+  "version": "9.9.0",
   "description": " styled HTML input type='checkbox' component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,28 +24,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "9.8.1",
-    "@instructure/emotion": "9.8.1",
-    "@instructure/shared-types": "9.8.1",
-    "@instructure/ui-dom-utils": "9.8.1",
-    "@instructure/ui-form-field": "9.8.1",
-    "@instructure/ui-icons": "9.8.1",
-    "@instructure/ui-prop-types": "9.8.1",
-    "@instructure/ui-react-utils": "9.8.1",
-    "@instructure/ui-svg-images": "9.8.1",
-    "@instructure/ui-testable": "9.8.1",
-    "@instructure/ui-utils": "9.8.1",
-    "@instructure/ui-view": "9.8.1",
-    "@instructure/uid": "9.8.1",
+    "@instructure/console": "9.9.0",
+    "@instructure/emotion": "9.9.0",
+    "@instructure/shared-types": "9.9.0",
+    "@instructure/ui-dom-utils": "9.9.0",
+    "@instructure/ui-form-field": "9.9.0",
+    "@instructure/ui-icons": "9.9.0",
+    "@instructure/ui-prop-types": "9.9.0",
+    "@instructure/ui-react-utils": "9.9.0",
+    "@instructure/ui-svg-images": "9.9.0",
+    "@instructure/ui-testable": "9.9.0",
+    "@instructure/ui-utils": "9.9.0",
+    "@instructure/ui-view": "9.9.0",
+    "@instructure/uid": "9.9.0",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "9.8.1",
-    "@instructure/ui-babel-preset": "9.8.1",
-    "@instructure/ui-color-utils": "9.8.1",
-    "@instructure/ui-test-utils": "9.8.1",
-    "@instructure/ui-themes": "9.8.1",
+    "@instructure/ui-axe-check": "9.9.0",
+    "@instructure/ui-babel-preset": "9.9.0",
+    "@instructure/ui-color-utils": "9.9.0",
+    "@instructure/ui-test-utils": "9.9.0",
+    "@instructure/ui-themes": "9.9.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",

package/src/Checkbox/CheckboxFacade/props.ts

@@ -40,6 +40,10 @@ type CheckboxFacadeOwnProps = {
    * Visual state showing that child checkboxes are a combination of checked and unchecked
    */
   indeterminate?: boolean
+  /**
+   * Indicate if the parent component (`Checkbox`) is invalid to set the style accordingly.
+   */
+  invalid?: boolean
 }
 
 type PropKeys = keyof CheckboxFacadeOwnProps
@@ -57,7 +61,8 @@ const propTypes: PropValidators<PropKeys> = {
   focused: PropTypes.bool,
   hovered: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  indeterminate: PropTypes.bool
+  indeterminate: PropTypes.bool,
+  invalid: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [

package/src/Checkbox/CheckboxFacade/styles.ts

@@ -39,7 +39,7 @@ const generateStyle = (
   componentTheme: CheckboxFacadeTheme,
   props: CheckboxFacadeProps
 ): CheckboxFacadeStyle => {
-  const { size, checked, focused, hovered, indeterminate } = props
+  const { size, checked, focused, hovered, indeterminate, invalid } = props
 
   const isChecked = checked || indeterminate
 
@@ -87,7 +87,9 @@ const generateStyle = (
       boxSizing: 'border-box',
       flexShrink: 0,
       transition: 'all 0.2s',
-      border: `${componentTheme.borderWidth} solid ${componentTheme.borderColor}`,
+      border: `${componentTheme.borderWidth} solid ${
+        invalid ? componentTheme.errorBorderColor : componentTheme.borderColor
+      }`,
       borderRadius: componentTheme.borderRadius,
       marginInlineEnd: componentTheme.marginRight,
       marginInlineStart: '0',

package/src/Checkbox/CheckboxFacade/theme.ts

@@ -57,6 +57,7 @@ const generateComponentTheme = (theme: Theme): CheckboxFacadeTheme => {
     checkedBorderColor: colors?.borderDarkest,
 
     hoverBorderColor: colors?.borderDarkest,
+    errorBorderColor: colors?.borderDanger,
 
     focusBorderColor: colors?.borderBrand,
     focusBorderWidth: borders?.widthMedium,

package/src/Checkbox/README.md

@@ -273,3 +273,14 @@ type: embed
   </Figure>
 </Guidelines>
 ```
+
+```js
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="a11y" title="Accessibility">
+    <Figure.Item>Do not add business logic to `onMouseOver` or `onMouseOut` events. These events are not triggered by keyboard navigation</Figure.Item>
+  </Figure>
+</Guidelines>
+```

package/src/Checkbox/ToggleFacade/props.ts

@@ -39,6 +39,10 @@ type ToggleFacadeOwnProps = {
   focused?: boolean
   size?: 'small' | 'medium' | 'large'
   labelPlacement?: 'top' | 'start' | 'end'
+  /**
+   * Indicate if the parent component (`Checkbox`) is invalid to set the style accordingly.
+   */
+  invalid?: boolean
 }
 
 type PropKeys = keyof ToggleFacadeOwnProps
@@ -59,7 +63,8 @@ const propTypes: PropValidators<PropKeys> = {
   readOnly: PropTypes.bool,
   focused: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  labelPlacement: PropTypes.oneOf(['top', 'start', 'end'])
+  labelPlacement: PropTypes.oneOf(['top', 'start', 'end']),
+  invalid: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [

package/src/Checkbox/ToggleFacade/styles.ts

@@ -39,7 +39,7 @@ const generateStyle = (
   componentTheme: ToggleFacadeTheme,
   props: ToggleFacadeProps
 ): ToggleFacadeStyle => {
-  const { size, checked, focused, labelPlacement } = props
+  const { size, checked, focused, labelPlacement, invalid } = props
 
   const labelPlacementVariants = {
     start: {
@@ -81,7 +81,6 @@ const generateStyle = (
       alignItems: 'center',
       ...(labelPlacement === 'top' && { display: 'block' })
     },
-
     facade: {
       label: 'toggleFacade__facade',
       background: componentTheme.background,
@@ -92,7 +91,11 @@ const generateStyle = (
       position: 'relative',
       borderRadius: '3rem',
       verticalAlign: 'middle',
-      boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${componentTheme.borderColor}`,
+      boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${
+        invalid && !checked
+          ? componentTheme.errorBorderColor
+          : componentTheme.borderColor
+      }`,
       height: componentTheme.toggleSize,
       width: `calc(${componentTheme.toggleSize} * 1.5)`,
       ...labelPlacementVariants[labelPlacement!].facade,

package/src/Checkbox/ToggleFacade/theme.ts

@@ -54,6 +54,7 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => {
 
   const componentVariables: ToggleFacadeTheme = {
     color: colors?.textLightest,
+    errorBorderColor: colors?.borderDanger,
     background: colors?.backgroundLight,
     borderColor: colors?.borderMedium,
     borderWidth: borders?.widthSmall,

package/src/Checkbox/index.tsx

@@ -40,6 +40,7 @@ import { CheckboxFacade } from './CheckboxFacade'
 import { ToggleFacade } from './ToggleFacade'
 
 import generateStyle from './styles'
+import generateComponentTheme from './theme'
 
 import { propTypes, allowedProps } from './props'
 import type { CheckboxProps, CheckboxState } from './props'
@@ -57,7 +58,7 @@ tags: toggle, switch
 **/
 
 @withDeterministicId()
-@withStyle(generateStyle, null)
+@withStyle(generateStyle, generateComponentTheme)
 @testable()
 class Checkbox extends Component<CheckboxProps, CheckboxState> {
   static readonly componentId = 'Checkbox'
@@ -181,6 +182,16 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     return isActiveElement(this._input)
   }
 
+  get isNewError() {
+    return !!this.props.messages?.find((m) => m.type === 'newError')
+  }
+
+  get invalid() {
+    return !!this.props.messages?.find(
+      (m) => m.type === 'newError' || m.type === 'error'
+    )
+  }
+
   focus() {
     this._input && this._input.focus()
   }
@@ -194,7 +205,9 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
       readOnly,
       indeterminate,
       labelPlacement,
-      themeOverride
+      themeOverride,
+      isRequired,
+      styles
     } = this.props
 
     const { hovered, focused } = this.state
@@ -214,8 +227,12 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
           readOnly={readOnly}
           labelPlacement={labelPlacement}
           themeOverride={themeOverride as Partial<ToggleFacadeTheme>}
+          invalid={this.invalid}
         >
           {label}
+          {isRequired && (
+            <span css={this.invalid ? styles?.requiredInvalid : {}}> *</span>
+          )}
         </ToggleFacade>
       )
     } else {
@@ -227,18 +244,31 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
           checked={this.checked}
           indeterminate={indeterminate}
           themeOverride={themeOverride as Partial<CheckboxFacadeTheme>}
+          invalid={this.invalid}
         >
           {label}
+          {isRequired && (
+            <span css={this.invalid ? styles?.requiredInvalid : {}}> *</span>
+          )}
         </CheckboxFacade>
       )
     }
   }
 
   renderMessages() {
-    const { messages } = this.props
+    const { messages, styles, variant } = this.props
 
     return messages && messages.length > 0 ? (
-      <View display="block" margin="small 0 0">
+      <View
+        display="block"
+        margin="small 0 0"
+        css={
+          this.isNewError &&
+          (variant === 'toggle'
+            ? styles?.indentedToggleError
+            : styles?.indentedError)
+        }
+      >
         <FormFieldMessages messages={messages} />
       </View>
     ) : null
@@ -256,7 +286,8 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
       onMouseOut,
       indeterminate,
       variant,
-      styles
+      styles,
+      isRequired
     } = this.props
 
     const props = omitProps(this.props, Checkbox.allowedProps)
@@ -266,40 +297,41 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
       `[Checkbox] The \`toggle\` variant does not support the \`indeterminate\` property. Use the \`simple\` variant instead.`
     )
 
-    /* eslint-disable jsx-a11y/mouse-events-have-key-events */
-
     return (
       <div
         css={styles?.checkbox}
+        /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */
         onMouseOver={createChainedFunction(onMouseOver, this.handleMouseOver)}
+        /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */
         onMouseOut={createChainedFunction(onMouseOut, this.handleMouseOut)}
         ref={this.handleRef}
       >
-        <input
-          {...props}
-          id={this.id}
-          value={value}
-          type="checkbox"
-          ref={(c) => {
-            this._input = c
-          }}
-          disabled={disabled || readOnly}
-          aria-checked={indeterminate ? 'mixed' : undefined}
-          css={styles?.input}
-          onChange={this.handleChange}
-          onKeyDown={createChainedFunction(onKeyDown, this.handleKeyDown)}
-          onFocus={createChainedFunction(onFocus, this.handleFocus)}
-          onBlur={createChainedFunction(onBlur, this.handleBlur)}
-          checked={this.checked}
-        />
-        <label htmlFor={this.id} css={styles?.control}>
-          {this.renderFacade()}
-          {this.renderMessages()}
-        </label>
+        <div css={styles?.container}>
+          <input
+            {...props}
+            id={this.id}
+            value={value}
+            type="checkbox"
+            ref={(c) => {
+              this._input = c
+            }}
+            required={isRequired}
+            disabled={disabled || readOnly}
+            aria-checked={indeterminate ? 'mixed' : undefined}
+            css={styles?.input}
+            onChange={this.handleChange}
+            onKeyDown={createChainedFunction(onKeyDown, this.handleKeyDown)}
+            onFocus={createChainedFunction(onFocus, this.handleFocus)}
+            onBlur={createChainedFunction(onBlur, this.handleBlur)}
+            checked={this.checked}
+          />
+          <label htmlFor={this.id} css={styles?.control}>
+            {this.renderFacade()}
+            {this.renderMessages()}
+          </label>
+        </div>
       </div>
     )
-
-    /* eslint-enable jsx-a11y/mouse-events-have-key-events */
   }
 }
 

package/src/Checkbox/props.ts

@@ -79,6 +79,7 @@ type CheckboxOwnProps = {
   variant?: 'simple' | 'toggle'
   inline?: boolean
   labelPlacement?: 'top' | 'start' | 'end'
+  isRequired?: boolean
 }
 
 type PropKeys = keyof CheckboxOwnProps
@@ -87,9 +88,18 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type CheckboxProps = CheckboxOwnProps &
   WithStyleProps<CheckboxFacadeTheme | ToggleFacadeTheme, CheckboxStyle> &
-  OtherHTMLAttributes<CheckboxOwnProps> & WithDeterministicIdProps
+  OtherHTMLAttributes<CheckboxOwnProps> &
+  WithDeterministicIdProps
 
-type CheckboxStyle = ComponentStyle<'checkbox' | 'input' | 'control'>
+type CheckboxStyle = ComponentStyle<
+  | 'checkbox'
+  | 'input'
+  | 'control'
+  | 'container'
+  | 'requiredInvalid'
+  | 'indentedError'
+  | 'indentedToggleError'
+>
 
 const propTypes: PropValidators<PropKeys> = {
   label: PropTypes.node.isRequired,
@@ -110,7 +120,8 @@ const propTypes: PropValidators<PropKeys> = {
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   variant: PropTypes.oneOf(['simple', 'toggle']),
   inline: PropTypes.bool,
-  labelPlacement: PropTypes.oneOf(['top', 'start', 'end'])
+  labelPlacement: PropTypes.oneOf(['top', 'start', 'end']),
+  isRequired: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [

package/src/Checkbox/styles.ts

@@ -36,12 +36,21 @@ import type { ComponentTheme } from '@instructure/shared-types'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  _componentTheme: ComponentTheme,
+  componentTheme: ComponentTheme,
   props: CheckboxProps
 ): CheckboxStyle => {
   const { inline, disabled } = props
 
   return {
+    requiredInvalid: {
+      color: componentTheme.requiredInvalidColor
+    },
+    indentedError: {
+      paddingLeft: componentTheme.checkErrorInsetWidth
+    },
+    indentedToggleError: {
+      paddingLeft: componentTheme.toggleErrorInsetWidth
+    },
     checkbox: {
       label: 'checkbox',
       position: 'relative',
@@ -57,6 +66,10 @@ const generateStyle = (
         width: 'auto'
       })
     },
+    // this container is added to reduce the clickable area of the checkbox to the actual checkbox and label
+    container: {
+      width: 'fit-content'
+    },
     input: {
       label: 'checkbox__input',
       padding: 0,

package/src/Checkbox/theme.ts

@@ -0,0 +1,46 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Theme } from '@instructure/ui-themes'
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = (theme: Theme): any => {
+  const { colors, forms, spacing } = theme
+
+  const componentVariables: any = {
+    requiredInvalidColor: colors?.textDanger,
+    toggleErrorInsetWidth: `calc(${forms?.inputHeightSmall}*1.5 + ${spacing?.small})`,
+    checkErrorInsetWidth: `calc(1.25em + ${spacing?.xSmall})`
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export default generateComponentTheme