Add errorMessage

Add invalid to combobox

Add errorMessage to date-field

Add errorMessage to number field

Add errorMessage to radio

Add error message to radio group

Add errorMessage to search

Add errorMessage to select

Add errorMessage to slider

Add errorMessage to switch

Add errorMessage to text area

Add errorMessage to text field

Align stories arg name and element attribute

Add new attribute to react props

Add visual test for error message

Author: fcollonval

packages/components/.storybook/preview-head.html

@@ -22,10 +22,17 @@
     /* For testing reaction to JupyterLab theme */
     :root {
         --jp-brand-color1: var(--md-blue-700);
+        --jp-error-color1: var(--md-red-700);
         --jp-border-width: 1px;
         --jp-border-color1: var(--md-grey-400);
         --jp-ui-font-size1: 13px;
         --md-grey-400: #78909C;
         --md-blue-700: #1976D2;
+        --md-red-700: #d32f2f;
+    }
+
+    form {
+        display: flex;
+        align-items: center;
     }
 </style>

packages/components/src/anchor/anchor.stories.ts

@@ -10,12 +10,12 @@ export default {
     appearance: {
       control: 'select',
       options: [
-        'Accent',
-        'Lightweight',
-        'Neutral',
-        'Outline',
-        'Stealth',
-        'Hypertext'
+        'accent',
+        'lightweight',
+        'neutral',
+        'outline',
+        'stealth',
+        'hypertext'
       ]
     },
     startIcon: { control: 'boolean' },
@@ -26,7 +26,7 @@ export default {
 const Template: StoryFn = (args, context): string => {
   return `<jp-anchor
   href="#"
-  ${args.appearance ? `appearance="${args.appearance.toLowerCase()}` : ''}">
+  ${args.appearance ? `appearance="${args.appearance}` : ''}">
   ${args.startIcon ? getFaIcon('plus', 'start') : ''}${args.label ?? 'Link'}
   ${args.endIcon ? getFaIcon('plus', 'end') : ''}
   </jp-anchor>`;

packages/components/src/button/button.stories.ts

@@ -19,9 +19,9 @@ export default {
         'Stealth'
       ]
     },
-    isDisabled: { control: 'boolean' },
-    isAutoFocused: { control: 'boolean' },
-    isMinimal: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    autofocus: { control: 'boolean' },
+    minimal: { control: 'boolean' },
     startIcon: { control: 'boolean' },
     onClick: {
       action: 'clicked',
@@ -42,9 +42,9 @@ const Template: StoryFn = (args): HTMLElement => {
     'afterbegin',
     `<jp-button 
       ${args.appearance ? `appearance=${args.appearance.toLowerCase()}` : ''}
-      ${args.isDisabled ? 'disabled' : ''} 
-      ${args.isAutoFocused ? 'autofocus' : ''}
-      ${args.isMinimal ? 'minimal' : ''}
+      ${args.disabled ? 'disabled' : ''} 
+      ${args.autofocus ? 'autofocus' : ''}
+      ${args.minimal ? 'minimal' : ''}
       ${args.ariaPressed !== 'none' ? `aria-pressed=${args.ariaPressed}` : ''}
     >${args.startIcon ? getFaIcon('plus', args.label ? 'start' : null) : ''}${
       args.label ?? ''
@@ -62,9 +62,9 @@ export const Accent: StoryObj = { render: Template.bind({}) };
 Accent.args = {
   label: 'Button Text',
   appearance: 'Accent',
-  isDisabled: false,
-  isAutoFocused: false,
-  isMinimal: false,
+  disabled: false,
+  autofocus: false,
+  minimal: false,
   startIcon: false,
   ariaPressed: 'none',
   onClick: action('button-clicked')
@@ -91,13 +91,13 @@ Lightweight.args = {
 export const WithAutofocus: StoryObj = { render: Template.bind({}) };
 WithAutofocus.args = {
   ...Accent.args,
-  isAutoFocused: true
+  autofocus: true
 };
 
 export const WithDisabled: StoryObj = { render: Template.bind({}) };
 WithDisabled.args = {
   ...Accent.args,
-  isDisabled: true
+  disabled: true
 };
 
 export const WithStartIcon: StoryObj = { render: Template.bind({}) };

packages/components/src/button/index.ts

@@ -15,6 +15,7 @@ import { buttonStyles as styles } from './button.styles.js';
  */
 export type ButtonAppearance =
   | 'accent'
+  | 'error'
   | 'lightweight'
   | 'neutral'
   | 'outline'

packages/components/src/checkbox/checkbox.stories.ts

@@ -1,73 +1,96 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-import type { StoryFn, Meta, StoryObj } from '@storybook/html';
+import type { Meta, StoryFn, StoryObj } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
 import { Checkbox } from './index';
+import { withForm } from '../utilities/storybook';
 
 export default {
   title: 'Components/Checkbox',
   argTypes: {
     label: { control: 'text' },
-    isChecked: { control: 'boolean' },
-    isDisabled: { control: 'boolean' },
-    isIndeterminate: { control: 'boolean' },
+    checked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    indeterminate: { control: 'boolean' },
+    errorMessage: { control: 'text' },
+    inForm: { control: 'boolean' },
     onChange: {
       action: 'changed',
       table: {
         disable: true
       }
+    },
+    onInvalid: {
+      action: 'invalid',
+      table: {
+        disable: true
+      }
     }
-  }
+  },
+  decorators: [withForm]
 } as Meta;
 
 const Template: StoryFn = (args): HTMLElement => {
   const container = document.createElement('div');
   container.insertAdjacentHTML(
     'afterbegin',
     `<jp-checkbox 
-      ${args.isChecked ? 'checked' : ''}
-      ${args.isDisabled ? 'disabled' : ''}
+      ${args.checked ? 'checked' : ''}
+      ${args.disabled ? 'disabled' : ''}
+      ${args.errorMessage ? `error-message="${args.errorMessage}"` : ''}
     >
       ${args.label}
     </jp-checkbox>`
   );
 
   const checkbox = container.firstChild as Checkbox;
 
-  if (args.isIndeterminate) {
+  if (args.indeterminate) {
     checkbox.indeterminate = true;
   }
 
   if (args.onChange) {
     checkbox.addEventListener('change', args.onChange);
   }
+  if (args.onInvalid) {
+    checkbox.addEventListener('invalid', args.onInvalid);
+  }
 
   return checkbox;
 };
 
 export const Default: StoryObj = { render: Template.bind({}) };
 Default.args = {
   label: 'Checkbox',
-  isChecked: false,
-  isDisabled: false,
-  isIndeterminate: false,
-  onChange: action('checkbox-onchange')
+  checked: false,
+  disabled: false,
+  indeterminate: false,
+  errorMessage: '',
+  onChange: action('change'),
+  onInvalid: action('invalid'),
+  inForm: false
 };
 
 export const WithChecked: StoryObj = { render: Template.bind({}) };
 WithChecked.args = {
   ...Default.args,
-  isChecked: true
+  checked: true
 };
 
 export const WithDisabled: StoryObj = { render: Template.bind({}) };
 WithDisabled.args = {
   ...Default.args,
-  isDisabled: true
+  disabled: true
 };
 
 export const WithIndeterminate: StoryObj = { render: Template.bind({}) };
 WithIndeterminate.args = {
   ...Default.args,
-  isIndeterminate: true
+  indeterminate: true
+};
+
+export const WithError: StoryObj = { render: Template.bind({}) };
+WithError.args = {
+  ...Default.args,
+  errorMessage: 'Invalid checkbox value'
 };

packages/components/src/checkbox/checkbox.styles.ts

@@ -21,6 +21,10 @@ import {
   controlCornerRadius,
   designUnit,
   disabledOpacity,
+  errorFillActive,
+  errorFillFocus,
+  errorFillHover,
+  errorFillRest,
   focusStrokeWidth,
   foregroundOnAccentActive,
   foregroundOnAccentHover,
@@ -68,6 +72,10 @@ export const checkboxStyles: FoundationElementTemplate<
       cursor: pointer;
     }
 
+    :host(.invalid) .control {
+      border-color: ${errorFillRest};
+    }
+
     .label {
       font-family: ${bodyFont};
       color: ${neutralForegroundRest};
@@ -116,11 +124,23 @@ export const checkboxStyles: FoundationElementTemplate<
       border-color: ${neutralStrokeActive};
     }
 
+    :host(.invalid:not([disabled])) .control:hover {
+      border-color: ${errorFillHover};
+    }
+
+    :host(.invalid:not([disabled])) .control:active {
+      border-color: ${errorFillActive};
+    }
+
     :host(:${focusVisible}) .control {
       outline: calc(${focusStrokeWidth} * 1px) solid ${accentFillFocus};
       outline-offset: 2px;
     }
 
+    :host(.invalid:${focusVisible}) .control {
+      outline-color: ${errorFillFocus};
+    }
+
     :host([aria-checked='true']) .control {
       background: ${accentFillRest};
       border: calc(${strokeWidth} * 1px) solid ${accentFillRest};
@@ -131,6 +151,16 @@ export const checkboxStyles: FoundationElementTemplate<
       border: calc(${strokeWidth} * 1px) solid ${accentFillHover};
     }
 
+    :host(.invalid[aria-checked='true']) .control {
+      background-color: ${errorFillRest};
+      border-color: ${errorFillRest};
+    }
+
+    :host(.invalid[aria-checked='true']:not([disabled])) .control:hover {
+      background-color: ${errorFillHover};
+      border-color: ${errorFillHover};
+    }
+
     :host([aria-checked='true']:not([disabled]))
       .control:hover
       .checked-indicator {
@@ -148,6 +178,11 @@ export const checkboxStyles: FoundationElementTemplate<
       border: calc(${strokeWidth} * 1px) solid ${accentFillActive};
     }
 
+    :host(.invalid[aria-checked='true']:not([disabled])) .control:active {
+      background-color: ${errorFillActive};
+      border-color: ${errorFillActive};
+    }
+
     :host([aria-checked='true']:not([disabled]))
       .control:active
       .checked-indicator {
@@ -165,6 +200,10 @@ export const checkboxStyles: FoundationElementTemplate<
       outline-offset: 2px;
     }
 
+    :host(.invalid[aria-checked="true"]:${focusVisible}:not([disabled])) .control {
+      outline-color: ${errorFillFocus};
+    }
+
     :host([disabled]) .label,
     :host([readonly]) .label,
     :host([readonly]) .control,
@@ -187,6 +226,9 @@ export const checkboxStyles: FoundationElementTemplate<
         border-color: ${SystemColors.FieldText};
         background: ${SystemColors.Field};
       }
+      :host(.invalid) .control {
+        border-style: dashed;
+      }
       .checked-indicator {
         fill: ${SystemColors.FieldText};
       }

packages/components/src/checkbox/checkbox.test.ts

@@ -34,3 +34,11 @@ test('Indeterminate', async ({ page }) => {
     'checkbox-indeterminate.png'
   );
 });
+
+test('Error', async ({ page }) => {
+  await page.goto('/iframe.html?id=components-checkbox--with-error');
+
+  expect(await page.locator('jp-checkbox').screenshot()).toMatchSnapshot(
+    'checkbox-error.png'
+  );
+});