WIP

Author: pomfrida

packages/eds-core-react/src/components/Checkbox/Checkbox.new.stories.tsx

@@ -349,10 +349,14 @@ export const ErrorState: StoryFn<CheckboxProps> = () => {
         onChange={(e: ChangeEvent<HTMLInputElement>) =>
           setChecked(e.target.checked)
         }
-        errorLabel={
-          checked ? undefined : 'You must accept the terms and conditions'
-        }
+        error={!checked}
       />
+      <Typography
+        variant="caption"
+        style={{ marginTop: '0.5rem', color: 'var(--eds-color-text-danger-strong)' }}
+      >
+        {!checked && 'You must accept the terms and conditions'}
+      </Typography>
     </div>
   )
 }
@@ -361,7 +365,7 @@ ErrorState.parameters = {
   docs: {
     description: {
       story:
-        'Error state is shown by providing an `errorLabel` which displays an error message below the checkbox. The error typically disappears when the checkbox is checked. This is commonly used for required fields like accepting terms and conditions.',
+        'Error state is shown by setting the `error` prop to true, which applies red styling to the checkbox. Error messages should be provided by a separate form field component. This is commonly used for required fields like accepting terms and conditions.',
     },
   },
 }

packages/eds-core-react/src/components/Checkbox/Checkbox.new.tsx

@@ -4,7 +4,6 @@ import {
   checkbox,
   checkbox_outline,
   checkbox_indeterminate,
-  warning_outlined,
 } from '@equinor/eds-icons'
 import { TypographyNext } from '../Typography'
 import type { CheckboxProps } from './Checkbox.new.types'
@@ -19,7 +18,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       label,
       disabled = false,
       indeterminate = false,
-      errorLabel,
+      error = false,
       className,
       style,
       labelProps,
@@ -36,25 +35,21 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       }
     }, [indeterminate, inputRef])
 
-    const hasError = !!errorLabel
-
     const wrapperClasses = classNames(
       'checkbox',
       disabled && 'checkbox--disabled',
-      hasError && 'checkbox--error',
+      error && 'checkbox--error',
       className,
     )
 
     const labelClasses = classNames(
       'checkbox__label',
       disabled && 'checkbox__label--disabled',
-      hasError && 'checkbox__label--error',
     )
 
     const iconClasses = classNames(
       'checkbox__icon',
       disabled && 'checkbox__icon--disabled',
-      hasError && 'checkbox__icon--error',
     )
 
     const checkboxInput = (
@@ -63,7 +58,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           type="checkbox"
           aria-checked={indeterminate ? 'mixed' : rest.checked}
           aria-disabled={disabled || undefined}
-          aria-invalid={hasError || undefined}
+          aria-invalid={error || undefined}
           className="checkbox__input"
           disabled={disabled}
           ref={inputRef}
@@ -138,38 +133,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               {label}
             </TypographyNext>
           </span>
-          {errorLabel && (
-            <span className="checkbox__error-label">
-              <svg
-                className="checkbox__error-icon"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-              >
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d={
-                    Array.isArray(warning_outlined.svgPathData)
-                      ? warning_outlined.svgPathData.join(' ')
-                      : warning_outlined.svgPathData
-                  }
-                />
-              </svg>
-              <TypographyNext
-                as="span"
-                family="ui"
-                size="sm"
-                baseline="center"
-                lineHeight="squished"
-                weight="normal"
-                tracking="normal"
-                className="checkbox__error-text"
-              >
-                {errorLabel}
-              </TypographyNext>
-            </span>
-          )}
         </label>
       )
     }

packages/eds-core-react/src/components/Checkbox/Checkbox.new.types.ts

@@ -9,8 +9,8 @@ export type CheckboxProps = {
    * set the native element to indeterminate yourself.
    */
   indeterminate?: boolean
-  /** Error message to display below the checkbox. When set, the checkbox will be in error state. */
-  errorLabel?: string
+  /** If true, the checkbox will be in error state with red styling */
+  error?: boolean
   /** Props to apply to the label element (when label prop is provided) */
   labelProps?: LabelHTMLAttributes<HTMLLabelElement>
 } & InputHTMLAttributes<HTMLInputElement>

packages/eds-core-react/src/components/Checkbox/checkbox.new.css

@@ -10,6 +10,9 @@
   position: relative;
   /* Default hover size */
   --checkbox-hover-size: 40px;
+  /* CSS custom properties for colors - can be overridden externally */
+  --checkbox-icon-color: var(--eds-color-border-accent-strong);
+  --checkbox-hover-color: var(--eds-color-bg-accent-fill-muted-default);
 }
 
 /* Label wrapper contains checkbox + label text */
@@ -35,6 +38,9 @@
 
 .checkbox--error {
   cursor: pointer;
+  /* Override colors for error state */
+  --checkbox-icon-color: var(--eds-color-border-danger-strong);
+  --checkbox-hover-color: var(--eds-color-bg-danger-fill-muted-default);
 }
 
 /* Checkbox input wrapper */
@@ -71,20 +77,14 @@
 
 @media (hover: hover) and (pointer: fine) {
   .checkbox__label-wrapper:hover .checkbox__input-wrapper::before {
-    background-color: var(--eds-color-bg-accent-fill-muted-default);
+    background-color: var(--checkbox-hover-color);
   }
 
   .checkbox--disabled
     .checkbox__label-wrapper:hover
     .checkbox__input-wrapper::before {
     background-color: transparent;
   }
-
-  .checkbox--error
-    .checkbox__label-wrapper:hover
-    .checkbox__input-wrapper::before {
-    background-color: var(--eds-color-bg-danger-fill-muted-default);
-  }
 }
 
 /* Native checkbox input */
@@ -138,7 +138,7 @@
   /* Fixed 24px - standard EDS icon size */
   width: 24px;
   height: 24px;
-  fill: var(--eds-color-border-accent-strong);
+  fill: var(--checkbox-icon-color);
   border-radius: var(--eds-shape-corner-medium);
   position: relative;
   z-index: 2;
@@ -148,9 +148,7 @@
   fill: var(--eds-color-text-neutral-subtle);
 }
 
-.checkbox__icon--error {
-  fill: var(--eds-color-border-danger-strong);
-}
+/* Remove --error modifier, use CSS variable override instead */
 
 /* Icon paths visibility */
 .checkbox__icon-path--checked {
@@ -204,28 +202,3 @@
 .checkbox__label--disabled {
   color: var(--eds-color-text-neutral-subtle);
 }
-
-.checkbox__label--error {
-  color: var(--eds-color-text-neutral-strong);
-}
-
-/* Error label container */
-.checkbox__error-label {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--eds-spacing-inline-2-xs);
-  margin-left: calc(24px + var(--eds-spacing-inline-sm));
-}
-
-/* Error icon */
-.checkbox__error-icon {
-  width: 16px;
-  height: 16px;
-  fill: var(--eds-color-text-danger-strong);
-  flex-shrink: 0;
-}
-
-/* Error text */
-.checkbox__error-text {
-  color: var(--eds-color-text-danger-strong);
-}