Merge branch 'support-slds-2' into support-slds-2-form-element-field-set

Author: msmx-mnakagawa

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}

src/scripts/Modal.tsx

@@ -1,67 +1,30 @@
-import React, {
-  HTMLAttributes,
-  CSSProperties,
-  FC,
-  createContext,
-  useContext,
-  useMemo,
-  ReactNode,
-} from 'react';
+import React, { HTMLAttributes, CSSProperties, FC, ReactNode } from 'react';
 import classnames from 'classnames';
 import { Button } from './Button';
+import { Text } from './Text';
 import { useEventCallback } from './hooks';
 
-/**
- *
- */
-const ModalHandlersContext = createContext<{
-  onHide?: () => void;
-}>({});
-
 /**
  *
  */
 export type ModalHeaderProps = {
   className?: string;
   title?: string;
   tagline?: string;
-  closeButton?: boolean;
-  onClose?: () => void;
 };
 
 /**
  *
  */
 export const ModalHeader: FC<ModalHeaderProps> = (props) => {
-  const {
-    className,
-    title,
-    tagline,
-    closeButton,
-    onClose: onClose_,
-    ...rprops
-  } = props;
-  const { onHide: onHideModal } = useContext(ModalHandlersContext);
-  const onClose = useEventCallback(() => {
-    onClose_?.();
-    onHideModal?.();
-  });
+  const { className, title, tagline, ...rprops } = props;
   const hdClassNames = classnames(className, 'slds-modal__header');
   return (
     <div className={hdClassNames} {...rprops}>
-      <h2 className='slds-text-heading_medium'>{title}</h2>
+      <Text tag='h2' category='heading' type='medium' tabIndex={-1}>
+        {title}
+      </Text>
       {tagline ? <p className='slds-m-top_x-small'>{tagline}</p> : null}
-      {closeButton ? (
-        <Button
-          type='icon-inverse'
-          className='slds-modal__close'
-          icon='close'
-          iconSize='large'
-          alt='Close'
-          inverse
-          onClick={onClose}
-        />
-      ) : null}
     </div>
   );
 };
