Support SLDS2

src/scripts/Badge.tsx

@@ -5,16 +5,25 @@ import classnames from 'classnames';
  *
  */
 export type BadgeProps = {
-  type?: 'default' | 'shade' | 'inverse';
+  type?: 'inverse' | 'lightest' | 'success' | 'warning' | 'error';
   label?: string;
 } & HTMLAttributes<HTMLSpanElement>;
 
 /**
  *
  */
 export const Badge: FC<BadgeProps> = ({ type, label, ...props }) => {
-  const typeClassName = type ? `slds-theme_${type}` : null;
-  const badgeClassNames = classnames('slds-badge', typeClassName);
+  const typeClassName = /^(inverse|lightest)$/.test(type ?? '')
+    ? `slds-badge_${type}`
+    : null;
+  const themeClassName = /^(success|warning|error)$/.test(type ?? '')
+    ? `slds-theme_${type}`
+    : null;
+  const badgeClassNames = classnames(
+    'slds-badge',
+    typeClassName,
+    themeClassName
+  );
   return (
     <span className={badgeClassNames} {...props}>
       {label || props.children}

src/scripts/BreadCrumbs.tsx

@@ -18,10 +18,7 @@ export const Crumb: FC<CrumbProps> = ({
   ...props
 }) => {
   const text = children;
-  const cClassName = classnames(
-    'slds-list__item slds-text-heading_label',
-    className
-  );
+  const cClassName = classnames('slds-breadcrumb__item', className);
 
   return (
     <li {...props} className={cClassName}>
@@ -33,34 +30,26 @@ export const Crumb: FC<CrumbProps> = ({
 /**
  *
  */
-export type BreadCrumbsProps = {
-  label?: string;
-} & HTMLAttributes<HTMLElement>;
+export type BreadCrumbsProps = HTMLAttributes<HTMLElement>;
 
 /**
  *
  */
 export const BreadCrumbs: FC<BreadCrumbsProps> = ({
-  label,
   className,
   children,
   ...props
 }) => {
   const oClassName = classnames(
-    'slds-breadcrumb slds-list_horizontal',
+    'slds-breadcrumb',
+    'slds-list_horizontal',
+    'slds-wrap',
     className
   );
 
   return (
-    <nav {...props} role='navigation'>
-      {label ? (
-        <p id='bread-crumb-label' className='slds-assistive-text'>
-          {label}
-        </p>
-      ) : null}
-      <ol className={oClassName} aria-labelledby='bread-crumb-label'>
-        {children}
-      </ol>
+    <nav {...props} role='navigation' aria-label='Breadcrumbs'>
+      <ol className={oClassName}>{children}</ol>
     </nav>
   );
 };

src/scripts/Button.tsx

@@ -1,13 +1,16 @@
 import React, { FC, ReactNode, ButtonHTMLAttributes, Ref, useRef } from 'react';
 import classnames from 'classnames';
-import { Icon } from './Icon';
+import { SvgIcon, IconCategory } from './Icon';
 import { Spinner } from './Spinner';
 import { useEventCallback, useMergeRefs } from './hooks';
 
 export type ButtonType =
   | 'neutral'
   | 'brand'
+  | 'outline-brand'
   | 'destructive'
+  | 'text-destructive'
+  | 'success'
   | 'inverse'
   | 'icon'
   | 'icon-bare'
@@ -31,6 +34,7 @@ export type ButtonIconMoreSize = 'x-small' | 'small' | 'medium' | 'large';
  */
 export type ButtonIconProps = {
   className?: string;
+  category?: IconCategory;
   icon: string;
   align?: ButtonIconAlign;
   size?: ButtonIconSize;
@@ -43,9 +47,9 @@ export type ButtonIconProps = {
  */
 export const ButtonIcon: FC<ButtonIconProps> = ({
   icon,
+  category = 'utility',
   align,
   size,
-  inverse,
   className,
   style,
   ...props
@@ -56,19 +60,22 @@ export const ButtonIcon: FC<ButtonIconProps> = ({
       : null;
   const sizeClassName =
     size && ICON_SIZES.indexOf(size) >= 0 ? `slds-button__icon_${size}` : null;
-  const inverseClassName = inverse ? 'slds-button__icon_inverse' : null;
   const iconClassNames = classnames(
     'slds-button__icon',
     alignClassName,
     sizeClassName,
-    inverseClassName,
     className
   );
+
+  if (icon.indexOf(':') > 0) {
+    [category, icon] = icon.split(':') as [IconCategory, string];
+  }
+
   return (
-    <Icon
+    <SvgIcon
       className={iconClassNames}
       icon={icon}
-      textColor={null}
+      category={category}
       pointerEvents='none'
       style={style}
       {...props}
@@ -118,6 +125,7 @@ export const Button: FC<ButtonProps> = (props) => {
     buttonRef: buttonRef_,
     iconMoreSize: iconMoreSize_,
     onClick: onClick_,
+    tabIndex,
     ...rprops
   } = props;
 
@@ -135,19 +143,24 @@ export const Button: FC<ButtonProps> = (props) => {
     onClick_?.(e);
   });
 
+  const content = children || label;
+  const isIconOnly = type && /^icon-/.test(type) && icon && !content;
+
   const typeClassName = type ? `slds-button_${type}` : null;
   const btnClassNames = classnames(className, 'slds-button', typeClassName, {
     'slds-is-selected': selected,
+    ['slds-button_icon']: /^icon-/.test(type ?? ''),
     [`slds-button_icon-${size ?? ''}`]:
       /^(x-small|small)$/.test(size ?? '') && /^icon-/.test(type ?? ''),
   });
 
-  const buttonContent = (
-    // eslint-disable-next-line react/button-has-type
+  return (
     <button
       ref={buttonRef}
       className={btnClassNames}
       type={htmlType}
+      title={isIconOnly || alt ? alt ?? icon : undefined}
+      tabIndex={tabIndex ?? -1}
       {...rprops}
       onClick={onClick}
     >
@@ -159,7 +172,7 @@ export const Button: FC<ButtonProps> = (props) => {
           inverse={inverse}
         />
       ) : undefined}
-      {children || label}
+      {content}
       {icon && iconAlign === 'right' ? (
         <ButtonIcon
           icon={icon}
@@ -171,22 +184,10 @@ export const Button: FC<ButtonProps> = (props) => {
       {iconMore ? (
         <ButtonIcon icon={iconMore} align='right' size={iconMoreSize} />
       ) : undefined}
-      {alt ? <span className='slds-assistive-text'>{alt}</span> : undefined}
+      {isIconOnly || alt ? (
+        <span className='slds-assistive-text'>{alt ?? icon}</span>
+      ) : undefined}
       {loading ? <Spinner /> : undefined}
     </button>
   );
-
-  if (props.tabIndex != null) {
-    return (
-      <span
-        className='react-slds-button-focus-wrapper'
-        style={{ outline: 0 }}
-        tabIndex={-1}
-      >
-        {buttonContent}
-      </span>
-    );
-  }
-
-  return buttonContent;
 };

src/scripts/Checkbox.tsx

@@ -2,11 +2,12 @@ import React, {
   FC,
   InputHTMLAttributes,
   Ref,
+  useId,
   useContext,
   ReactNode,
 } from 'react';
 import classnames from 'classnames';
-import { FormElement, FormElementProps } from './FormElement';
+import { FormElement } from './FormElement';
 import { CheckboxGroupContext, CheckboxValueType } from './CheckboxGroup';
 
 /**
@@ -15,7 +16,6 @@ import { CheckboxGroupContext, CheckboxValueType } from './CheckboxGroup';
 export type CheckboxProps = {
   label?: string;
   required?: boolean;
-  error?: FormElementProps['error'];
   cols?: number;
   name?: string;
   value?: CheckboxValueType;
@@ -33,10 +33,10 @@ export type CheckboxProps = {
 export const Checkbox: FC<CheckboxProps> = (props) => {
   const {
     type, // eslint-disable-line @typescript-eslint/no-unused-vars
+    id: id_,
     className,
     label,
     required,
-    error,
     cols,
     tooltip,
     tooltipIcon,
@@ -45,22 +45,35 @@ export const Checkbox: FC<CheckboxProps> = (props) => {
     children,
     ...rprops
   } = props;
-  const { grouped } = useContext(CheckboxGroupContext);
+
+  const prefix = useId();
+  const id = id_ ?? `${prefix}-id`;
+
+  const { grouped, error, errorId } = useContext(CheckboxGroupContext);
   const formElemProps = {
     required,
     error,
+    errorId,
     cols,
     tooltip,
     tooltipIcon,
     elementRef,
   };
   const checkClassNames = classnames(className, 'slds-checkbox');
   const check = (
-    <label className={checkClassNames}>
-      <input ref={inputRef} type='checkbox' {...rprops} />
-      <span className='slds-checkbox_faux' />
-      <span className='slds-form-element__label'>{label || children}</span>
-    </label>
+    <div className={checkClassNames}>
+      <input
+        ref={inputRef}
+        type='checkbox'
+        {...rprops}
+        id={id}
+        aria-describedby={error ? errorId : undefined}
+      />
+      <label className='slds-checkbox__label' htmlFor={id}>
+        <span className='slds-checkbox_faux' />
+        <span className='slds-form-element__label'>{label || children}</span>
+      </label>
+    </div>
   );
   return grouped ? (
     check

src/scripts/CheckboxGroup.tsx

@@ -1,4 +1,5 @@
 import React, {
+  useId,
   createContext,
   FieldsetHTMLAttributes,
   Ref,
@@ -23,7 +24,11 @@ export type CheckboxValueType = string | number;
 /**
  *
  */
-export const CheckboxGroupContext = createContext<{ grouped?: boolean }>({});
+export const CheckboxGroupContext = createContext<{
+  grouped?: boolean;
+  error?: FormElementProps['error'];
+  errorId?: string;
+}>({});
 
 /**
  *
@@ -107,19 +112,25 @@ export const CheckboxGroup = createFC<
         ? error.message
         : undefined
       : undefined;
-    const grpCtx = useMemo(() => ({ grouped: true }), []);
+
+    const errorId = useId();
+    const grpCtx = useMemo(
+      () => ({ grouped: true, error, errorId }),
+      [error, errorId]
+    );
 
     return (
       <fieldset
         ref={elementRef}
         className={grpClassNames}
         style={grpStyles}
+        aria-required={required}
         {...rprops}
         onChange={onChange}
       >
         <legend className='slds-form-element__label'>
           {required ? (
-            <abbr className='slds-required' title='required'>
+            <abbr className='slds-required' title='required' aria-hidden='true'>
               *
             </abbr>
           ) : undefined}
@@ -135,7 +146,12 @@ export const CheckboxGroup = createFC<
             {children}
           </CheckboxGroupContext.Provider>
           {errorMessage ? (
-            <div className='slds-form-element__help'>{errorMessage}</div>
+            <div
+              className='slds-form-element__help'
+              id={error ? errorId : undefined}
+            >
+              {errorMessage}
+            </div>
           ) : undefined}
         </div>
       </fieldset>

src/scripts/DateInput.tsx

@@ -322,7 +322,7 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
     });
 
     const formElemProps = {
-      id,
+      controlId: id,
       cols,
       label,
       required,
@@ -333,7 +333,16 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
     };
     return (
       <FormElement {...formElemProps}>
-        <div className={classnames(className, 'slds-dropdown-trigger')}>
+        <div
+          className={classnames(
+            className,
+            'slds-dropdown-trigger',
+            'slds-dropdown-trigger_click',
+            {
+              'slds-is-open': opened,
+            }
+          )}
+        >
           <div className='slds-input-has-icon slds-input-has-icon_right'>
             <Input
               inputRef={inputRef}