Merge branch 'master' into multiselect-a11y

carbon-design-system · Jan 21, 2020 · 4636064 · 4636064
2 parents 806d162 + 8799d8e
commit 4636064
Show file tree

Hide file tree

Showing 15 changed files with 100 additions and 15 deletions.
diff --git a/packages/components/src/components/list/_list.scss b/packages/components/src/components/list/_list.scss
@@ -46,8 +46,21 @@
     margin-top: 0;
   }
 
-  .#{$prefix}--list--ordered {
-    list-style-type: decimal;
+  .#{$prefix}--list--ordered:not(.#{$prefix}--list--nested) {
+    counter-reset: item;
+  }
+
+  .#{$prefix}--list--ordered:not(.#{$prefix}--list--nested)
+    > .#{$prefix}--list__item {
+    position: relative;
+  }
+
+  .#{$prefix}--list--ordered:not(.#{$prefix}--list--nested)
+    > .#{$prefix}--list__item::before {
+    content: counter(item) '.';
+    counter-increment: item;
+    position: absolute;
+    left: rem(-24px);
   }
 
   .#{$prefix}--list--ordered.#{$prefix}--list--nested {

diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss
@@ -44,6 +44,14 @@
     }
   }
 
+  .#{$prefix}--text-input--large {
+    height: rem(48px);
+  }
+
+  .#{$prefix}--text-input--small {
+    height: rem(32px);
+  }
+
   .#{$prefix}--password-input {
     padding-right: $carbon--spacing-08;
   }

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.js b/packages/react/src/components/Breadcrumb/Breadcrumb.js
@@ -17,6 +17,7 @@ const Breadcrumb = ({
   children,
   className: customClassNameNav,
   noTrailingSlash,
+  ...rest
 }) => {
   const className = cx({
     [`${prefix}--breadcrumb`]: true,
@@ -26,7 +27,8 @@ const Breadcrumb = ({
   return (
     <nav
       className={customClassNameNav}
-      aria-label={ariaLabel ? ariaLabel : 'Breadcrumb'}>
+      aria-label={ariaLabel ? ariaLabel : 'Breadcrumb'}
+      {...rest}>
       <ol className={className}>{children}</ol>
     </nav>
   );

diff --git a/packages/react/src/components/DataTable/TableBatchActions.js b/packages/react/src/components/DataTable/TableBatchActions.js
@@ -50,6 +50,7 @@ const TableBatchActions = ({
         {children}
         <Button
           className={`${prefix}--batch-summary__cancel`}
+          tabIndex={shouldShowBatchActions ? 0 : -1}
           onClick={onCancel}>
           {t('carbon.table.batch.cancel')}
         </Button>

diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.js b/packages/react/src/components/DataTable/TableToolbarSearch.js
@@ -36,6 +36,7 @@ const TableToolbarSearch = ({
   persistent,
   persistant,
   id,
+  tabIndex,
   ...rest
 }) => {
   const { current: controlled } = useRef(expandedProp !== undefined);
@@ -79,7 +80,7 @@ const TableToolbarSearch = ({
 
   return (
     <div
-      tabIndex={expandedState ? '-1' : '0'}
+      tabIndex={expandedState ? '-1' : tabIndex}
       role="search"
       ref={searchRef}
       onClick={event => handleExpand(event, true)}
@@ -88,6 +89,7 @@ const TableToolbarSearch = ({
       className={searchContainerClasses}>
       <Search
         size="sm"
+        tabIndex={expandedState ? tabIndex : '-1'}
         className={className}
         defaultValue={defaultValue}
         value={value}
@@ -147,6 +149,11 @@ TableToolbarSearch.propTypes = {
    */
   translateWithId: PropTypes.func.isRequired,
 
+  /**
+   * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
+   */
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /**
    * Whether the search should be allowed to expand
    */
@@ -158,6 +165,7 @@ TableToolbarSearch.propTypes = {
 };
 
 TableToolbarSearch.defaultProps = {
+  tabIndex: '0',
   translateWithId,
   persistent: false,
 };

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -1818,6 +1818,7 @@ exports[`DataTable should render 1`] = `
                   id="custom-id"
                   onChange={[Function]}
                   persistent={true}
+                  tabIndex="0"
                   translateWithId={[Function]}
                 />
                 <TableToolbarMenu
@@ -2185,14 +2186,14 @@ exports[`DataTable should render 1`] = `
                     disabled={false}
                     kind="primary"
                     onClick={[Function]}
-                    tabIndex={0}
+                    tabIndex={-1}
                     type="button"
                   >
                     <button
                       className="bx--batch-summary__cancel bx--btn bx--btn--primary"
                       disabled={false}
                       onClick={[Function]}
-                      tabIndex={0}
+                      tabIndex={-1}
                       type="button"
                     >
                       Cancel
@@ -2221,6 +2222,7 @@ exports[`DataTable should render 1`] = `
                 id="custom-id"
                 onChange={[Function]}
                 persistent={true}
+                tabIndex="0"
                 translateWithId={[Function]}
               >
                 <div
@@ -2239,6 +2241,7 @@ exports[`DataTable should render 1`] = `
                     onChange={[Function]}
                     placeHolderText="Filter table"
                     size="sm"
+                    tabIndex="-1"
                     type="text"
                     value=""
                   >
@@ -2291,6 +2294,7 @@ exports[`DataTable should render 1`] = `
                         onChange={[Function]}
                         placeholder="Filter table"
                         role="searchbox"
+                        tabIndex="-1"
                         type="text"
                         value=""
                       />
@@ -2793,6 +2797,7 @@ exports[`DataTable sticky header should render 1`] = `
                   id="custom-id"
                   onChange={[Function]}
                   persistent={true}
+                  tabIndex="0"
                   translateWithId={[Function]}
                 />
                 <TableToolbarMenu
@@ -3163,14 +3168,14 @@ exports[`DataTable sticky header should render 1`] = `
                     disabled={false}
                     kind="primary"
                     onClick={[Function]}
-                    tabIndex={0}
+                    tabIndex={-1}
                     type="button"
                   >
                     <button
                       className="bx--batch-summary__cancel bx--btn bx--btn--primary"
                       disabled={false}
                       onClick={[Function]}
-                      tabIndex={0}
+                      tabIndex={-1}
                       type="button"
                     >
                       Cancel
@@ -3199,6 +3204,7 @@ exports[`DataTable sticky header should render 1`] = `
                 id="custom-id"
                 onChange={[Function]}
                 persistent={true}
+                tabIndex="0"
                 translateWithId={[Function]}
               >
                 <div
@@ -3217,6 +3223,7 @@ exports[`DataTable sticky header should render 1`] = `
                     onChange={[Function]}
                     placeHolderText="Filter table"
                     size="sm"
+                    tabIndex="-1"
                     type="text"
                     value=""
                   >
@@ -3269,6 +3276,7 @@ exports[`DataTable sticky header should render 1`] = `
                         onChange={[Function]}
                         placeholder="Filter table"
                         role="searchbox"
+                        tabIndex="-1"
                         type="text"
                         value=""
                       />

diff --git a/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap b/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap
@@ -20,14 +20,14 @@ exports[`DataTable.TableBatchActions should render 1`] = `
           disabled={false}
           kind="primary"
           onClick={[MockFunction]}
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <button
             className="bx--batch-summary__cancel bx--btn bx--btn--primary"
             disabled={false}
             onClick={[MockFunction]}
-            tabIndex={0}
+            tabIndex={-1}
             type="button"
           >
             Cancel

diff --git a/...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
@@ -6,6 +6,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
   id="custom-id"
   onChange={[MockFunction]}
   persistent={false}
+  tabIndex="0"
   translateWithId={[Function]}
 >
   <div
@@ -25,6 +26,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
       onChange={[Function]}
       placeHolderText="Filter table"
       size="sm"
+      tabIndex="-1"
       type="text"
       value=""
     >
@@ -77,6 +79,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
           onChange={[Function]}
           placeholder="Filter table"
           role="searchbox"
+          tabIndex="-1"
           type="text"
           value=""
         />

diff --git a/packages/react/src/components/DataTable/stories/with-batch-actions.js b/packages/react/src/components/DataTable/stories/with-batch-actions.js
@@ -59,24 +59,31 @@ export default props => (
         <TableToolbar>
           <TableBatchActions {...getBatchActionProps()}>
             <TableBatchAction
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
               renderIcon={Delete}
               onClick={batchActionClick(selectedRows)}>
               Delete
             </TableBatchAction>
             <TableBatchAction
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
               renderIcon={Save}
               onClick={batchActionClick(selectedRows)}>
               Save
             </TableBatchAction>
             <TableBatchAction
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
               renderIcon={Download}
               onClick={batchActionClick(selectedRows)}>
               Download
             </TableBatchAction>
           </TableBatchActions>
           <TableToolbarContent>
-            <TableToolbarSearch onChange={onInputChange} />
-            <TableToolbarMenu>
+            <TableToolbarSearch
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
+              onChange={onInputChange}
+            />
+            <TableToolbarMenu
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}>
               <TableToolbarAction primaryFocus onClick={() => alert('Alert 1')}>
                 Action 1
               </TableToolbarAction>
@@ -87,7 +94,11 @@ export default props => (
                 Action 3
               </TableToolbarAction>
             </TableToolbarMenu>
-            <Button onClick={action('Add new row')} size="small" kind="primary">
+            <Button
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
+              onClick={action('Add new row')}
+              size="small"
+              kind="primary">
               Add new
             </Button>
           </TableToolbarContent>

diff --git a/packages/react/src/components/Pagination/Pagination.js b/packages/react/src/components/Pagination/Pagination.js
@@ -311,7 +311,7 @@ export default class Pagination extends Component {
         <div className={`${prefix}--pagination__right`}>
           {pageInputDisabled ? null : (
             <Select
-              id={`${prefix}-pagination-select-${inputId + 2}`}
+              id={`${prefix}-pagination-select-${inputId}-right`}
               className={`${prefix}--select__page-number`}
               labelText={`Page number, of ${totalPages} pages`}
               inline

diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
@@ -58,7 +58,7 @@ const TabContentRenderedOnlyWhenSelected = ({
   ...other
 }) =>
   !selected ? (
-    <div {...other} ciassName="bx--visually-hidden" />
+    <div {...other} className={`${prefix}--visually-hidden`} />
   ) : (
     <div
       {...other}

diff --git a/packages/react/src/components/TextInput/ControlledPasswordInput.js b/packages/react/src/components/TextInput/ControlledPasswordInput.js
@@ -25,6 +25,7 @@ const ControlledPasswordInput = React.forwardRef(
       togglePasswordVisibility,
       tooltipPosition = 'bottom',
       tooltipAlignment = 'center',
+      size,
       ...other
     },
     ref
@@ -37,6 +38,7 @@ const ControlledPasswordInput = React.forwardRef(
       {
         [`${prefix}--text-input--light`]: light,
         [`${prefix}--text-input--invalid`]: invalid,
+        [`${prefix}--text-input--${size}`]: size,
       }
     );
     const sharedTextInputProps = {
@@ -218,6 +220,11 @@ ControlledPasswordInput.propTypes = {
    * Can be one of: start, center, or end.
    */
   tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
+
+  /**
+   * Specify the size of the Text Input. Currently supports either `small` or `large` as an option. If omitted, defaults to standard size
+   */
+  size: PropTypes.string,
 };
 
 ControlledPasswordInput.defaultProps = {
@@ -229,6 +236,7 @@ ControlledPasswordInput.defaultProps = {
   invalidText: '',
   helperText: '',
   light: false,
+  size: '',
 };
 
 export default ControlledPasswordInput;
diff --git a/packages/react/src/components/TextInput/PasswordInput.js b/packages/react/src/components/TextInput/PasswordInput.js
@@ -23,6 +23,7 @@ export default function PasswordInput({
   tooltipAlignment = 'center',
   hidePasswordLabel = 'Hide password',
   showPasswordLabel = 'Show password',
+  size,
   ...other
 }) {
   const [inputType, setInputType] = useState('password');
@@ -36,6 +37,7 @@ export default function PasswordInput({
     {
       [`${prefix}--text-input--light`]: light,
       [`${prefix}--text-input--invalid`]: invalid,
+      [`${prefix}--text-input--${size}`]: size,
     }
   );
   const sharedTextInputProps = {
@@ -223,6 +225,11 @@ PasswordInput.propTypes = {
    * "Show password" tooltip text on password visibility toggle
    */
   showPasswordLabel: PropTypes.string,
+
+  /**
+   * Specify the size of the Text Input. Currently supports either `small` or `large` as an option. If omitted, defaults to standard size
+   */
+  size: PropTypes.string,
 };
 
 PasswordInput.defaultProps = {
@@ -234,4 +241,5 @@ PasswordInput.defaultProps = {
   invalidText: '',
   helperText: '',
   light: false,
+  size: '',
 };