@@ -128,6 +91,8 @@ export type ModalProps = {
   opened?: boolean;
   containerStyle?: CSSProperties;
   onHide?: () => void;
+  closeButton?: boolean;
+  onClose?: () => void;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
@@ -141,6 +106,8 @@ const Modal_: FC<ModalProps> = (props) => {
     size,
     containerStyle,
     onHide,
+    closeButton,
+    onClose: onClose_,
     ...rprops
   } = props;
   const modalClassNames = classnames(className, 'slds-modal', {
@@ -150,21 +117,37 @@ const Modal_: FC<ModalProps> = (props) => {
   const backdropClassNames = classnames(className, 'slds-backdrop', {
     'slds-backdrop_open': opened,
   });
-  const handlers = useMemo(() => ({ onHide }), [onHide]);
+  const onClose = useEventCallback(() => {
+    onClose_?.();
+    onHide?.();
+  });
   return (
-    <ModalHandlersContext.Provider value={handlers}>
-      <div
+    <>
+      <section
         className={modalClassNames}
         aria-hidden={!opened}
         role='dialog'
+        tabIndex={-1}
+        aria-modal='true'
         {...rprops}
       >
         <div className='slds-modal__container' style={containerStyle}>
+          {closeButton ? (
+            <Button
+              type='icon'
+              className='slds-modal__close'
+              icon='close'
+              iconSize='large'
+              alt='Close'
+              inverse
+              onClick={onClose}
+            />
+          ) : null}
           {children}
         </div>
-      </div>
-      <div className={backdropClassNames} />
-    </ModalHandlersContext.Provider>
+      </section>
+      <div className={backdropClassNames} role='presentation' />
+    </>
   );
 };
 

src/scripts/Popover.tsx

@@ -4,6 +4,7 @@ import React, {
   FC,
   ReactNode,
   forwardRef,
+  useId,
   useEffect,
 } from 'react';
 import classnames from 'classnames';
@@ -70,13 +71,13 @@ export type PopoverProps = {
   bodyStyle?: CSSProperties;
   offsetX?: number;
   offsetY?: number;
-} & HTMLAttributes<HTMLDivElement>;
+} & HTMLAttributes<HTMLElement>;
 
 /**
  *
  */
 export const PopoverInner = forwardRef<
-  HTMLDivElement,
+  HTMLElement,
   PopoverProps & AutoAlignInjectedProps
 >((props, ref) => {
   const {
@@ -117,16 +118,20 @@ export const PopoverInner = forwardRef<
           : undefined
         : undefined,
   };
+  const bodyId = useId();
   return (
-    <div
+    <section
       ref={ref}
       className={popoverClassNames}
       role={tooltip ? 'tooltip' : 'dialog'}
       style={rootStyle}
+      aria-describedby={bodyId}
       {...rprops}
     >
-      <PopoverBody style={bodyStyle}>{children}</PopoverBody>
-    </div>
+      <PopoverBody id={bodyId} style={bodyStyle}>
+        {children}
+      </PopoverBody>
+    </section>
   );
 });
 

src/scripts/Table.tsx

@@ -102,7 +102,7 @@ export const TableRow: FC<TableRowProps> = (props) => {
   }
   const rowClassName = classnames(
     className,
-    header ? 'slds-text-title_caps' : 'slds-hint-parent'
+    header ? 'slds-line-height_reset' : 'slds-hint-parent'
   );
   const style = selected
     ? {
@@ -130,7 +130,7 @@ export type TableHeaderColumnProps = {
   sorted?: boolean;
   align?: 'left' | 'center' | 'right';
   onSort?: () => void;
-} & ThHTMLAttributes<HTMLTableHeaderCellElement>;
+} & ThHTMLAttributes<HTMLTableCellElement>;
 
 /**
  *
@@ -152,7 +152,6 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
   const sortable = typeof sortable_ === 'undefined' ? rowSortable : sortable_;
   const oClassNames = classnames(
     className,
-    'slds-text-title_caps slds-truncate',
     {
       'slds-is-sortable': sortable,
       'slds-is-resizable': resizable,
@@ -165,8 +164,15 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
 
   const icon = sortDir === 'DESC' ? 'arrowdown' : 'arrowup';
 
+  const content = typeof children === 'string' ? children : undefined;
+  const cellContent = (
+    <div className='slds-truncate' title={content}>
+      {children}
+    </div>
+  );
+
   return (
-    <th {...pprops} className={oClassNames} scope='col' style={style}>
+    <th {...pprops} className={oClassNames} style={style}>
       {sortable ? (
         <a
           onClick={(e) => {
@@ -178,24 +184,18 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
           className='slds-th__action slds-text-link_reset'
         >
           <span className='slds-assistive-text'>Sort </span>
-          <span className='slds-truncate'>{children}</span>
+          {cellContent}
           <Icon
+            container
             className='slds-is-sortable__icon'
             textColor='default'
-            container
             size='x-small'
             category='utility'
             icon={icon}
-            style={{ position: 'absolute' }}
-          />
-          <span
-            className='slds-assistive-text'
-            aria-live='assertive'
-            aria-atomic='true'
           />
         </a>
       ) : (
-        children
+        cellContent
       )}
     </th>
   );
@@ -207,23 +207,35 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
 export type TableRowColumnProps = {
   width?: string | number;
   truncate?: boolean;
-} & TdHTMLAttributes<HTMLTableDataCellElement>;
+} & TdHTMLAttributes<HTMLTableCellElement>;
 
 /**
  *
  */
 export const TableRowColumn: FC<TableRowColumnProps> = (props) => {
-  const { truncate = true, className, width, children, ...pprops } = props;
-  const oClassNames = classnames(className, {
-    'slds-truncate': truncate,
-  });
+  const {
+    truncate = true,
+    className: oClassNames,
+    width,
+    children,
+    ...pprops
+  } = props;
   const style: CSSProperties = {};
   if (width !== undefined) style.width = width;
   if (!truncate) style.position = 'static';
 
-  return (
-    <td role='gridcell' style={style} className={oClassNames} {...pprops}>
+  const content = typeof children === 'string' ? children : undefined;
+  const cellContent = truncate ? (
+    <div className='slds-truncate' title={content}>
       {children}
+    </div>
+  ) : (
+    children
+  );
+
+  return (
+    <td style={style} className={oClassNames} {...pprops}>
+      {cellContent}
     </td>
   );
 };
@@ -274,17 +286,15 @@ export const Table: FC<TableProps> = (props) => {
     ...rprops
   } = props;
 
-  const tableClassNames = classnames(
-    className,
-    'slds-table slds-table_cell-buffer',
-    {
-      'slds-table_bordered': bordered,
-      'slds-no-row-hover': noRowHover,
-      'slds-table_striped': striped,
-      'slds-table_fixed-layout': fixedLayout,
-      'slds-table_col-bordered': verticalBorders,
-    }
-  );
+  const tableClassNames = classnames(className, 'slds-table', {
+    'slds-table_bordered': bordered,
+    'slds-no-row-hover': noRowHover,
+    'slds-table_striped': striped,
+    'slds-table_fixed-layout': fixedLayout,
+    'slds-table_resizable-cols': sortable,
+    'slds-table_cell-buffer': !sortable,
+    'slds-table_col-bordered': verticalBorders,
+  });
 
   const style: CSSProperties = { ...style_ };
   if (autoWidth) {