From c8c58657dd85530990157ff53acc906bfcbac0e4 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Mon, 15 Mar 2021 14:36:10 -0700 Subject: [PATCH 01/10] docs(Welcome): update welcome page docs tab (#8095) * docs(Welcome): update welcome page docs tab * fix(type): update typestyles --- packages/react/.storybook/Welcome/Welcome.mdx | 15 +++++++++++++++ .../react/.storybook/Welcome/Welcome.stories.js | 6 ++++++ 2 files changed, 21 insertions(+) create mode 100644 packages/react/.storybook/Welcome/Welcome.mdx diff --git a/packages/react/.storybook/Welcome/Welcome.mdx b/packages/react/.storybook/Welcome/Welcome.mdx new file mode 100644 index 000000000000..223163058c0f --- /dev/null +++ b/packages/react/.storybook/Welcome/Welcome.mdx @@ -0,0 +1,15 @@ +# Welcome + +- [Carbon Website](https://www.carbondesignsystem.com/) +- [IBM Design Language](https://www.ibm.com/design/language/) + +## Other Frameworks + +- [Carbon Angular](https://angular.carbondesignsystem.com) +- [Carbon Vue](http://vue.carbondesignsystem.com) + +## Feedback + +Help us improve the documentation by providing feedback, asking questions on +Slack, or updating the mdx files file on +[GitHub](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components). diff --git a/packages/react/.storybook/Welcome/Welcome.stories.js b/packages/react/.storybook/Welcome/Welcome.stories.js index d37d1334eb9a..ce42c9d188ba 100644 --- a/packages/react/.storybook/Welcome/Welcome.stories.js +++ b/packages/react/.storybook/Welcome/Welcome.stories.js @@ -9,10 +9,16 @@ import React from 'react'; import { Welcome as Intro } from './Welcome'; +import mdx from './Welcome.mdx'; export default { title: ' Getting Started/ Welcome', component: Intro, + parameters: { + docs: { + page: mdx, + }, + }, }; export const Welcome = () => ; From 2ce21ab1822ca4d5cddff0d0fd5a21bc992d4494 Mon Sep 17 00:00:00 2001 From: emyarod Date: Tue, 16 Mar 2021 10:47:15 -0500 Subject: [PATCH 02/10] feat(sketch): remove deprecated icons from sketch plugin (#8060) * refactor(sketch): create icon symbol name formatter function * docs(sketch): fix typo * feat(sketch): programmatically remove deprecated icon symbols Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- packages/sketch/src/commands/icons/shared.js | 58 +++++++++++++++++--- 1 file changed, 51 insertions(+), 7 deletions(-) diff --git a/packages/sketch/src/commands/icons/shared.js b/packages/sketch/src/commands/icons/shared.js index 7e052730bd03..7834f8b178db 100644 --- a/packages/sketch/src/commands/icons/shared.js +++ b/packages/sketch/src/commands/icons/shared.js @@ -14,6 +14,49 @@ import { syncSymbol } from '../../tools/symbols'; const metadata = require('../../../generated/icons/metadata.json'); +/** + * Returns the formatted icon symbol name, given an icon object and a size value + * @param {object} params - getSymbolName parameters + * @param {object} params.icon - an icon object from the icon metadata + * @param {number} params.size + * @returns {string} - formatted icon symbol name: + * `[icon.subcategory] / [icon.subcategory] / / ` + */ +function getSymbolName({ icon, size }) { + const symbolName = `${icon.name} / ${size}`; + if (icon.category && icon.subcategory) { + return `${icon.category} / ${icon.subcategory} / ${symbolName}`; + } + + return symbolName; +} + +/** + * Remove deprecated icon symbols from the current Sketch document + * @param {object} params - removeDeprecatedSymbolArtboards parameters + * @param {Array} params.icons - array of all icon object metadata + * @param {Array} params.sizes - array of icon sizes + * @param {Page} params.symbolsPage - the symbols page as identified by Sketch + */ +function removeDeprecatedSymbolArtboards({ icons, sizes, symbolsPage }) { + const deprecatedIcons = icons.reduce((deprecatedIconsMap, currentIcon) => { + if (currentIcon.deprecated) { + sizes.forEach((size) => { + const symbolName = getSymbolName({ icon: currentIcon, size }); + deprecatedIconsMap.set(symbolName, currentIcon); + }); + } + + return deprecatedIconsMap; + }, new Map()); + + symbolsPage.layers.forEach((symbol) => { + if (deprecatedIcons.get(symbol.name)) { + symbol.remove(); + } + }); +} + export function syncIconSymbols({ document, symbols, @@ -31,6 +74,12 @@ export function syncIconSymbols({ ); } + removeDeprecatedSymbolArtboards({ + icons: metadata.icons, + sizes, + symbolsPage, + }); + const artboards = createSVGArtboards( symbolsPage, sharedStyle, @@ -70,7 +119,7 @@ function getInitialPageOffset(page) { /** * Create the SVG artboards for a given set of icons and sizes and place them in - * the given page with the given shared style set as th e fill. + * the given page with the given shared style set as the fill. * @param {Page} page * @param {SharedStyle} sharedStyle * @param {Array} icons @@ -114,12 +163,7 @@ function createSVGArtboards( }, }; - let symbolName = `${icon.name} / ${size}`; - - if (icon.category && icon.subcategory) { - symbolName = `${icon.category} / ${icon.subcategory} / ${symbolName}`; - } - + const symbolName = getSymbolName({ icon, size }); const artboard = new Artboard({ name: symbolName, frame: new Rectangle(X_OFFSET, Y_OFFSET, size, size), From 1caa09d3ced20d2a67e4e5b1ba5ca28ec441ea49 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 16 Mar 2021 13:07:04 -0500 Subject: [PATCH 03/10] fix(feature-flags): update enabled to check for process (#8020) * fix(feature-flags): update enabled to check for process * fix(feature-flags): update template to use try/catch for process checks Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- packages/feature-flags/package.json | 1 + packages/feature-flags/tasks/build.js | 54 +++++++++++++++++++++------ yarn.lock | 1 + 3 files changed, 45 insertions(+), 11 deletions(-) diff --git a/packages/feature-flags/package.json b/packages/feature-flags/package.json index 9b1e14a5c6fa..6bc6ef9ff4e0 100644 --- a/packages/feature-flags/package.json +++ b/packages/feature-flags/package.json @@ -28,6 +28,7 @@ }, "devDependencies": { "@babel/generator": "^7.10.2", + "@babel/template": "^7.12.13", "@babel/types": "^7.10.2", "@carbon/scss-generator": "^10.13.0", "change-case": "^4.1.2", diff --git a/packages/feature-flags/tasks/build.js b/packages/feature-flags/tasks/build.js index 8589bc8a910b..5dcf36a78514 100644 --- a/packages/feature-flags/tasks/build.js +++ b/packages/feature-flags/tasks/build.js @@ -8,9 +8,10 @@ 'use strict'; const { default: babelGenerate } = require('@babel/generator'); +const { default: template } = require('@babel/template'); const babelTypes = require('@babel/types'); const { types: t, generate } = require('@carbon/scss-generator'); -const { constantCase } = require('change-case'); +const { camelCase, constantCase } = require('change-case'); const fs = require('fs-extra'); const yaml = require('js-yaml'); const path = require('path'); @@ -78,8 +79,46 @@ const javascriptBanner = `/** `; function buildJavaScriptModule(featureFlags) { const t = babelTypes; + const tmpl = template(` + if (process.env.%%env%%) { + if (process.env.%%env%% === 'true') { + enabled.%%key%% = true; + } else { + enabled.%%key%% = false; + } + } else { + enabled.%%key%% = %%defaultEnabled%%; + } + `); + const fallback = template(`enabled.%%key%% = %%enabled%%;`); + const file = t.file( t.program([ + t.variableDeclaration('const', [ + t.variableDeclarator(t.identifier('enabled'), t.objectExpression([])), + ]), + t.tryStatement( + t.blockStatement( + featureFlags.flatMap((featureFlag) => { + return tmpl({ + env: t.identifier(constantCase(`CARBON_${featureFlag.name}`)), + key: t.identifier(camelCase(featureFlag.name)), + defaultEnabled: t.booleanLiteral(featureFlag.enabled), + }); + }) + ), + t.catchClause( + t.identifier('error'), + t.blockStatement( + featureFlags.flatMap((featureFlag) => { + return fallback({ + key: t.identifier(camelCase(featureFlag.name)), + enabled: t.booleanLiteral(featureFlag.enabled), + }); + }) + ) + ) + ), t.exportNamedDeclaration( t.variableDeclaration('const', [ t.variableDeclarator( @@ -97,16 +136,9 @@ function buildJavaScriptModule(featureFlags) { ), t.objectProperty( t.identifier('enabled'), - t.logicalExpression( - '||', - t.memberExpression( - t.memberExpression( - t.identifier('process'), - t.identifier('env') - ), - t.identifier(constantCase(`CARBON_${featureFlag.name}`)) - ), - t.booleanLiteral(featureFlag.enabled) + t.memberExpression( + t.identifier('enabled'), + t.identifier(camelCase(featureFlag.name)) ) ), ]); diff --git a/yarn.lock b/yarn.lock index 8f0a4702341a..f6db9aef3514 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1681,6 +1681,7 @@ __metadata: resolution: "@carbon/feature-flags@workspace:packages/feature-flags" dependencies: "@babel/generator": ^7.10.2 + "@babel/template": ^7.12.13 "@babel/types": ^7.10.2 "@carbon/scss-generator": ^10.13.0 change-case: ^4.1.2 From 3734dff9247081bcaf130c65736cf4385d5be384 Mon Sep 17 00:00:00 2001 From: emyarod Date: Tue, 16 Mar 2021 13:49:55 -0500 Subject: [PATCH 04/10] feat(Select): support warning state (#8092) * feat(Select): support warning state * docs(Select): add warn and warnText knobs * fix(select): adjust invalid icon spacing * chore: update snapshots * fix: update warning icon inner fills for listbox and select Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../components/src/components/form/_form.scss | 1 + .../src/components/list-box/_list-box.scss | 3 +- .../src/components/select/_select.scss | 21 +++++++-- .../__snapshots__/PublicAPI-test.js.snap | 6 +++ .../src/components/Select/Select-story.js | 5 +++ .../react/src/components/Select/Select.js | 43 ++++++++++++++++--- 6 files changed, 67 insertions(+), 12 deletions(-) diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss index e0fe10c0fa0d..315ed74592a9 100644 --- a/packages/components/src/components/form/_form.scss +++ b/packages/components/src/components/form/_form.scss @@ -88,6 +88,7 @@ .#{$prefix}--text-input__field-wrapper--warning > .#{$prefix}--text-input, .#{$prefix}--text-area__wrapper[data-invalid], .#{$prefix}--select-input__wrapper[data-invalid], + .#{$prefix}--select--warning .#{$prefix}--select-input__wrapper, .#{$prefix}--time-picker[data-invalid], .#{$prefix}--list-box[data-invalid], .#{$prefix}--list-box--warning { diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss index dc610e23c40a..9c5033b2b6ef 100644 --- a/packages/components/src/components/list-box/_list-box.scss +++ b/packages/components/src/components/list-box/_list-box.scss @@ -127,8 +127,7 @@ $list-box-menu-width: rem(300px); fill: $support-03; } - .#{$prefix}--list-box__invalid-icon--warning - path[data-icon-path='inner-path'] { + .#{$prefix}--list-box__invalid-icon--warning path[fill] { opacity: 1; fill: $carbon__black-100; } diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss index 1d8d6ba2090b..94c5e5721a6e 100644 --- a/packages/components/src/components/select/_select.scss +++ b/packages/components/src/components/select/_select.scss @@ -108,8 +108,9 @@ color: $disabled-02; } - .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input { - padding-right: carbon--mini-units(10); + .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input, + .#{$prefix}--select--warning .#{$prefix}--select-input { + padding-right: carbon--mini-units(9); } .#{$prefix}--select-input:disabled ~ .#{$prefix}--select__arrow { @@ -149,14 +150,26 @@ } } + .#{$prefix}--select__invalid-icon { + position: absolute; + right: $spacing-08; + } + .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input ~ .#{$prefix}--select__invalid-icon { - position: absolute; - right: $spacing-09; fill: $support-01; } + .#{$prefix}--select__invalid-icon--warning { + fill: $support-03; + } + + .#{$prefix}--select__invalid-icon--warning path[fill] { + opacity: 1; + fill: $carbon__black-100; + } + .#{$prefix}--select-optgroup, .#{$prefix}--select-option { // For the options to show in IE11 diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index d934ef6d5b31..352849cc0e14 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -4727,6 +4727,12 @@ Map { ], "type": "oneOf", }, + "warn": Object { + "type": "bool", + }, + "warnText": Object { + "type": "node", + }, }, "render": [Function], }, diff --git a/packages/react/src/components/Select/Select-story.js b/packages/react/src/components/Select/Select-story.js index faba680b2428..3541aa5a0840 100644 --- a/packages/react/src/components/Select/Select-story.js +++ b/packages/react/src/components/Select/Select-story.js @@ -40,6 +40,11 @@ const props = { labelText: text('Label text (labelText)', 'Select'), helperText: text('Helper text (helperText)', 'Optional helper text.'), onChange: action('onChange'), + warn: boolean('Show warning state (warn)', false), + warnText: text( + 'Warning state text (warnText)', + 'This will overwrite your current settings' + ), }), group: () => ({ disabled: boolean('Disabled (disabled in )', false), diff --git a/packages/react/src/components/Select/Select.js b/packages/react/src/components/Select/Select.js index 30ae2a1164f4..d8bf0b9ebe35 100644 --- a/packages/react/src/components/Select/Select.js +++ b/packages/react/src/components/Select/Select.js @@ -9,7 +9,11 @@ import PropTypes from 'prop-types'; import React from 'react'; import classNames from 'classnames'; import { settings } from 'carbon-components'; -import { ChevronDown16, WarningFilled16 } from '@carbon/icons-react'; +import { + ChevronDown16, + WarningFilled16, + WarningAltFilled16, +} from '@carbon/icons-react'; import deprecate from '../../prop-types/deprecate'; const { prefix } = settings; @@ -32,6 +36,8 @@ const Select = React.forwardRef(function Select( helperText, light, size, + warn, + warnText, ...other }, ref @@ -42,6 +48,7 @@ const Select = React.forwardRef(function Select( [`${prefix}--select--light`]: light, [`${prefix}--select--invalid`]: invalid, [`${prefix}--select--disabled`]: disabled, + [`${prefix}--select--warning`]: warn, [className]: className, }); const labelClasses = classNames(`${prefix}--label`, { @@ -53,11 +60,20 @@ const Select = React.forwardRef(function Select( [`${prefix}--select-input--${size}`]: size, }); const errorId = `${id}-error-msg`; - const error = invalid ? ( -
- {invalidText} -
- ) : null; + const errorText = (() => { + if (invalid) { + return invalidText; + } + if (warn) { + return warnText; + } + })(); + const error = + invalid || warn ? ( +
+ {errorText} +
+ ) : null; const helperTextClasses = classNames(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled, }); @@ -85,6 +101,11 @@ const Select = React.forwardRef(function Select( {invalid && ( )} + {!invalid && warn && ( + + )} ); })(); @@ -208,6 +229,16 @@ Select.propTypes = { * Specify the size of the Select Input. Currently supports either `sm` or `xl` as an option. */ size: PropTypes.oneOf(['sm', 'xl']), + + /** + * 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.node, }; Select.defaultProps = { From 8714af566adceb1ba51680b4584367641803e073 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Tue, 16 Mar 2021 14:29:09 -0500 Subject: [PATCH 05/10] fix(overflowmenuitem): isDanger should not apply a dividing border (#8072) * fix(overflowmenuitem): isDanger should not apply a dividing border * chore(overflowmenu): modify playground story to showcase item props * chore(overflowmenu): simplify playground story * fix(overflowmenuitem): isDanger should not apply a divider on light prop Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../src/components/overflow-menu/_overflow-menu.scss | 9 --------- .../src/components/OverflowMenu/OverflowMenu-story.js | 2 ++ 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/components/src/components/overflow-menu/_overflow-menu.scss b/packages/components/src/components/overflow-menu/_overflow-menu.scss index 3471e4bb5fec..9273c8a07909 100644 --- a/packages/components/src/components/overflow-menu/_overflow-menu.scss +++ b/packages/components/src/components/overflow-menu/_overflow-menu.scss @@ -292,15 +292,6 @@ background-color: $hover-ui; } - .#{$prefix}--overflow-menu-options__option--danger { - border-top: 1px solid $ui-03; - } - - .#{$prefix}--overflow-menu--light - .#{$prefix}--overflow-menu-options__option--danger { - border-top: 1px solid $decorative-01; - } - .#{$prefix}--overflow-menu-options__option--danger .#{$prefix}--overflow-menu-options__btn:hover, .#{$prefix}--overflow-menu-options__option--danger diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js index ac75d45bc16f..8658e8726d0d 100644 --- a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js +++ b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js @@ -49,6 +49,8 @@ const props = { false ), onClick: action('onClick'), + hasDivider: boolean('Has divider (hasDivider)', false), + isDelete: boolean('Is delete (isDelete)', false), }), }; From 66107484b67920bcfef785e9c2d51c4e5c2b2f22 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Tue, 16 Mar 2021 15:02:02 -0500 Subject: [PATCH 06/10] fix(tab): tabpanel is tabbable when content has no tabbable content (#7894) * fix(tab): tabpanel is focusable when content has no focusable content * fix(tabcontent): automatically determine if contents is tabbable * Update packages/react/src/components/TabContent/TabContent.js Co-authored-by: emyarod * feat(tabs): add useIsomorphicEffect, reconfigure useTabbableContent Co-authored-by: emyarod Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../components/TabContent/TabContent-test.js | 55 ++++++++++++++----- .../src/components/TabContent/TabContent.js | 25 ++++++++- .../react/src/components/Tabs/Tabs-story.js | 2 + .../react/src/internal/useIsomorphicEffect.js | 7 +++ 4 files changed, 72 insertions(+), 17 deletions(-) create mode 100644 packages/react/src/internal/useIsomorphicEffect.js diff --git a/packages/react/src/components/TabContent/TabContent-test.js b/packages/react/src/components/TabContent/TabContent-test.js index 6f43b8f46361..0ac53779850b 100644 --- a/packages/react/src/components/TabContent/TabContent-test.js +++ b/packages/react/src/components/TabContent/TabContent-test.js @@ -7,29 +7,54 @@ import React from 'react'; import TabContent from '../TabContent'; -import { shallow } from 'enzyme'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; describe('TabContent', () => { describe('renders as expected', () => { - const wrapper = shallow( - -
content
-
content
- - ); - it('renders children as expected', () => { - expect(wrapper.props().children.length).toEqual(2); + render( + +
content
+
content
+ + ); + expect(screen.getByRole('tabpanel').children.length).toEqual(2); }); - it('sets selected if passed in via props', () => { - wrapper.setProps({ selected: true }); - expect(wrapper.props().selected).toEqual(true); + it('sets selected and hidden props with opposite boolean values', () => { + const { rerender } = render( + +
content
+
content
+ + ); + expect(screen.queryByRole('tabpanel')).not.toBeInTheDocument(); + rerender( + +
content
+
content
+ + ); + expect(screen.getByRole('tabpanel')).toBeVisible(); }); - it('sets selected and hidden props with opposite boolean values', () => { - wrapper.setProps({ selected: true }); - expect(wrapper.props().hidden).toEqual(false); + it('includes the content container in the tabbable index when no tabble contents is provided', () => { + render( + +

content

+ + ); + expect(screen.getByRole('tabpanel')).toHaveAttribute('tabindex', '0'); + }); + + it('does not include the content container in the tabbable index when tabble contents is provided', () => { + render( + + content + + ); + expect(screen.getByRole('tabpanel')).not.toHaveAttribute('tabindex', '0'); }); }); }); diff --git a/packages/react/src/components/TabContent/TabContent.js b/packages/react/src/components/TabContent/TabContent.js index abe8140d73d3..5269fe427ee9 100644 --- a/packages/react/src/components/TabContent/TabContent.js +++ b/packages/react/src/components/TabContent/TabContent.js @@ -6,24 +6,45 @@ */ import PropTypes from 'prop-types'; -import React from 'react'; +import React, { useState, useRef } from 'react'; import classNames from 'classnames'; import { settings } from 'carbon-components'; +import { selectorTabbable } from '../../internal/keyboard/navigation'; +import useIsomorphicEffect from '../../internal/useIsomorphicEffect'; const { prefix } = settings; +/** + * Determine if the node within the provided ref contains content that is tabbable. + */ +function useTabbableContent(ref) { + const [hasTabbableContent, setHasTabbableContent] = useState(false); + + useIsomorphicEffect(() => { + if (ref.current) { + setHasTabbableContent(ref.current.querySelector(selectorTabbable)); + } + }); + + return hasTabbableContent; +} + const TabContent = (props) => { const { className, selected, children, ...other } = props; const tabContentClasses = classNames(`${prefix}--tab-content`, { [className]: className, }); + const ref = useRef(null); + const hasTabbableContent = useTabbableContent(ref); return ( ); diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js index 72ce156249f5..da9e59f22a0a 100644 --- a/packages/react/src/components/Tabs/Tabs-story.js +++ b/packages/react/src/components/Tabs/Tabs-story.js @@ -18,6 +18,7 @@ import { settings } from 'carbon-components'; import classNames from 'classnames'; import './Tabs-story.scss'; import CodeSnippet from '../CodeSnippet'; +import Button from '../Button'; import Tabs from '../Tabs'; import Tab from '../Tab'; import TabsSkeleton from '../Tabs/Tabs.Skeleton'; @@ -128,6 +129,7 @@ export const _Default = () => (

Content for second tab goes here.

+

Content for third tab goes here.

diff --git a/packages/react/src/internal/useIsomorphicEffect.js b/packages/react/src/internal/useIsomorphicEffect.js new file mode 100644 index 000000000000..93b9f7e5ec7a --- /dev/null +++ b/packages/react/src/internal/useIsomorphicEffect.js @@ -0,0 +1,7 @@ +import { useEffect, useLayoutEffect } from 'react'; + +// useLayoutEffect on the client, useEffect on the server +const useIsomorphicEffect = + typeof window !== 'undefined' ? useLayoutEffect : useEffect; + +export default useIsomorphicEffect; From 9e44ee5cf5c3a899292553e58fc0ca47c2e4221c Mon Sep 17 00:00:00 2001 From: emyarod Date: Tue, 16 Mar 2021 16:38:29 -0500 Subject: [PATCH 07/10] fix: update vanilla loading spinner markup and replace expanded containers with margin (#7968) * chore: format * fix(loading): match markup with React implementation * fix(inline-loading): match markup with React implementation * fix(inline-loading): replace expanded container with margin Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../inline-loading/_inline-loading.scss | 3 +-- .../inline-loading/inline-loading.hbs | 14 +++++----- .../src/components/loading/loading.hbs | 27 ++++++++++--------- 3 files changed, 23 insertions(+), 21 deletions(-) diff --git a/packages/components/src/components/inline-loading/_inline-loading.scss b/packages/components/src/components/inline-loading/_inline-loading.scss index ddab4df8ef32..ff1cf116e515 100644 --- a/packages/components/src/components/inline-loading/_inline-loading.scss +++ b/packages/components/src/components/inline-loading/_inline-loading.scss @@ -42,8 +42,7 @@ display: flex; align-items: center; justify-content: center; - width: 2rem; - height: 2rem; + margin-right: $carbon--spacing-03; } .#{$prefix}--inline-loading__checkmark-container { diff --git a/packages/components/src/components/inline-loading/inline-loading.hbs b/packages/components/src/components/inline-loading/inline-loading.hbs index d7374ccea8d4..46704c0e7136 100644 --- a/packages/components/src/components/inline-loading/inline-loading.hbs +++ b/packages/components/src/components/inline-loading/inline-loading.hbs @@ -9,13 +9,15 @@ {{/if}} From a0812ed01df8e3caa9ee7ac1faafe084d603cba1 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Tue, 16 Mar 2021 16:48:07 -0500 Subject: [PATCH 08/10] chore(release): v10.31.0-rc.0 (#8109) --- packages/components/package.json | 8 +++--- packages/elements/package.json | 4 +-- packages/feature-flags/package.json | 2 +- packages/icons-handlebars/package.json | 4 +-- packages/icons-react/package.json | 4 +-- packages/icons-vue/package.json | 4 +-- packages/icons/package.json | 2 +- packages/react/package.json | 8 +++--- packages/sketch/package.json | 4 +-- yarn.lock | 34 +++++++++++++------------- 10 files changed, 37 insertions(+), 37 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index b149acb8fc1a..aaf6380fe8fa 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,7 +1,7 @@ { "name": "carbon-components", "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.", - "version": "10.30.0", + "version": "10.31.0-rc.0", "license": "Apache-2.0", "main": "umd/index.js", "module": "es/index.js", @@ -85,9 +85,9 @@ "@babel/preset-react": "^7.10.0", "@babel/runtime": "^7.10.0", "@carbon/cli": "^10.20.0", - "@carbon/elements": "^10.29.0", - "@carbon/icons-handlebars": "^10.27.0", - "@carbon/icons-react": "^10.27.0", + "@carbon/elements": "^10.30.0-rc.0", + "@carbon/icons-handlebars": "^10.28.0-rc.0", + "@carbon/icons-react": "^10.28.0-rc.0", "@carbon/test-utils": "^10.15.0", "@frctl/fractal": "^1.1.0", "@rollup/plugin-babel": "^5.2.2", diff --git a/packages/elements/package.json b/packages/elements/package.json index 5d41528d56d3..2a3a3cb0f3f5 100644 --- a/packages/elements/package.json +++ b/packages/elements/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/elements", "description": "A collection of design elements in code for the IBM Design Language", - "version": "10.29.0", + "version": "10.30.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -37,7 +37,7 @@ "dependencies": { "@carbon/colors": "^10.21.0", "@carbon/grid": "^10.22.0", - "@carbon/icons": "^10.27.0", + "@carbon/icons": "^10.28.0-rc.0", "@carbon/import-once": "^10.6.0", "@carbon/layout": "^10.20.0", "@carbon/motion": "^10.14.0", diff --git a/packages/feature-flags/package.json b/packages/feature-flags/package.json index 6bc6ef9ff4e0..99890d4352fc 100644 --- a/packages/feature-flags/package.json +++ b/packages/feature-flags/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/feature-flags", "description": "Build with feature flags in Carbon", - "version": "0.1.0", + "version": "0.2.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/icons-handlebars/package.json b/packages/icons-handlebars/package.json index 1321b23b58a5..dc372c94dd59 100644 --- a/packages/icons-handlebars/package.json +++ b/packages/icons-handlebars/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/icons-handlebars", "description": "Handlebars helpers for IBM Design Language icons in digital and software products using the Carbon Design System", - "version": "10.27.0", + "version": "10.28.0-rc.0", "license": "Apache-2.0", "main": "index.js", "repository": { @@ -27,7 +27,7 @@ }, "dependencies": { "@carbon/icon-helpers": "^10.14.0", - "@carbon/icons": "^10.27.0" + "@carbon/icons": "^10.28.0-rc.0" }, "devDependencies": { "handlebars": "^4.0.12" diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json index e05c98fbd978..ed27fb9f95f4 100644 --- a/packages/icons-react/package.json +++ b/packages/icons-react/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/icons-react", "description": "React components for icons in digital and software products using the Carbon Design System", - "version": "10.27.0", + "version": "10.28.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -41,7 +41,7 @@ }, "devDependencies": { "@carbon/icon-build-helpers": "^0.17.0", - "@carbon/icons": "^10.27.0" + "@carbon/icons": "^10.28.0-rc.0" }, "sideEffects": false } diff --git a/packages/icons-vue/package.json b/packages/icons-vue/package.json index 4d3c25871e4d..a1ecb9428fa6 100644 --- a/packages/icons-vue/package.json +++ b/packages/icons-vue/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/icons-vue", "description": "Vue components for icons in digital and software products using the Carbon Design System", - "version": "10.27.0", + "version": "10.28.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -32,7 +32,7 @@ }, "devDependencies": { "@carbon/cli-reporter": "^10.4.0", - "@carbon/icons": "^10.27.0", + "@carbon/icons": "^10.28.0-rc.0", "fs-extra": "^8.1.0", "prettier": "^2.2.1", "rimraf": "^3.0.0", diff --git a/packages/icons/package.json b/packages/icons/package.json index 475b44d06f3d..d489ea1e9b04 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/icons", "description": "Icons for digital and software products using the Carbon Design System", - "version": "10.27.0", + "version": "10.28.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/react/package.json b/packages/react/package.json index 222fec826ac9..b857c5e7693d 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "carbon-components-react", "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.", - "version": "7.30.0", + "version": "7.31.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -44,8 +44,8 @@ "react-dom": "^16.8.6 || ^17.0.1" }, "dependencies": { - "@carbon/feature-flags": "^0.1.0", - "@carbon/icons-react": "^10.27.0", + "@carbon/feature-flags": "^0.2.0-rc.0", + "@carbon/icons-react": "^10.28.0-rc.0", "@carbon/telemetry": "0.0.0-alpha.6", "classnames": "2.2.6", "downshift": "5.2.1", @@ -90,7 +90,7 @@ "babel-plugin-react-docgen": "^4.2.1", "babel-plugin-transform-inline-environment-variables": "^0.4.0", "browserslist-config-carbon": "^10.6.1", - "carbon-components": "^10.30.0", + "carbon-components": "^10.31.0-rc.0", "carbon-icons": "^7.0.5", "chalk": "^2.3.0", "cli-table": "^0.3.0", diff --git a/packages/sketch/package.json b/packages/sketch/package.json index 25b48e86d4f3..ac6c8bfc2ce4 100644 --- a/packages/sketch/package.json +++ b/packages/sketch/package.json @@ -2,7 +2,7 @@ "name": "@carbon/sketch", "private": true, "description": "Tooling for generating a sketch plugin to bring code to design", - "version": "10.28.0", + "version": "10.29.0-rc.0", "license": "Apache-2.0", "repository": { "type": "git", @@ -31,7 +31,7 @@ "@babel/polyfill": "^7.8.7", "@carbon/colors": "^10.21.0", "@carbon/icon-helpers": "^10.14.0", - "@carbon/icons": "^10.27.0", + "@carbon/icons": "^10.28.0-rc.0", "@carbon/themes": "^10.29.0", "@carbon/type": "^10.23.0", "@skpm/builder": "^0.7.0", diff --git a/yarn.lock b/yarn.lock index f6db9aef3514..95ed59bceb47 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1656,14 +1656,14 @@ __metadata: languageName: unknown linkType: soft -"@carbon/elements@^10.29.0, @carbon/elements@workspace:packages/elements": +"@carbon/elements@^10.30.0-rc.0, @carbon/elements@workspace:packages/elements": version: 0.0.0-use.local resolution: "@carbon/elements@workspace:packages/elements" dependencies: "@carbon/cli": ^10.20.0 "@carbon/colors": ^10.21.0 "@carbon/grid": ^10.22.0 - "@carbon/icons": ^10.27.0 + "@carbon/icons": ^10.28.0-rc.0 "@carbon/import-once": ^10.6.0 "@carbon/layout": ^10.20.0 "@carbon/motion": ^10.14.0 @@ -1676,7 +1676,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/feature-flags@^0.1.0, @carbon/feature-flags@workspace:packages/feature-flags": +"@carbon/feature-flags@^0.2.0-rc.0, @carbon/feature-flags@workspace:packages/feature-flags": version: 0.0.0-use.local resolution: "@carbon/feature-flags@workspace:packages/feature-flags" dependencies: @@ -1750,25 +1750,25 @@ __metadata: languageName: node linkType: hard -"@carbon/icons-handlebars@^10.27.0, @carbon/icons-handlebars@workspace:packages/icons-handlebars": +"@carbon/icons-handlebars@^10.28.0-rc.0, @carbon/icons-handlebars@workspace:packages/icons-handlebars": version: 0.0.0-use.local resolution: "@carbon/icons-handlebars@workspace:packages/icons-handlebars" dependencies: "@carbon/icon-helpers": ^10.14.0 - "@carbon/icons": ^10.27.0 + "@carbon/icons": ^10.28.0-rc.0 handlebars: ^4.0.12 peerDependencies: handlebars: ^4.0.12 languageName: unknown linkType: soft -"@carbon/icons-react@^10.27.0, @carbon/icons-react@workspace:packages/icons-react": +"@carbon/icons-react@^10.28.0-rc.0, @carbon/icons-react@workspace:packages/icons-react": version: 0.0.0-use.local resolution: "@carbon/icons-react@workspace:packages/icons-react" dependencies: "@carbon/icon-build-helpers": ^0.17.0 "@carbon/icon-helpers": ^10.14.0 - "@carbon/icons": ^10.27.0 + "@carbon/icons": ^10.28.0-rc.0 prop-types: ^15.7.2 peerDependencies: react: ">=16" @@ -1791,7 +1791,7 @@ __metadata: dependencies: "@carbon/cli-reporter": ^10.4.0 "@carbon/icon-helpers": ^10.14.0 - "@carbon/icons": ^10.27.0 + "@carbon/icons": ^10.28.0-rc.0 fs-extra: ^8.1.0 prettier: ^2.2.1 rimraf: ^3.0.0 @@ -1800,7 +1800,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/icons@^10.27.0, @carbon/icons@workspace:packages/icons": +"@carbon/icons@^10.28.0-rc.0, @carbon/icons@workspace:packages/icons": version: 0.0.0-use.local resolution: "@carbon/icons@workspace:packages/icons" dependencies: @@ -1876,7 +1876,7 @@ __metadata: "@babel/polyfill": ^7.8.7 "@carbon/colors": ^10.21.0 "@carbon/icon-helpers": ^10.14.0 - "@carbon/icons": ^10.27.0 + "@carbon/icons": ^10.28.0-rc.0 "@carbon/themes": ^10.29.0 "@carbon/type": ^10.23.0 "@skpm/builder": ^0.7.0 @@ -9196,8 +9196,8 @@ __metadata: "@babel/plugin-transform-object-assign": ^7.7.4 "@babel/preset-env": ^7.10.0 "@babel/preset-react": ^7.10.0 - "@carbon/feature-flags": ^0.1.0 - "@carbon/icons-react": ^10.27.0 + "@carbon/feature-flags": ^0.2.0-rc.0 + "@carbon/icons-react": ^10.28.0-rc.0 "@carbon/telemetry": 0.0.0-alpha.6 "@carbon/test-utils": ^10.15.0 "@percy/storybook": ^3.3.1 @@ -9216,7 +9216,7 @@ __metadata: babel-plugin-react-docgen: ^4.2.1 babel-plugin-transform-inline-environment-variables: ^0.4.0 browserslist-config-carbon: ^10.6.1 - carbon-components: ^10.30.0 + carbon-components: ^10.31.0-rc.0 carbon-icons: ^7.0.5 chalk: ^2.3.0 classnames: 2.2.6 @@ -9271,7 +9271,7 @@ __metadata: languageName: unknown linkType: soft -"carbon-components@^10.30.0, carbon-components@workspace:packages/components": +"carbon-components@^10.31.0-rc.0, carbon-components@workspace:packages/components": version: 0.0.0-use.local resolution: "carbon-components@workspace:packages/components" dependencies: @@ -9284,9 +9284,9 @@ __metadata: "@babel/preset-react": ^7.10.0 "@babel/runtime": ^7.10.0 "@carbon/cli": ^10.20.0 - "@carbon/elements": ^10.29.0 - "@carbon/icons-handlebars": ^10.27.0 - "@carbon/icons-react": ^10.27.0 + "@carbon/elements": ^10.30.0-rc.0 + "@carbon/icons-handlebars": ^10.28.0-rc.0 + "@carbon/icons-react": ^10.28.0-rc.0 "@carbon/telemetry": 0.0.0-alpha.6 "@carbon/test-utils": ^10.15.0 "@frctl/fractal": ^1.1.0 From e342c5a8afef9beb6d9835abd88181903c4cfff3 Mon Sep 17 00:00:00 2001 From: emyarod Date: Tue, 16 Mar 2021 20:25:18 -0500 Subject: [PATCH 09/10] fix(NumberInput): set negative tabindex on number controls (#8090) * refactor(NumberInput): remove unneeded aria-live and aria-atomic attrs * fix(NumberInput): set negative tabindex on number controls Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- packages/react/src/components/NumberInput/NumberInput.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/NumberInput/NumberInput.js b/packages/react/src/components/NumberInput/NumberInput.js index 2b0749fe8fae..91d39c10ba32 100644 --- a/packages/react/src/components/NumberInput/NumberInput.js +++ b/packages/react/src/components/NumberInput/NumberInput.js @@ -469,8 +469,7 @@ class NumberInput extends Component { onClick={(evt) => this.handleArrowClick(evt, 'down')} title={decrementNumLabel || iconDescription} aria-label={decrementNumLabel || iconDescription} - aria-live="polite" - aria-atomic="true"> + tabIndex="-1">
@@ -481,8 +480,7 @@ class NumberInput extends Component { onClick={(evt) => this.handleArrowClick(evt, 'up')} title={incrementNumLabel || iconDescription} aria-label={incrementNumLabel || iconDescription} - aria-live="polite" - aria-atomic="true"> + tabIndex="-1">
From 322ca4de82e5e89f34c2a1096c4602e71880bb59 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Wed, 17 Mar 2021 11:16:11 -0500 Subject: [PATCH 10/10] fix(carbon-cli): change MASTER reference to MAIN (#8110) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- packages/cli/src/git.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cli/src/git.js b/packages/cli/src/git.js index b3aa7c644caa..f9037d779f07 100644 --- a/packages/cli/src/git.js +++ b/packages/cli/src/git.js @@ -30,7 +30,7 @@ async function fetchLatestFromUpstream() { 'git@github.com:carbon-design-system/carbon.git', ]); } - await execa('git', ['fetch', 'upstream', 'master', '--tags']); + await execa('git', ['fetch', 'upstream', 'main', '--tags']); } module.exports = {