@instructure/ui-checkbox 10.4.2-snapshot-10 → 10.4.2-snapshot-11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-checkbox",
-  "version": "10.4.2-snapshot-10",
+  "version": "10.4.2-snapshot-11",
   "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.25.6",
-    "@instructure/console": "10.4.2-snapshot-10",
-    "@instructure/emotion": "10.4.2-snapshot-10",
-    "@instructure/shared-types": "10.4.2-snapshot-10",
-    "@instructure/ui-dom-utils": "10.4.2-snapshot-10",
-    "@instructure/ui-form-field": "10.4.2-snapshot-10",
-    "@instructure/ui-icons": "10.4.2-snapshot-10",
-    "@instructure/ui-prop-types": "10.4.2-snapshot-10",
-    "@instructure/ui-react-utils": "10.4.2-snapshot-10",
-    "@instructure/ui-svg-images": "10.4.2-snapshot-10",
-    "@instructure/ui-testable": "10.4.2-snapshot-10",
-    "@instructure/ui-utils": "10.4.2-snapshot-10",
-    "@instructure/ui-view": "10.4.2-snapshot-10",
-    "@instructure/uid": "10.4.2-snapshot-10",
+    "@instructure/console": "10.4.2-snapshot-11",
+    "@instructure/emotion": "10.4.2-snapshot-11",
+    "@instructure/shared-types": "10.4.2-snapshot-11",
+    "@instructure/ui-dom-utils": "10.4.2-snapshot-11",
+    "@instructure/ui-form-field": "10.4.2-snapshot-11",
+    "@instructure/ui-icons": "10.4.2-snapshot-11",
+    "@instructure/ui-prop-types": "10.4.2-snapshot-11",
+    "@instructure/ui-react-utils": "10.4.2-snapshot-11",
+    "@instructure/ui-svg-images": "10.4.2-snapshot-11",
+    "@instructure/ui-testable": "10.4.2-snapshot-11",
+    "@instructure/ui-utils": "10.4.2-snapshot-11",
+    "@instructure/ui-view": "10.4.2-snapshot-11",
+    "@instructure/uid": "10.4.2-snapshot-11",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.4.2-snapshot-10",
-    "@instructure/ui-babel-preset": "10.4.2-snapshot-10",
-    "@instructure/ui-color-utils": "10.4.2-snapshot-10",
-    "@instructure/ui-test-utils": "10.4.2-snapshot-10",
-    "@instructure/ui-themes": "10.4.2-snapshot-10",
+    "@instructure/ui-axe-check": "10.4.2-snapshot-11",
+    "@instructure/ui-babel-preset": "10.4.2-snapshot-11",
+    "@instructure/ui-color-utils": "10.4.2-snapshot-11",
+    "@instructure/ui-test-utils": "10.4.2-snapshot-11",
+    "@instructure/ui-themes": "10.4.2-snapshot-11",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.1",
     "@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,7 @@ 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

@@ -48,6 +48,7 @@ const generateComponentTheme = (theme: Theme): CheckboxFacadeTheme => {
     color: colors?.contrasts?.white1010,
     borderWidth: borders?.widthSmall,
     borderColor: colors?.contrasts?.grey1214,
+    errorBorderColor: colors?.ui?.textError,
     borderRadius: borders?.radiusMedium,
     background: colors?.contrasts?.white1010,
     marginRight: spacing?.xSmall,

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,7 @@ 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?.contrasts?.white1010,
+    errorBorderColor: colors?.ui?.textError,
     background: colors?.contrasts?.grey1111,
     borderColor: colors?.contrasts?.grey1214,
     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)
@@ -284,6 +315,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
             ref={(c) => {
               this._input = c
             }}
+            required={isRequired}
             disabled={disabled || readOnly}
             aria-checked={indeterminate ? 'mixed' : undefined}
             css={styles?.input}

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
@@ -91,7 +92,13 @@ type CheckboxProps = CheckboxOwnProps &
   WithDeterministicIdProps
 
 type CheckboxStyle = ComponentStyle<
-  'checkbox' | 'input' | 'control' | 'container'
+  | 'checkbox'
+  | 'input'
+  | 'control'
+  | 'container'
+  | 'requiredInvalid'
+  | 'indentedError'
+  | 'indentedToggleError'
 >
 
 const propTypes: PropValidators<PropKeys> = {
@@ -113,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',

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?.contrasts?.red5782,
+    toggleErrorInsetWidth: `calc(${forms?.inputHeightSmall}*1.5 + ${spacing?.small})`,
+    checkErrorInsetWidth: `calc(1.25em + ${spacing?.xSmall})`,
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export default generateComponentTheme