Merge branch 'support-slds-2' into support-slds-2-dropdown-menu-dropdown-button

Author: msmx-mnakagawa

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/Checkbox.tsx

@@ -1,4 +1,10 @@
-import React, { FC, InputHTMLAttributes, Ref, useContext } from 'react';
+import React, {
+  FC,
+  InputHTMLAttributes,
+  Ref,
+  useContext,
+  ReactNode,
+} from 'react';
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
 import { CheckboxGroupContext, CheckboxValueType } from './CheckboxGroup';
@@ -15,6 +21,8 @@ export type CheckboxProps = {
   value?: CheckboxValueType;
   checked?: boolean;
   defaultChecked?: boolean;
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
   elementRef?: Ref<HTMLDivElement>;
   inputRef?: Ref<HTMLInputElement>;
 } & InputHTMLAttributes<HTMLInputElement>;
@@ -30,13 +38,22 @@ export const Checkbox: FC<CheckboxProps> = (props) => {
     required,
     error,
     cols,
+    tooltip,
+    tooltipIcon,
     elementRef,
     inputRef,
     children,
     ...rprops
   } = props;
   const { grouped } = useContext(CheckboxGroupContext);
-  const formElemProps = { required, error, cols, elementRef };
+  const formElemProps = {
+    required,
+    error,
+    cols,
+    tooltip,
+    tooltipIcon,
+    elementRef,
+  };
   const checkClassNames = classnames(className, 'slds-checkbox');
   const check = (
     <label className={checkClassNames}>

src/scripts/CheckboxGroup.tsx

@@ -5,10 +5,12 @@ import React, {
   useContext,
   useMemo,
   useRef,
+  ReactNode,
 } from 'react';
 import classnames from 'classnames';
 import { FormElementProps } from './FormElement';
 import { FieldSetColumnContext } from './FieldSet';
+import { TooltipContent } from './TooltipContent';
 import { useEventCallback } from './hooks';
 import { createFC } from './common';
 import { Bivariant } from './typeUtils';
@@ -32,6 +34,8 @@ export type CheckboxGroupProps = {
   error?: FormElementProps['error'];
   name?: string;
   cols?: number;
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
   elementRef?: Ref<HTMLFieldSetElement>;
   onValueChange?: Bivariant<(values: CheckboxValueType[]) => void>;
 } & FieldsetHTMLAttributes<HTMLFieldSetElement>;
@@ -51,6 +55,8 @@ export const CheckboxGroup = createFC<
       style,
       required,
       error,
+      tooltip,
+      tooltipIcon,
       elementRef,
       onValueChange,
       onChange: onChange_,
@@ -118,6 +124,11 @@ export const CheckboxGroup = createFC<
             </abbr>
           ) : undefined}
           {label}
+          {tooltip ? (
+            <span className='slds-m-left_x-small'>
+              <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
+            </span>
+          ) : null}
         </legend>
         <div className='slds-form-element__control' ref={controlElRef}>
           <CheckboxGroupContext.Provider value={grpCtx}>

src/scripts/DateInput.tsx

@@ -8,6 +8,7 @@ import React, {
   useRef,
   useState,
   useContext,
+  ReactNode,
 } from 'react';
 import classnames from 'classnames';
 import dayjs from 'dayjs';
@@ -118,6 +119,8 @@ export type DateInputProps = {
   minDate?: string;
   maxDate?: string;
   menuAlign?: 'left' | 'right';
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
   elementRef?: Ref<HTMLDivElement>;
   datepickerRef?: Ref<HTMLDivElement>;
   onBlur?: () => void;
@@ -149,6 +152,8 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
       minDate,
       maxDate,
       extensionRenderer,
+      tooltip,
+      tooltipIcon,
       elementRef: elementRef_,
       inputRef: inputRef_,
       datepickerRef: datepickerRef_,
@@ -316,7 +321,16 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
       }
     });
 
