Merge branch 'master' into 6935-overflowmenu-unnecessary-a11y-attrs

carbon-design-system · Oct 8, 2020 · 18dd89c · 18dd89c
2 parents d7af850 + dabc9b5
commit 18dd89c
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 39 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -14755,6 +14755,11 @@ Code snippet styles
     transition: max-height $duration--moderate-01 motion(standard, productive);
   }
 
+  .#{$prefix}--snippet--multi.#{$prefix}--snippet--wraptext pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
   // closed pre
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
     padding-right: $carbon--spacing-08;

diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -179,6 +179,11 @@
     transition: max-height $duration--moderate-01 motion(standard, productive);
   }
 
+  .#{$prefix}--snippet--multi.#{$prefix}--snippet--wraptext pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
   // closed pre
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
     padding-right: $carbon--spacing-08;

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -285,6 +285,7 @@ Map {
       "showLessText": "Show less",
       "showMoreText": "Show more",
       "type": "single",
+      "wrapText": false,
     },
     "propTypes": Object {
       "ariaLabel": Object {
@@ -330,6 +331,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "wrapText": Object {
+        "type": "bool",
+      },
     },
   },
   "ComboBox" => Object {
@@ -4936,7 +4940,6 @@ Map {
   },
   "Tabs" => Object {
     "defaultProps": Object {
-      "role": "navigation",
       "selected": 0,
       "selectionMode": "automatic",
       "type": "default",
@@ -4963,10 +4966,6 @@ Map {
       "onSelectionChange": Object {
         "type": "func",
       },
-      "role": Object {
-        "isRequired": true,
-        "type": "string",
-      },
       "selected": Object {
         "type": "number",
       },

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
@@ -30,12 +30,39 @@ export const inline = () => (
 );
 
 export const multiline = () => (
-  <CodeSnippet type="multi" feedback="Copied to clipboard">
-    {`@mixin grid-container {
-     width: 100%;
-     padding-right: padding(mobile);
-     padding-left: padding(mobile);`}
-  </CodeSnippet>
+  <div style={{ width: '50%' }}>
+    <CodeSnippet {...props()} type="multi" feedback="Copied to clipboard">
+      {`  "scripts": {
+    "build": "lerna run build --stream --prefix --npm-client yarn",
+    "ci-check": "carbon-cli ci-check",
+    "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
+    "doctoc": "doctoc --title '## Table of Contents'",
+    "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
+    "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
+    "lint": "eslint actions config codemods packages",
+    "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
+    "sync": "carbon-cli sync",
+    "test": "cross-env BABEL_ENV=test jest",
+    "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
+  },
+  "resolutions": {
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "react-is": "~16.9.0",
+    "react-test-renderer": "~16.9.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.10.0",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-export-default-from": "^7.7.4",
+    "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.10.0",
+    "@babel/preset-react": "^7.10.0",
+    "@babel/runtime": "^7.10.0",
+    "@commitlint/cli": "^8.3.5",`}
+    </CodeSnippet>
+  </div>
 );
 
 export const singleline = () => (
@@ -85,6 +112,7 @@ const props = () => ({
   onClick: action('onClick'),
   copyButtonDescription: text('Copy button title', 'Copy code snippet'),
   ariaLabel: text('ARIA label', 'Container label'),
+  wrapText: boolean('Wrap text', true),
 });
 
 export const playground = () => (

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -31,6 +31,7 @@ function CodeSnippet({
   showMoreText,
   showLessText,
   hideCopyButton,
+  wrapText,
   ...rest
 }) {
   const [expandedCode, setExpandedCode] = useState(false);
@@ -54,6 +55,7 @@ function CodeSnippet({
     [`${prefix}--snippet--expand`]: expandedCode,
     [`${prefix}--snippet--light`]: light,
     [`${prefix}--snippet--no-copy`]: hideCopyButton,
+    [`${prefix}--snippet--wraptext`]: wrapText,
   });
 
   const expandCodeBtnText = expandedCode ? showLessText : showMoreText;
@@ -185,12 +187,18 @@ CodeSnippet.propTypes = {
    * Provide the type of Code Snippet
    */
   type: PropTypes.oneOf(['single', 'inline', 'multi']),
+
+  /**
+   * Specify whether or not to wrap the text.
+   */
+  wrapText: PropTypes.bool,
 };
 
 CodeSnippet.defaultProps = {
   type: 'single',
   showMoreText: 'Show more',
   showLessText: 'Show less',
+  wrapText: false,
 };
 
 export default CodeSnippet;
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx
@@ -55,7 +55,8 @@ name or similar small piece of code from it's surrounding text.
 
 Multiple line code snippets are used for displaying code with more than one
 line. They're shown in a block and useful for showing classes, functions, blocks
-of styles and the like.
+of styles and the like. There is an option to wrap the lines displayed if the lines 
+are longer than the container.
 
 <Preview>
   <Story id="codesnippet--multiline" />

diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.js b/packages/react/src/components/OverflowMenu/OverflowMenu.js
@@ -506,6 +506,7 @@ class OverflowMenu extends Component {
 
     const wrappedMenuBody = (
       <FloatingMenu
+        focusTrap
         triggerRef={this._triggerRef}
         menuDirection={direction}
         menuOffset={flipped ? menuOffsetFlip : menuOffset}

diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
@@ -35,7 +35,6 @@ const props = {
     className: 'some-class',
     light: boolean('Light variant (light)', false),
     selected: number('The index of the selected tab (selected in <Tabs>)', 1),
-    role: text('ARIA role (role in <Tabs>)', 'navigation'),
     // Disabling action logger for `<Tabs onClick onKeyDown>` for now given it seems to be significantly slowing down Storybook
     // onClick: action('onClick'),
     // onKeyDown: action('onKeyDown'),
@@ -53,7 +52,6 @@ const props = {
   tab: () => ({
     disabled: boolean('Disabled (disabled in <Tab>)', false),
     href: text('The href for tab (href in <Tab>)', '#'),
-    role: text('ARIA role (role in <Tab>)', 'presentation'),
     tabIndex: number('Tab index (tabIndex in <Tab>)', 0),
     onClick: action('onClick'),
     onKeyDown: action('onKeyDown'),

diff --git a/packages/react/src/components/Tabs/Tabs-test.js b/packages/react/src/components/Tabs/Tabs-test.js
@@ -26,16 +26,6 @@ describe('Tabs', () => {
         </Tabs>
       );
 
-      it('renders [role="navigation"] props on wrapping <div> by default', () => {
-        expect(
-          wrapper
-            // TODO: uncomment and replace in next major version
-            // .find(`.${prefix}--tabs`).props().role
-            .find(`.${prefix}--tabs--scrollable .${prefix}--tabs--scrollable`)
-            .props().role
-        ).toEqual('navigation');
-      });
-
       it('renders [role="tablist"] props on <ul> by default', () => {
         expect(wrapper.find('ul').props().role).toEqual('tablist');
       });

diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js
@@ -24,7 +24,7 @@ export default class Tabs extends React.Component {
     children: PropTypes.node,
 
     /**
-     * Provide a className that is applied to the root <nav> component for the
+     * Provide a className that is applied to the root <div> component for the
      * <Tabs>
      */
     className: PropTypes.string,
@@ -58,12 +58,6 @@ export default class Tabs extends React.Component {
      */
     onSelectionChange: PropTypes.func,
 
-    /**
-     * By default, this value is "navigation". You can also provide an alternate
-     * role if it makes sense from the accessibility-side
-     */
-    role: PropTypes.string.isRequired,
-
     /**
      * Optionally provide an index for the currently selected <Tab>
      */
@@ -86,7 +80,6 @@ export default class Tabs extends React.Component {
   };
 
   static defaultProps = {
-    role: 'navigation',
     type: 'default',
     selected: 0,
     selectionMode: 'automatic',
@@ -229,7 +222,7 @@ export default class Tabs extends React.Component {
       event.type === 'click'
     ) {
       const currentScrollLeft = this.state.tablistScrollLeft;
-      tab?.tabAnchor?.scrollIntoView({ inline: 'nearest' });
+      tab?.tabAnchor?.scrollIntoView(false);
       const newScrollLeft = this.tablist.current.scrollLeft;
       if (newScrollLeft > currentScrollLeft) {
         this.tablist.current.scrollLeft += this.OVERFLOW_BUTTON_OFFSET;
@@ -332,7 +325,6 @@ export default class Tabs extends React.Component {
   render() {
     const {
       className,
-      role,
       type,
       light,
       onSelectionChange,
@@ -427,11 +419,7 @@ export default class Tabs extends React.Component {
     return (
       // TODO: remove classname and revert div to React Fragment after next major release
       <div className={`${prefix}--tabs--scrollable`}>
-        <div
-          {...other}
-          className={classes.tabs}
-          role={role}
-          onScroll={this.handleScroll}>
+        <div {...other} className={classes.tabs} onScroll={this.handleScroll}>
           <button
             type="button"
             className={classes.leftOverflowButtonClasses}