diff --git a/package.json b/package.json
index eb6c95814e15..fd8c6e2adfef 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,8 @@
"perf",
"refactor",
"revert",
- "test"
+ "test",
+ "style"
]
]
}
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index b0b6bbe924ba..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;
@@ -15165,7 +15170,8 @@ Content switcher styles
&:focus {
z-index: 3;
- box-shadow: inset 0 0 0 2px $focus;
+ border-color: $focus;
+ box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $ui-01;
}
&:hover {
@@ -22639,10 +22645,6 @@ Search styles
}
}
- .#{$prefix}--search-input[disabled] ~ .#{$prefix}--search-magnifier {
- fill: $disabled;
- }
-
.#{$prefix}--search--light .#{$prefix}--search-input {
background: $field-02;
}
@@ -22778,6 +22780,24 @@ Search styles
}
}
+ .#{$prefix}--search--disabled .#{$prefix}--search-close {
+ outline: none;
+ cursor: not-allowed;
+
+ &:hover {
+ background-color: transparent;
+ border-bottom-color: transparent;
+ }
+
+ &:hover::before {
+ background-color: transparent;
+ }
+ }
+
+ .#{$prefix}--search--disabled svg {
+ fill: $disabled;
+ }
+
.#{$prefix}--search-close:focus,
.#{$prefix}--search-close:active {
&::before {
@@ -25001,6 +25021,13 @@ Tile styles
&:focus {
@include focus-outline('outline');
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ outline: 3px solid transparent;
+ outline-offset: -3px;
+ }
}
}
@@ -25084,6 +25111,13 @@ Tile styles
transform-origin: center;
transition: $duration--fast-02 motion(standard, productive);
fill: $ui-05;
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ // `ButtonText` is a CSS2 system color to help improve colors in HCM
+ fill: ButtonText;
+ }
}
&:hover {
@@ -25147,6 +25181,13 @@ Tile styles
> .#{$prefix}--tile__checkmark
svg {
fill: $ui-05;
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ // `ButtonText` is a CSS2 system color to help improve colors in HCM
+ fill: ButtonText;
+ }
}
.#{$prefix}--tile-content {
@@ -25691,7 +25732,7 @@ Toggle styles
.#{$prefix}--toggle-input--small:disabled:checked
+ .#{$prefix}--toggle-input__label
.#{$prefix}--toggle__check {
- fill: $disabled-02;
+ fill: $disabled-01;
}
//----------------------------------------------
@@ -26903,6 +26944,13 @@ UI shell header
.#{$prefix}--header__action:focus {
border-color: $shell-header-focus;
outline: none;
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ outline: 3px solid transparent;
+ outline-offset: -3px;
+ }
}
.#{$prefix}--header__action:active {
@@ -27035,6 +27083,13 @@ UI shell header
color: $shell-header-text-01;
border-color: $shell-header-focus;
outline: none;
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ outline: 3px solid transparent;
+ outline-offset: -3px;
+ }
}
a.#{$prefix}--header__menu-item:hover > svg,
@@ -28018,6 +28073,13 @@ UI shell side nav
.#{$prefix}--side-nav__submenu:focus {
@include focus-outline('outline');
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ outline: 3px solid transparent;
+ outline-offset: -3px;
+ }
}
.#{$prefix}--side-nav__submenu-title {
@@ -28149,6 +28211,13 @@ UI shell side nav
a.#{$prefix}--side-nav__link:focus,
.#{$prefix}--side-nav a.#{$prefix}--header__menu-item:focus {
@include focus-outline('outline');
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ outline: 3px solid transparent;
+ outline-offset: -3px;
+ }
}
a.#{$prefix}--side-nav__link[aria-current='page'],
@@ -28194,6 +28263,12 @@ UI shell side nav
width: mini-units(2);
height: mini-units(2);
fill: $shell-side-nav-icon-01;
+
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ // `ButtonText` is a CSS2 system color to help improve colors in HCM
+ fill: ButtonText;
+ }
}
.#{$prefix}--side-nav__icon > svg.#{$prefix}--side-nav-collapse-icon {
@@ -28306,6 +28381,13 @@ UI shell side nav
.#{$prefix}--header__menu-arrow,
.#{$prefix}--side-nav .#{$prefix}--header__menu-arrow {
fill: $shell-side-nav-text-01;
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ // `ButtonText` is a CSS2 system color to help improve colors in HCM
+ fill: ButtonText;
+ }
}
}
```
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/components/src/components/content-switcher/_content-switcher.scss b/packages/components/src/components/content-switcher/_content-switcher.scss
index 0c42251f3c97..63c1de491ab8 100644
--- a/packages/components/src/components/content-switcher/_content-switcher.scss
+++ b/packages/components/src/components/content-switcher/_content-switcher.scss
@@ -48,7 +48,8 @@
&:focus {
z-index: 3;
- box-shadow: inset 0 0 0 2px $focus;
+ border-color: $focus;
+ box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $ui-01;
}
&:hover {
diff --git a/packages/components/src/components/search/_search.scss b/packages/components/src/components/search/_search.scss
index 633826facbdd..91b96e1cd0a8 100644
--- a/packages/components/src/components/search/_search.scss
+++ b/packages/components/src/components/search/_search.scss
@@ -71,10 +71,6 @@
}
}
- .#{$prefix}--search-input[disabled] ~ .#{$prefix}--search-magnifier {
- fill: $disabled;
- }
-
.#{$prefix}--search--light .#{$prefix}--search-input {
background: $field-02;
}
@@ -211,6 +207,24 @@
}
}
+ .#{$prefix}--search--disabled .#{$prefix}--search-close {
+ outline: none;
+ cursor: not-allowed;
+
+ &:hover {
+ background-color: transparent;
+ border-bottom-color: transparent;
+ }
+
+ &:hover::before {
+ background-color: transparent;
+ }
+ }
+
+ .#{$prefix}--search--disabled svg {
+ fill: $disabled;
+ }
+
.#{$prefix}--search-close:focus,
.#{$prefix}--search-close:active {
&::before {
diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
index 6d577922b78a..2d8a8d27e6c5 100644
--- a/packages/components/src/components/tile/_tile.scss
+++ b/packages/components/src/components/tile/_tile.scss
@@ -30,6 +30,13 @@
&:focus {
@include focus-outline('outline');
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ outline: 3px solid transparent;
+ outline-offset: -3px;
+ }
}
}
@@ -113,6 +120,13 @@
transform-origin: center;
transition: $duration--fast-02 motion(standard, productive);
fill: $ui-05;
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ // `ButtonText` is a CSS2 system color to help improve colors in HCM
+ fill: ButtonText;
+ }
}
&:hover {
@@ -176,6 +190,13 @@
> .#{$prefix}--tile__checkmark
svg {
fill: $ui-05;
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ // `ButtonText` is a CSS2 system color to help improve colors in HCM
+ fill: ButtonText;
+ }
}
.#{$prefix}--tile-content {
diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
index b2cc4a28edaf..d8d78caca162 100644
--- a/packages/components/src/components/toggle/_toggle.scss
+++ b/packages/components/src/components/toggle/_toggle.scss
@@ -440,7 +440,7 @@
.#{$prefix}--toggle-input--small:disabled:checked
+ .#{$prefix}--toggle-input__label
.#{$prefix}--toggle__check {
- fill: $disabled-02;
+ fill: $disabled-01;
}
//----------------------------------------------
diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
index f1ef68a9cde8..a388acdc4944 100644
--- a/packages/components/src/components/ui-shell/_header.scss
+++ b/packages/components/src/components/ui-shell/_header.scss
@@ -66,6 +66,13 @@
.#{$prefix}--header__action:focus {
border-color: $shell-header-focus;
outline: none;
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ outline: 3px solid transparent;
+ outline-offset: -3px;
+ }
}
.#{$prefix}--header__action:active {
@@ -198,6 +205,13 @@
color: $shell-header-text-01;
border-color: $shell-header-focus;
outline: none;
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ outline: 3px solid transparent;
+ outline-offset: -3px;
+ }
}
a.#{$prefix}--header__menu-item:hover > svg,
diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
index eb339d67d30f..d32390ca95c3 100644
--- a/packages/components/src/components/ui-shell/_side-nav.scss
+++ b/packages/components/src/components/ui-shell/_side-nav.scss
@@ -377,6 +377,13 @@
.#{$prefix}--side-nav__submenu:focus {
@include focus-outline('outline');
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ outline: 3px solid transparent;
+ outline-offset: -3px;
+ }
}
.#{$prefix}--side-nav__submenu-title {
@@ -508,6 +515,13 @@
a.#{$prefix}--side-nav__link:focus,
.#{$prefix}--side-nav a.#{$prefix}--header__menu-item:focus {
@include focus-outline('outline');
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ outline: 3px solid transparent;
+ outline-offset: -3px;
+ }
}
a.#{$prefix}--side-nav__link[aria-current='page'],
@@ -553,6 +567,12 @@
width: mini-units(2);
height: mini-units(2);
fill: $shell-side-nav-icon-01;
+
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ // `ButtonText` is a CSS2 system color to help improve colors in HCM
+ fill: ButtonText;
+ }
}
.#{$prefix}--side-nav__icon > svg.#{$prefix}--side-nav-collapse-icon {
@@ -665,6 +685,13 @@
.#{$prefix}--header__menu-arrow,
.#{$prefix}--side-nav .#{$prefix}--header__menu-arrow {
fill: $shell-side-nav-text-01;
+
+ // Windows, Firefox HCM Fix
+ @media screen and (-ms-high-contrast: active),
+ screen and (prefers-contrast) {
+ // `ButtonText` is a CSS2 system color to help improve colors in HCM
+ fill: ButtonText;
+ }
}
}
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 147d8d46b589..b240a2160a4b 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 {
@@ -749,6 +753,7 @@ Map {
},
"ContentSwitcher" => Object {
"defaultProps": Object {
+ "onChange": [Function],
"selectedIndex": 0,
"selectionMode": "automatic",
},
@@ -4376,6 +4381,9 @@ Map {
],
"type": "oneOfType",
},
+ "disabled": Object {
+ "type": "bool",
+ },
"id": Object {
"type": "string",
},
@@ -4938,7 +4946,6 @@ Map {
},
"Tabs" => Object {
"defaultProps": Object {
- "role": "navigation",
"selected": 0,
"selectionMode": "automatic",
"type": "default",
@@ -4965,10 +4972,6 @@ Map {
"onSelectionChange": Object {
"type": "func",
},
- "role": Object {
- "isRequired": true,
- "type": "string",
- },
"selected": Object {
"type": "number",
},
diff --git a/packages/react/examples/react-router/package.json b/packages/react/examples/react-router/package.json
index 409ddb48ff0c..93e58863c508 100644
--- a/packages/react/examples/react-router/package.json
+++ b/packages/react/examples/react-router/package.json
@@ -3,8 +3,9 @@
"version": "0.1.0",
"private": true,
"dependencies": {
- "carbon-components": "^9.68.10",
- "carbon-components-react": "^6.81.4",
+ "carbon-components": "latest",
+ "carbon-components-react": "latest",
+ "carbon-icons": "latest",
"node-sass": "^4.11.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
index b32c2cadae02..372175d05d25 100644
--- a/packages/react/src/components/Button/Button-story.js
+++ b/packages/react/src/components/Button/Button-story.js
@@ -192,7 +192,9 @@ export const Playground = () => {
);
};
-export const IconButton = () => ;
+export const IconButton = () => (
+
+);
IconButton.story = {
name: 'Icon Button',
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/ContentSwitcher/ContentSwitcher.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
index 5c22f95c1965..5b2f1b1c552f 100644
--- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
@@ -60,6 +60,7 @@ export default class ContentSwitcher extends React.Component {
static defaultProps = {
selectedIndex: 0,
selectionMode: 'automatic',
+ onChange: () => {},
};
static getDerivedStateFromProps({ selectedIndex }, state) {
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.js b/packages/react/src/components/OverflowMenu/OverflowMenu.js
index a0a9cf69c1a1..1e807fe5bd85 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu.js
@@ -513,6 +513,7 @@ class OverflowMenu extends Component {
const wrappedMenuBody = (
({
className: 'some-class',
size: select('Size (size)', sizes, 'xl'),
light: boolean('Light variant (light)', false),
+ disabled: boolean('Disabled (disabled)', false),
name: text('Form item name (name)', ''),
defaultValue: text('Default value (defaultValue)', ''),
labelText: text('Label text (labelText)', 'Search'),
diff --git a/packages/react/src/components/Search/Search.js b/packages/react/src/components/Search/Search.js
index 1dd0ef081b1e..0a395f23904a 100644
--- a/packages/react/src/components/Search/Search.js
+++ b/packages/react/src/components/Search/Search.js
@@ -31,6 +31,11 @@ export default class Search extends Component {
*/
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ /**
+ * Specify whether the `` should be disabled
+ */
+ disabled: PropTypes.bool,
+
/**
* Specify a custom `id` for the input
*/
@@ -145,6 +150,7 @@ export default class Search extends Component {
small,
size = !small ? 'xl' : 'sm',
light,
+ disabled,
...other
} = this.props;
@@ -154,6 +160,7 @@ export default class Search extends Component {
[`${prefix}--search`]: true,
[`${prefix}--search--${size}`]: size,
[`${prefix}--search--light`]: light,
+ [`${prefix}--search--disabled`]: disabled,
[className]: className,
});
@@ -175,6 +182,7 @@ export default class Search extends Component {
autoComplete="off"
{...other}
type={type}
+ disabled={disabled}
className={`${prefix}--search-input`}
id={id}
placeholder={placeHolderText}
@@ -185,6 +193,7 @@ export default class Search extends Component {
/>