diff --git a/.all-contributorsrc b/.all-contributorsrc index 120a3bf13b05..db81b44feed9 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -646,6 +646,115 @@ "contributions": [ "code" ] + }, + { + "login": "molyholy", + "name": "molyholy", + "avatar_url": "https://avatars2.githubusercontent.com/u/77503726?v=4", + "profile": "https://github.com/molyholy", + "contributions": [ + "code" + ] + }, + { + "login": "scottdickerson", + "name": "Scott Dickerson", + "avatar_url": "https://avatars.githubusercontent.com/u/6663002?v=4", + "profile": "https://github.com/scottdickerson", + "contributions": [ + "code" + ] + }, + { + "login": "epodgaetskiy", + "name": "Evgeniy Podgaetskiy", + "avatar_url": "https://avatars.githubusercontent.com/u/15031623?v=4", + "profile": "https://start.reactwarriors.com/join", + "contributions": [ + "code" + ] + }, + { + "login": "CassidyJensen", + "name": "CassidyJensen", + "avatar_url": "https://avatars.githubusercontent.com/u/45407808?v=4", + "profile": "https://github.com/CassidyJensen", + "contributions": [ + "code", + "a11y" + ] + }, + { + "login": "lattmann", + "name": "Zsolt Lattmann", + "avatar_url": "https://avatars.githubusercontent.com/u/1108945?v=4", + "profile": "https://github.com/lattmann", + "contributions": [ + "code" + ] + }, + { + "login": "ConradSchmidt", + "name": "Conrad Schmidt", + "avatar_url": "https://avatars.githubusercontent.com/u/3808948?v=4", + "profile": "https://conrad.codes/", + "contributions": [ + "code" + ] + }, + { + "login": "IgnacioBecerra", + "name": "Ignacio Becerra", + "avatar_url": "https://avatars.githubusercontent.com/u/24970122?v=4", + "profile": "https://github.com/IgnacioBecerra", + "contributions": [ + "code" + ] + }, + { + "login": "swapnilpatil21", + "name": "Swapnil Patil", + "avatar_url": "https://avatars.githubusercontent.com/u/46713873?v=4", + "profile": "https://github.com/swapnilpatil21", + "contributions": [ + "doc" + ] + }, + { + "login": "sophiiae", + "name": "Fei Z", + "avatar_url": "https://avatars.githubusercontent.com/u/18622886?v=4", + "profile": "https://github.com/sophiiae", + "contributions": [ + "code" + ] + }, + { + "login": "IgnasA", + "name": "Ignas Ausiejus", + "avatar_url": "https://avatars.githubusercontent.com/u/7099068?v=4", + "profile": "https://github.com/IgnasA", + "contributions": [ + "doc" + ] + }, + { + "login": "ryanomackey", + "name": "Ryan O. Mackey", + "avatar_url": "https://avatars.githubusercontent.com/u/17710824?v=4", + "profile": "https://ryanomackey.com/", + "contributions": [ + "code" + ] + }, + { + "login": "skateman", + "name": "Dávid Halász", + "avatar_url": "https://avatars.githubusercontent.com/u/649130?v=4", + "profile": "http://www.skateman.eu/", + "contributions": [ + "code" + ] } ], "commitConvention": "none" diff --git a/README.md b/README.md index 49d72eaf5a85..4c4c5dd8d5a1 100644 --- a/README.md +++ b/README.md @@ -166,6 +166,20 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
DavidSCChen

💻 +
molyholy

💻 +
Scott Dickerson

💻 +
Evgeniy Podgaetskiy

💻 +
CassidyJensen

💻 ️️️️♿️ +
Zsolt Lattmann

💻 +
Conrad Schmidt

💻 + + +
Ignacio Becerra

💻 +
Swapnil Patil

📖 +
Fei Z

💻 +
Ignas Ausiejus

📖 +
Ryan O. Mackey

💻 +
Halász Dávid

