diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index 828360723d24..248558fb3cc5 100644 --- 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 index b5b2e6f8a28c..3d2eb89fd1fb 100644 --- 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 index cd04e3f10e91..291c7334e09d 100644 --- 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 index 0d223212c13d..573fbd1bec07 100644 --- 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 = () => ( - - {`@mixin grid-container { - width: 100%; - padding-right: padding(mobile); - padding-left: padding(mobile);`} - +
+ + {` "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",`} + +
); 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 index 3317e0ab5d01..8f25a38f7f13 100644 --- 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 index 8fe9cceef6ad..93ec8c44d15d 100644 --- 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. diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.js b/packages/react/src/components/OverflowMenu/OverflowMenu.js index f6aac3c77b0a..19e4fc3963ff 100644 --- 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 = ( )', 1), - role: text('ARIA role (role in )', 'navigation'), // Disabling action logger for `` 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 )', false), href: text('The href for tab (href in )', '#'), - role: text('ARIA role (role in )', 'presentation'), tabIndex: number('Tab index (tabIndex in )', 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 index 4d84e5b599f7..dd216d048f73 100644 --- a/packages/react/src/components/Tabs/Tabs-test.js +++ b/packages/react/src/components/Tabs/Tabs-test.js @@ -26,16 +26,6 @@ describe('Tabs', () => { ); - it('renders [role="navigation"] props on wrapping
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
    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 index 61e37ec98c4b..0d8645a344ea 100644 --- 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