Merge pull request #84 from jupyterlab-contrib/ft/add-error-msg

Add invalid styling for inputs

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,93 @@
 // 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';
 
 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' },
+    ariaInvalid: { control: 'boolean' },
     onChange: {
       action: 'changed',
       table: {
         disable: true
       }
+    },
+    onInvalid: {
+      action: 'invalid',
+      table: {
+        disable: true
+      }
     }
-  }
+  },
+  decorators: []
 } 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.ariaInvalid ? `aria-invalid="${args.ariaInvalid}"` : ''}
     >
       ${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,
+  ariaInvalid: false,
+  onChange: action('change'),
+  onInvalid: action('invalid')
 };
 
 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,
+  ariaInvalid: true
 };

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([aria-invalid='true']) .control {
+      border-color: ${errorFillRest};
+    }
+
     .label {
       font-family: ${bodyFont};
       color: ${neutralForegroundRest};
@@ -116,11 +124,23 @@ export const checkboxStyles: FoundationElementTemplate<
       border-color: ${neutralStrokeActive};
     }
 
+    :host([aria-invalid='true']:not([disabled])) .control:hover {
+      border-color: ${errorFillHover};
+    }
+
+    :host([aria-invalid='true']:not([disabled])) .control:active {
+      border-color: ${errorFillActive};
+    }
+
     :host(:${focusVisible}) .control {
       outline: calc(${focusStrokeWidth} * 1px) solid ${accentFillFocus};
       outline-offset: 2px;
     }
 
+    :host([aria-invalid='true']:${focusVisible}) .control {
+      outline-color: ${errorFillFocus};
+    }
+
     :host([aria-checked='true']) .control {
       background: ${accentFillRest};
       border: calc(${strokeWidth} * 1px) solid ${accentFillRest};
@@ -131,6 +151,17 @@ export const checkboxStyles: FoundationElementTemplate<
       border: calc(${strokeWidth} * 1px) solid ${accentFillHover};
     }
 
+    :host([aria-invalid='true'][aria-checked='true']) .control {
+      background-color: ${errorFillRest};
+      border-color: ${errorFillRest};
+    }
+
+    :host([aria-invalid='true'][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 +179,12 @@ export const checkboxStyles: FoundationElementTemplate<
       border: calc(${strokeWidth} * 1px) solid ${accentFillActive};
     }
 
+    :host([aria-invalid='true'][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 +202,10 @@ export const checkboxStyles: FoundationElementTemplate<
       outline-offset: 2px;
     }
 
+    :host([aria-invalid='true'][aria-checked="true"]:${focusVisible}:not([disabled])) .control {
+      outline-color: ${errorFillFocus};
+    }
+
     :host([disabled]) .label,
     :host([readonly]) .label,
     :host([readonly]) .control,
@@ -187,6 +228,9 @@ export const checkboxStyles: FoundationElementTemplate<
         border-color: ${SystemColors.FieldText};
         background: ${SystemColors.Field};
       }
+      :host([aria-invalid='true']) .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'
+  );
+});