-    const formElemProps = { id, cols, label, required, error, elementRef };
+    const formElemProps = {
+      id,
+      cols,
+      label,
+      required,
+      error,
+      tooltip,
+      tooltipIcon,
+      elementRef,
+    };
     return (
       <FormElement {...formElemProps}>
         <div className={classnames(className, 'slds-dropdown-trigger')}>

src/scripts/Grid.tsx

@@ -67,7 +67,7 @@ function adjustCols(colNum: number, large?: boolean) {
  */
 export type ColProps = {
   padded?: boolean | 'medium' | 'large';
-  align?: 'top' | 'medium' | 'bottom';
+  align?: 'top' | 'middle' | 'bottom';
   noFlex?: boolean;
   order?: number;
   orderSmall?: number;

src/scripts/Input.tsx

@@ -7,6 +7,7 @@ import React, {
   useContext,
   Ref,
   useRef,
+  ReactNode,
 } from 'react';
 import classnames from 'classnames';
 import keycoder from 'keycoder';
@@ -92,6 +93,8 @@ export type InputProps = {
   iconRight?: string | JSX.Element;
   addonLeft?: string;
   addonRight?: string;
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
   elementRef?: Ref<HTMLDivElement>;
   inputRef?: Ref<HTMLInputElement>;
   onValueChange?: (value: string, prevValue?: string) => void;
@@ -120,6 +123,8 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
       addonLeft,
       addonRight,
       symbolPattern,
+      tooltip,
+      tooltipIcon,
       elementRef,
       inputRef,
       onKeyDown: onKeyDown_,
@@ -207,6 +212,8 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
         error,
         readOnly,
         cols,
+        tooltip,
+        tooltipIcon,
         elementRef,
       };
       return <FormElement {...formElemProps}>{contentElem}</FormElement>;

src/scripts/Lookup.tsx

@@ -11,6 +11,7 @@ import React, {
   useState,
   useEffect,
   EventHandler,
+  ReactNode,
 } from 'react';
 import classnames from 'classnames';
 import { AutoAlign, AutoAlignInjectedProps, AutoAlignProps } from './AutoAlign';
@@ -571,6 +572,8 @@ export type LookupProps = {
   targetScope?: string;
   defaultTargetScope?: string;
   cols?: number;
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
 
   elementRef?: Ref<HTMLDivElement>;
   inputRef?: Ref<HTMLDivElement>;
@@ -619,6 +622,8 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       listFooter,
       data,
       scopes,
+      tooltip,
+      tooltipIcon,
       onSelect: onSelect_,
       onScopeMenuClick: onScopeMenuClick_,
       onScopeSelect: onScopeSelect_,
@@ -763,7 +768,15 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       { 'slds-has-selection': selected },
       className
     );
-    const formElemProps = { id, cols, label, required, error };
+    const formElemProps = {
+      id,
+      cols,
+      label,
+      required,
+      error,
+      tooltip,
+      tooltipIcon,
+    };
     return (
       <FormElement {...formElemProps}>
         <div

src/scripts/MediaObject.tsx

@@ -7,28 +7,23 @@ import classnames from 'classnames';
 export type MediaObjectProps = {
   figureLeft?: ReactNode;
   figureRight?: ReactNode;
-  figureCenter?: ReactNode;
+  centered?: boolean;
   children?: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
  *
  */
 export const MediaObject: FC<MediaObjectProps> = (props) => {
-  const {
-    className,
-    figureLeft,
-    figureRight,
-    figureCenter,
-    children,
-    ...rprops
-  } = props;
-  const mediaClassNames = classnames('slds-media', className);
+  const { className, figureLeft, figureRight, centered, children, ...rprops } =
+    props;
+  const mediaClassNames = classnames(
+    'slds-media',
+    { 'slds-media_center': centered },
+    className
+  );
   return (
     <div className={mediaClassNames} {...rprops}>
-      {figureCenter ? (
-        <div className='slds-media__figure'>{figureCenter}</div>
-      ) : undefined}
       {figureLeft ? (
         <div className='slds-media__figure'>{figureLeft}</div>
       ) : undefined}