💻 diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index b03a2a327ce5..39dcd63be219 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -8834,6 +8834,7 @@ $hover-primary-text: if( - **Type**: `{undefined}` - **Used by**: - [carbon--theme [mixin]](#carbon--theme-mixin) + - [breadcrumb [mixin]](#breadcrumb-mixin) - [button [mixin]](#button-mixin) - [link [mixin]](#link-mixin) @@ -14979,6 +14980,10 @@ Breadcrumb styles .#{$prefix}--breadcrumb-item .#{$prefix}--link:visited { color: $link-01; + + &:hover { + color: $hover-primary-text; + } } .#{$prefix}--breadcrumb-item::after { @@ -15031,6 +15036,7 @@ Breadcrumb styles - [prefix [variable]](#prefix-variable) - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable) - [link-01 [variable]](#link-01-variable) + - [hover-primary-text [variable]](#hover-primary-text-variable) - [text-01 [variable]](#text-01-variable) ## button @@ -26237,7 +26243,9 @@ Tag styles // tags used for filtering .#{$prefix}--tag--filter { - padding-right: rem(2px); + padding-top: 0; + padding-right: 0; + padding-bottom: 0; cursor: pointer; &:hover { @@ -26246,17 +26254,21 @@ Tag styles } .#{$prefix}--tag__close-icon { + display: flex; flex-shrink: 0; - width: rem(16px); - height: rem(16px); - margin: 0 0 0 rem(4px); + align-items: center; + justify-content: center; + width: rem(24px); + height: rem(24px); + margin: 0 0 0 rem(2px); padding: 0; color: currentColor; background-color: transparent; border: 0; border-radius: 50%; cursor: pointer; - + transition: background-color $duration--fast-01 motion(standard, productive), + box-shadow $duration--fast-01 motion(standard, productive); svg { fill: currentColor; } @@ -26285,7 +26297,7 @@ Tag styles .#{$prefix}--tag__close-icon:focus { border-radius: 50%; outline: none; - box-shadow: inset 0 0 0 2px $focus; + box-shadow: inset 0 0 0 1px $focus; // Windows, Firefox HCM Fix @media screen and (-ms-high-contrast: active), @@ -26296,7 +26308,7 @@ Tag styles } .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus { - box-shadow: inset 0 0 0 2px $inverse-focus-ui; + box-shadow: inset 0 0 0 1px $inverse-focus-ui; } .#{$prefix}--tag--filter.#{$prefix}--tag--disabled @@ -26315,7 +26327,13 @@ Tag styles } .#{$prefix}--tag--sm.#{$prefix}--tag--filter { - padding-right: rem(2px); + padding-right: 0; + } + + .#{$prefix}--tag--sm .#{$prefix}--tag__close-icon { + width: rem(18px); + height: rem(18px); + margin-left: rem(5px); } // Skeleton state diff --git a/packages/components/src/components/breadcrumb/_breadcrumb.scss b/packages/components/src/components/breadcrumb/_breadcrumb.scss index 72b14994981e..168a428e565c 100644 --- a/packages/components/src/components/breadcrumb/_breadcrumb.scss +++ b/packages/components/src/components/breadcrumb/_breadcrumb.scss @@ -37,6 +37,10 @@ .#{$prefix}--breadcrumb-item .#{$prefix}--link:visited { color: $link-01; + + &:hover { + color: $hover-primary-text; + } } .#{$prefix}--breadcrumb-item::after { diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss index 7e5393b3893e..5af384956fea 100644 --- a/packages/components/src/components/tag/_tag.scss +++ b/packages/components/src/components/tag/_tag.scss @@ -147,7 +147,9 @@ // tags used for filtering .#{$prefix}--tag--filter { - padding-right: rem(2px); + padding-top: 0; + padding-right: 0; + padding-bottom: 0; cursor: pointer; &:hover { @@ -156,17 +158,21 @@ } .#{$prefix}--tag__close-icon { + display: flex; flex-shrink: 0; - width: rem(16px); - height: rem(16px); - margin: 0 0 0 rem(4px); + align-items: center; + justify-content: center; + width: rem(24px); + height: rem(24px); + margin: 0 0 0 rem(2px); padding: 0; color: currentColor; background-color: transparent; border: 0; border-radius: 50%; cursor: pointer; - + transition: background-color $duration--fast-01 motion(standard, productive), + box-shadow $duration--fast-01 motion(standard, productive); svg { fill: currentColor; } @@ -195,7 +201,7 @@ .#{$prefix}--tag__close-icon:focus { border-radius: 50%; outline: none; - box-shadow: inset 0 0 0 2px $focus; + box-shadow: inset 0 0 0 1px $focus; // Windows, Firefox HCM Fix @media screen and (-ms-high-contrast: active), @@ -206,7 +212,7 @@ } .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus { - box-shadow: inset 0 0 0 2px $inverse-focus-ui; + box-shadow: inset 0 0 0 1px $inverse-focus-ui; } .#{$prefix}--tag--filter.#{$prefix}--tag--disabled @@ -225,7 +231,13 @@ } .#{$prefix}--tag--sm.#{$prefix}--tag--filter { - padding-right: rem(2px); + padding-right: 0; + } + + .#{$prefix}--tag--sm .#{$prefix}--tag__close-icon { + width: rem(18px); + height: rem(18px); + margin-left: rem(5px); } // Skeleton state diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 18d12911597d..82e3df3d8df7 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -646,6 +646,9 @@ Map { "selectorPrimaryFocus": "[data-modal-primary-focus]", }, "propTypes": Object { + "aria-label": Object { + "type": "string", + }, "children": Object { "type": "node", }, @@ -2079,9 +2082,11 @@ Map { Array [ "ar", "at", + "az", "be", "bg", "bn", + "bs", "cat", "cs", "cy", @@ -2093,16 +2098,22 @@ Map { "et", "fa", "fi", + "fo", "fr", + "ga", "gr", "he", "hi", "hr", "hu", "id", + "is", "it", "ja", + "ka", + "km", "ko", + "kz", "lt", "lv", "mk", @@ -2120,12 +2131,15 @@ Map { "sk", "sl", "sq", + "sr-cyr", "sr", "sv", "th", "tr", "uk", + "uz", "vn", + "zh-tw", "zh", ], ], @@ -2309,6 +2323,9 @@ Map { ], "type": "oneOfType", }, + "hideLabel": Object { + "type": "bool", + }, "id": Object { "isRequired": true, "type": "string", diff --git a/packages/react/src/components/ComposedModal/ComposedModal.js b/packages/react/src/components/ComposedModal/ComposedModal.js index 0ceaa74ad3b3..aa9c28dd4a4f 100644 --- a/packages/react/src/components/ComposedModal/ComposedModal.js +++ b/packages/react/src/components/ComposedModal/ComposedModal.js @@ -33,6 +33,11 @@ export default class ComposedModal extends Component { endSentinel = React.createRef(); static propTypes = { + /** + * Specify the aria-label for bx--modal-container + */ + ['aria-label']: PropTypes.string, + /** * Specify the content to be placed in the ComposedModal */ @@ -216,6 +221,7 @@ export default class ComposedModal extends Component { render() { const { open } = this.state; const { + ['aria-label']: ariaLabel, className, containerClassName, children, @@ -239,9 +245,12 @@ export default class ComposedModal extends Component { [containerClassName]: containerClassName, }); + // Generate aria-label based on Modal Header label if one is not provided (L253) + let generatedAriaLabel; const childrenWithProps = React.Children.toArray(children).map((child) => { switch (child.type) { case React.createElement(ModalHeader).type: + generatedAriaLabel = child.props.label; return React.cloneElement(child, { closeModal: this.closeModal, }); @@ -273,7 +282,12 @@ export default class ComposedModal extends Component { className={`${prefix}--visually-hidden`}> Focus sentinel -
+
{childrenWithProps}
{/* Non-translatable: Focus-wrap code makes this `` not actually read by screen readers */} @@ -403,9 +417,9 @@ export class ModalHeader extends Component { return (
- {label &&

{label}

} + {label &&

{label}

} - {title &&

{title}

} + {title &&

{title}

} {children} diff --git a/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap b/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap index 72e2c71502b2..df472ab51e85 100644 --- a/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap +++ b/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap @@ -23,6 +23,7 @@ exports[` renders 1`] = ` Focus sentinel
diff --git a/packages/react/src/components/DatePicker/DatePicker.js b/packages/react/src/components/DatePicker/DatePicker.js index a2721ae000dc..99c3383f874d 100644 --- a/packages/react/src/components/DatePicker/DatePicker.js +++ b/packages/react/src/components/DatePicker/DatePicker.js @@ -162,9 +162,11 @@ export default class DatePicker extends Component { locale: PropTypes.oneOf([ 'ar', // Arabic 'at', // Austria + 'az', // Azerbaijan 'be', // Belarusian 'bg', // Bulgarian 'bn', // Bangla + 'bs', // Bosnia 'cat', // Catalan 'cs', // Czech 'cy', // Welsh @@ -176,16 +178,22 @@ export default class DatePicker extends Component { 'et', // Estonian 'fa', // Persian 'fi', // Finnish + 'fo', // Faroese 'fr', // French + 'ga', // Gaelic 'gr', // Greek 'he', // Hebrew 'hi', // Hindi 'hr', // Croatian 'hu', // Hungarian 'id', // Indonesian + 'is', // Icelandic 'it', // Italian 'ja', // Japanese + 'ka', // Georgian + 'km', // Khmer 'ko', // Korean + 'kz', // Kazakh 'lt', // Lithuanian 'lv', // Latvian 'mk', // Macedonian @@ -203,12 +211,15 @@ export default class DatePicker extends Component { 'sk', // Slovak 'sl', // Slovenian 'sq', // Albanian + 'sr-cyr', // Serbian Cyrillic 'sr', // Serbian 'sv', // Swedish 'th', // Thai 'tr', // Turkish 'uk', // Ukrainian + 'uz', // Uzbek 'vn', // Vietnamese + 'zh-tw', // Mandarin Traditional 'zh', // Mandarin ]), diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js index 351c66447651..bf55f87e8ca8 100644 --- a/packages/react/src/components/Dropdown/Dropdown-story.js +++ b/packages/react/src/components/Dropdown/Dropdown-story.js @@ -60,6 +60,7 @@ const props = () => ({ disabled: boolean('Disabled (disabled)', false), light: boolean('Light variant (light)', false), titleText: text('Title (titleText)', 'Dropdown label'), + hideLabel: boolean('No title text shown (hideLabel)', false), helperText: text('Helper text (helperText)', 'This is some helper text.'), invalid: boolean('Show form validation UI (invalid)', false), invalidText: text( diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js index 6547e6b9b91c..ad3828dcfc2d 100644 --- a/packages/react/src/components/Dropdown/Dropdown.js +++ b/packages/react/src/components/Dropdown/Dropdown.js @@ -45,6 +45,7 @@ const Dropdown = React.forwardRef(function Dropdown( onChange, id, titleText, + hideLabel, helperText, translateWithId, light, @@ -98,6 +99,7 @@ const Dropdown = React.forwardRef(function Dropdown( const titleClasses = cx(`${prefix}--label`, { [`${prefix}--label--disabled`]: disabled, + [`${prefix}--visually-hidden`]: hideLabel, }); const helperClasses = cx(`${prefix}--form__helper-text`, { @@ -232,6 +234,11 @@ Dropdown.propTypes = { */ helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + /** + * Specify whether the title text should be hidden or not + */ + hideLabel: PropTypes.bool, + /** * Specify a custom `id` */