From 5ee9cd77cb57259792829fb5eea373648801bd1e Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 14 Oct 2020 11:01:30 -0500 Subject: [PATCH 01/17] feat(DatePicker): add flatpickr allowInput passthrough (#7037) * docs(DatePicker): consolidate locale prop descriptions * feat(DatePicker): add flatpickr allowInput passthrough * chore: update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../__snapshots__/PublicAPI-test.js.snap | 3 + .../src/components/DatePicker/DatePicker.js | 163 +++++++----------- 2 files changed, 63 insertions(+), 103 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 3338c2e7c63f..a6d74c57a2d5 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -1990,6 +1990,9 @@ Map { "short": false, }, "propTypes": Object { + "allowInput": Object { + "type": "bool", + }, "appendTo": Object { "type": "object", }, diff --git a/packages/react/src/components/DatePicker/DatePicker.js b/packages/react/src/components/DatePicker/DatePicker.js index 2b916f38e4cd..55a05476f28f 100644 --- a/packages/react/src/components/DatePicker/DatePicker.js +++ b/packages/react/src/components/DatePicker/DatePicker.js @@ -116,6 +116,12 @@ const carbonFlatpickrMonthSelectPlugin = (config) => (fp) => { export default class DatePicker extends Component { static propTypes = { + /** + * flatpickr prop passthrough. Allows the user to enter a date directly + * into the input field + */ + allowInput: PropTypes.bool, + /** * The DOM element the Flatpicker should be inserted into. `` by default. */ @@ -151,109 +157,59 @@ export default class DatePicker extends Component { light: PropTypes.bool, /** - * The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n - * - * `ar` - Arabic - `at` - Austria - `be` - Belarusian - `bg` - Bulgarian - `bn` - Bangla - `cat` - Catalan - `cs` - Czech - `cy` - Welsh - `da` - Danish - `de` - German - `en` - English - `eo` - Esperanto - `es` - Spanish - `et` - Estonian - `fa` - Persian - `fi` - Finnish - `fr` - French - `gr` - Greek - `he` - Hebrew - `hi` - Hindi - `hr` - Croatian - `hu` - Hungarian - `id` - Indonesian - `it` - Italian - `ja` - Japanese - `ko` - Korean - `lt` - Lithuanian - `lv` - Latvian - `mk` - Macedonian - `mn` - Mongolian - `ms` - Malaysian - `my` - Burmese - `nl` - Dutch - `no` - Norwegian - `pa` - Punjabi - `pl` - Polish - `pt` - Portuguese - `ro` - Romanian - `si` - Sinhala - `sk` - Slovak - `sl` - Slovenian - `sq` - Albanian - `sr` - Serbian - `sv` - Swedish - `th` - Thai - `tr` - Turkish - `uk` - Ukrainian - `vn` - Vietnamese - `zh` - Mandarin - */ + * The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n + */ locale: PropTypes.oneOf([ - 'ar', - 'at', - 'be', - 'bg', - 'bn', - 'cat', - 'cs', - 'cy', - 'da', - 'de', - 'en', - 'eo', - 'es', - 'et', - 'fa', - 'fi', - 'fr', - 'gr', - 'he', - 'hi', - 'hr', - 'hu', - 'id', - 'it', - 'ja', - 'ko', - 'lt', - 'lv', - 'mk', - 'mn', - 'ms', - 'my', - 'nl', - 'no', - 'pa', - 'pl', - 'pt', - 'ro', - 'ru', - 'si', - 'sk', - 'sl', - 'sq', - 'sr', - 'sv', - 'th', - 'tr', - 'uk', - 'vn', - 'zh', + 'ar', // Arabic + 'at', // Austria + 'be', // Belarusian + 'bg', // Bulgarian + 'bn', // Bangla + 'cat', // Catalan + 'cs', // Czech + 'cy', // Welsh + 'da', // Danish + 'de', // German + 'en', // English + 'eo', // Esperanto + 'es', // Spanish + 'et', // Estonian + 'fa', // Persian + 'fi', // Finnish + 'fr', // French + 'gr', // Greek + 'he', // Hebrew + 'hi', // Hindi + 'hr', // Croatian + 'hu', // Hungarian + 'id', // Indonesian + 'it', // Italian + 'ja', // Japanese + 'ko', // Korean + 'lt', // Lithuanian + 'lv', // Latvian + 'mk', // Macedonian + 'mn', // Mongolian + 'ms', // Malaysian + 'my', // Burmese + 'nl', // Dutch + 'no', // Norwegian + 'pa', // Punjabi + 'pl', // Polish + 'pt', // Portuguese + 'ro', // Romanian + 'ru', // Russian + 'si', // Sinhala + 'sk', // Slovak + 'sl', // Slovenian + 'sq', // Albanian + 'sr', // Serbian + 'sv', // Swedish + 'th', // Thai + 'tr', // Turkish + 'uk', // Ukrainian + 'vn', // Vietnamese + 'zh', // Mandarin ]), /** @@ -308,6 +264,7 @@ export default class DatePicker extends Component { componentDidMount() { const { + allowInput, appendTo, datePickerType, dateFormat, @@ -328,7 +285,7 @@ export default class DatePicker extends Component { disableMobile: true, defaultDate: value, mode: datePickerType, - allowInput: true, + allowInput: allowInput ?? true, dateFormat: dateFormat, locale: l10n[locale], minDate: minDate, From 755e3b45d482ca74e4443dd9b9c05bff3a7f529b Mon Sep 17 00:00:00 2001 From: Ricardo Henriquez Date: Wed, 14 Oct 2020 11:37:07 -0500 Subject: [PATCH 02/17] fix(a11y): pagination HCM fix (#7033) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- packages/components/src/components/button/_button.scss | 7 +++++++ packages/components/src/components/select/_select.scss | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss index 92fc4f185162..b0d536004d80 100644 --- a/packages/components/src/components/button/_button.scss +++ b/packages/components/src/components/button/_button.scss @@ -212,6 +212,13 @@ .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus { border-color: $focus; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + outline: 3px solid transparent; + outline-offset: -3px; + } } .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss index 02bd69b3903d..47dfd978dae1 100644 --- a/packages/components/src/components/select/_select.scss +++ b/packages/components/src/components/select/_select.scss @@ -81,6 +81,13 @@ @include focus-outline('outline'); color: $text-01; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + outline: 3px solid transparent; + outline-offset: -3px; + } } &:disabled, From bced19445ad6ab8c22e89ef3a5fc5b886602efa7 Mon Sep 17 00:00:00 2001 From: carbon-bot Date: Wed, 14 Oct 2020 16:55:45 +0000 Subject: [PATCH 03/17] chore(project): sync generated files --- packages/components/docs/sass.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index 3eebf674f3b3..83a0ce4b5a4b 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -14121,6 +14121,13 @@ Button styles .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus { border-color: $focus; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + outline: 3px solid transparent; + outline-offset: -3px; + } } .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus @@ -22996,6 +23003,13 @@ Select styles @include focus-outline('outline'); color: $text-01; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + outline: 3px solid transparent; + outline-offset: -3px; + } } &:disabled, From 9e09be4260ad1030642bafe34f250790200f54c7 Mon Sep 17 00:00:00 2001 From: Ricardo Henriquez Date: Wed, 14 Oct 2020 14:31:37 -0500 Subject: [PATCH 04/17] fix(a11y): fixing StructuredList HCM (#7032) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../src/components/structured-list/_structured-list.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/components/src/components/structured-list/_structured-list.scss b/packages/components/src/components/structured-list/_structured-list.scss index 716b3204112a..d809a858c695 100644 --- a/packages/components/src/components/structured-list/_structured-list.scss +++ b/packages/components/src/components/structured-list/_structured-list.scss @@ -138,6 +138,13 @@ + .#{$prefix}--structured-list-td .#{$prefix}--structured-list-svg { fill: $icon-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; + } } // Skeleton State From bd49b4211071511e89b28aa386647b135e17df6c Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 14 Oct 2020 14:48:54 -0500 Subject: [PATCH 05/17] fix(dropdown): change cursor when disabled (#7024) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- packages/components/src/components/dropdown/_dropdown.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss index 9fdb6659b372..1c1e44383f7f 100644 --- a/packages/components/src/components/dropdown/_dropdown.scss +++ b/packages/components/src/components/dropdown/_dropdown.scss @@ -349,7 +349,6 @@ .#{$prefix}--dropdown--disabled { border-bottom-color: transparent; - cursor: not-allowed; &:hover { background-color: $field-01; @@ -376,6 +375,11 @@ } } + .#{$prefix}--dropdown--disabled .#{$prefix}--list-box__field, + .#{$prefix}--dropdown--disabled .#{$prefix}--list-box__menu-icon { + cursor: not-allowed; + } + .#{$prefix}--dropdown--auto-width { width: auto; max-width: rem(400px); From a49f90a805160678f56b8ea6911c8c7bada7e4d2 Mon Sep 17 00:00:00 2001 From: carbon-bot Date: Wed, 14 Oct 2020 20:04:49 +0000 Subject: [PATCH 06/17] chore(project): sync generated files --- packages/components/docs/sass.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index 83a0ce4b5a4b..be9598e1793c 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -17868,7 +17868,6 @@ Dropdown styles .#{$prefix}--dropdown--disabled { border-bottom-color: transparent; - cursor: not-allowed; &:hover { background-color: $field-01; @@ -17895,6 +17894,11 @@ Dropdown styles } } + .#{$prefix}--dropdown--disabled .#{$prefix}--list-box__field, + .#{$prefix}--dropdown--disabled .#{$prefix}--list-box__menu-icon { + cursor: not-allowed; + } + .#{$prefix}--dropdown--auto-width { width: auto; max-width: rem(400px); From 1cdd7f889cff99483068636ececdc1242e632f0e Mon Sep 17 00:00:00 2001 From: Jan Hassel Date: Wed, 14 Oct 2020 22:35:50 +0200 Subject: [PATCH 07/17] feat(multi-select): add warn prop (#7043) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../src/components/combo-box/_combo-box.scss | 4 +++ .../components/src/components/form/_form.scss | 1 + .../src/components/list-box/_list-box.scss | 14 ++++++++++ .../__snapshots__/PublicAPI-test.js.snap | 12 +++++++++ .../MultiSelect/FilterableMultiSelect.js | 25 ++++++++++++++++-- .../MultiSelect/MultiSelect-story.js | 5 ++++ .../src/components/MultiSelect/MultiSelect.js | 26 +++++++++++++++++-- 7 files changed, 83 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/combo-box/_combo-box.scss b/packages/components/src/components/combo-box/_combo-box.scss index 1dbf356bd50e..a5659e2ed004 100644 --- a/packages/components/src/components/combo-box/_combo-box.scss +++ b/packages/components/src/components/combo-box/_combo-box.scss @@ -30,7 +30,11 @@ .#{$prefix}--combo-box .#{$prefix}--list-box__field, .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field, + .#{$prefix}--combo-box.#{$prefix}--list-box--warning + .#{$prefix}--list-box__field, .#{$prefix}--combo-box.#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid] + .#{$prefix}--list-box__field, + .#{$prefix}--combo-box.#{$prefix}--list-box--disabled.#{$prefix}--list-box--warning .#{$prefix}--list-box__field { padding: 0; } diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss index 5add0dbeb0f6..48238bc1c012 100644 --- a/packages/components/src/components/form/_form.scss +++ b/packages/components/src/components/form/_form.scss @@ -82,6 +82,7 @@ .#{$prefix}--date-picker-input__wrapper, .#{$prefix}--time-picker--invalid, .#{$prefix}--text-input__field-wrapper[data-invalid], + .#{$prefix}--text-input__field-wrapper--warning, .#{$prefix}--text-input__field-wrapper--warning > .#{$prefix}--text-input, .#{$prefix}--text-area__wrapper[data-invalid], .#{$prefix}--select-input__wrapper[data-invalid], diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss index d1858fc1187f..727136cb4e64 100644 --- a/packages/components/src/components/list-box/_list-box.scss +++ b/packages/components/src/components/list-box/_list-box.scss @@ -315,6 +315,9 @@ $list-box-menu-width: rem(300px); // invalid && populated input field .#{$prefix}--list-box[data-invalid] + .#{$prefix}--list-box__field + .#{$prefix}--text-input, + .#{$prefix}--list-box--warning .#{$prefix}--list-box__field .#{$prefix}--text-input { // to account for clear input button outline @@ -322,6 +325,10 @@ $list-box-menu-width: rem(300px); } .#{$prefix}--list-box[data-invalid] + .#{$prefix}--list-box__field + .#{$prefix}--text-input + + .#{$prefix}--list-box__invalid-icon, + .#{$prefix}--list-box--warning .#{$prefix}--list-box__field .#{$prefix}--text-input + .#{$prefix}--list-box__invalid-icon { @@ -336,12 +343,19 @@ $list-box-menu-width: rem(300px); // invalid && empty input field .#{$prefix}--list-box[data-invalid] + .#{$prefix}--list-box__field + .#{$prefix}--text-input--empty, + .#{$prefix}--list-box--warning .#{$prefix}--list-box__field .#{$prefix}--text-input--empty { padding-right: carbon--mini-units(9); } .#{$prefix}--list-box[data-invalid] + .#{$prefix}--list-box__field + .#{$prefix}--text-input--empty + + .#{$prefix}--list-box__invalid-icon, + .#{$prefix}--list-box--warning .#{$prefix}--list-box__field .#{$prefix}--text-input--empty + .#{$prefix}--list-box__invalid-icon { diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index a6d74c57a2d5..a01d0e4ea10d 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -3544,6 +3544,12 @@ Map { "useTitleInItem": Object { "type": "bool", }, + "warn": Object { + "type": "bool", + }, + "warnText": Object { + "type": "string", + }, }, }, "defaultProps": Object { @@ -3778,6 +3784,12 @@ Map { "useTitleInItem": Object { "type": "bool", }, + "warn": Object { + "type": "bool", + }, + "warnText": Object { + "type": "string", + }, }, "render": [Function], }, diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js index 283767fa4a32..a8f135117231 100644 --- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js +++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js @@ -11,7 +11,7 @@ import React from 'react'; import Downshift from 'downshift'; import isEqual from 'lodash.isequal'; import { settings } from 'carbon-components'; -import { WarningFilled16 } from '@carbon/icons-react'; +import { WarningFilled16, WarningAltFilled16 } from '@carbon/icons-react'; import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox'; import Checkbox from '../Checkbox'; import Selection from '../../internal/Selection'; @@ -129,6 +129,16 @@ export default class FilterableMultiSelect extends React.Component { * Specify title to show title on hover */ useTitleInItem: PropTypes.bool, + + /** + * Specify whether the control is currently in warning state + */ + warn: PropTypes.bool, + + /** + * Provide the text that is displayed when the control is in warning state + */ + warnText: PropTypes.string, }; static getDerivedStateFromProps({ open }, state) { @@ -277,11 +287,15 @@ export default class FilterableMultiSelect extends React.Component { light, invalid, invalidText, + warn, + warnText, useTitleInItem, translateWithId, downshiftProps, } = this.props; const inline = type === 'inline'; + const showWarning = !invalid && warn; + const wrapperClasses = cx( `${prefix}--multi-select__wrapper`, `${prefix}--list-box__wrapper`, @@ -376,6 +390,8 @@ export default class FilterableMultiSelect extends React.Component { light={light} invalid={invalid} invalidText={invalidText} + warn={warn} + warnText={warnText} isOpen={isOpen} size={size} {...getRootProps()}> @@ -410,6 +426,11 @@ export default class FilterableMultiSelect extends React.Component { className={`${prefix}--list-box__invalid-icon`} /> )} + {showWarning && ( + + )} {inputValue && isOpen && ( {title} {input} - {!inline && !invalid ? helper : null} + {!inline && !invalid && !warn ? helper : null} ); } diff --git a/packages/react/src/components/MultiSelect/MultiSelect-story.js b/packages/react/src/components/MultiSelect/MultiSelect-story.js index 44e6ed8fc17b..7cabe117bdd8 100644 --- a/packages/react/src/components/MultiSelect/MultiSelect-story.js +++ b/packages/react/src/components/MultiSelect/MultiSelect-story.js @@ -82,6 +82,11 @@ const props = () => ({ 'Form validation UI content (invalidText)', 'Invalid Selection' ), + warn: boolean('Show warning state (warn)', false), + warnText: text( + 'Warning state text (warnText)', + 'Selecting more items may increase processing time' + ), onChange: action('onChange'), listBoxMenuIconTranslationIds: object( 'Listbox menu icon translation IDs (for translateWithId callback)', diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js index 97a3d63359a9..ea39860fbbd6 100644 --- a/packages/react/src/components/MultiSelect/MultiSelect.js +++ b/packages/react/src/components/MultiSelect/MultiSelect.js @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import { WarningFilled16 } from '@carbon/icons-react'; +import { WarningFilled16, WarningAltFilled16 } from '@carbon/icons-react'; import { settings } from 'carbon-components'; import cx from 'classnames'; import Downshift, { useSelect } from 'downshift'; @@ -52,6 +52,8 @@ const MultiSelect = React.forwardRef(function MultiSelect( light, invalid, invalidText, + warn, + warnText, useTitleInItem, translateWithId, downshiftProps, @@ -104,6 +106,8 @@ const MultiSelect = React.forwardRef(function MultiSelect( } const inline = type === 'inline'; + const showWarning = !invalid && warn; + const wrapperClasses = cx( `${prefix}--multi-select__wrapper`, `${prefix}--list-box__wrapper`, @@ -127,6 +131,7 @@ const MultiSelect = React.forwardRef(function MultiSelect( const className = cx(`${prefix}--multi-select`, containerClassName, { [`${prefix}--multi-select--invalid`]: invalid, + [`${prefix}--multi-select--warning`]: showWarning, [`${prefix}--multi-select--inline`]: inline, [`${prefix}--multi-select--selected`]: selectedItems && selectedItems.length > 0, @@ -189,11 +194,18 @@ const MultiSelect = React.forwardRef(function MultiSelect( light={light} invalid={invalid} invalidText={invalidText} + warn={warn} + warnText={warnText} isOpen={isOpen} id={id}> {invalid && ( )} + {showWarning && ( + + )}