From 1cd6f02d06a9e48ccfa618005eaadf4022dc6ca1 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 27 Aug 2024 22:04:00 +0000 Subject: [PATCH 1/2] fix(deps): update dependency stylelint-config-standard to v36 --- ...ended-npm-14.0.1-95db5683e0-93c3fe9209.zip | Bin 0 -> 3528 bytes ...ndard-npm-36.0.1-3dfaa82493-50b8fb396f.zip | Bin 0 -> 4496 bytes config/stylelint-config-carbon/package.json | 2 +- yarn.lock | 22 +++++++++++++++++- 4 files changed, 22 insertions(+), 2 deletions(-) create mode 100644 .yarn/cache/stylelint-config-recommended-npm-14.0.1-95db5683e0-93c3fe9209.zip create mode 100644 .yarn/cache/stylelint-config-standard-npm-36.0.1-3dfaa82493-50b8fb396f.zip diff --git a/.yarn/cache/stylelint-config-recommended-npm-14.0.1-95db5683e0-93c3fe9209.zip b/.yarn/cache/stylelint-config-recommended-npm-14.0.1-95db5683e0-93c3fe9209.zip new file mode 100644 index 0000000000000000000000000000000000000000..24c46313206cfbd0c81222f506163b4c675503ff GIT binary patch literal 3528 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 Date: Wed, 23 Oct 2024 19:12:03 -0400 Subject: [PATCH 2/2] chore(prettier): format code --- docs/guides/icons.md | 3 +- docs/guides/support.md | 4 +- packages/grid/scss/_css-grid.scss | 12 +- .../src/builders/vanilla.js | 5 +- .../src/builders/vue/builder.js | 5 +- .../src/components/Button/ButtonBase.tsx | 2 +- .../src/components/ComboBox/ComboBox.tsx | 12 +- .../react/src/components/Heading/index.tsx | 2 +- .../InlineCheckbox/InlineCheckbox.js | 135 +++++++------- packages/react/src/components/Layer/index.tsx | 2 +- .../MultiSelect/FilterableMultiSelect.tsx | 2 +- .../react/src/components/Search/Search.tsx | 4 +- .../react/src/components/Slider/Slider.tsx | 4 +- packages/react/src/components/Stack/Stack.tsx | 57 +++--- .../react/src/components/Stack/VStack.tsx | 11 +- .../react/src/components/Toggletip/index.tsx | 2 +- .../src/components/UIShell/SideNavLink.tsx | 2 +- .../react/src/components/UIShell/Switcher.tsx | 174 +++++++++--------- .../src/internal/__tests__/wrapFocus-test.js | 10 +- packages/react/src/types/common.ts | 2 +- .../scss/components/accordion/_accordion.scss | 9 +- .../scss/components/button/_button.scss | 5 +- .../scss/components/button/_mixins.scss | 11 +- .../content-switcher/_content-switcher.scss | 4 +- .../data-table/action/_data-table-action.scss | 12 +- .../expandable/_data-table-expandable.scss | 16 +- .../data-table/sort/_data-table-sort.scss | 3 +- .../components/date-picker/_flatpickr.scss | 12 +- .../scss/components/dialog/_dialog.scss | 13 +- .../scss/components/dropdown/_dropdown.scss | 3 +- .../fluid-date-picker/_fluid-date-picker.scss | 3 +- .../fluid-list-box/_fluid-list-box.scss | 3 +- .../_fluid-number-input.scss | 4 +- .../fluid-select/_fluid-select.scss | 3 +- .../fluid-text-input/_fluid-text-input.scss | 3 +- .../scss/components/list-box/_list-box.scss | 3 +- .../scss/components/loading/_animation.scss | 3 +- .../styles/scss/components/modal/_modal.scss | 12 +- .../_actionable-notification.scss | 6 +- .../notification/_inline-notification.scss | 3 +- .../notification/_toast-notification.scss | 4 +- .../number-input/_number-input.scss | 3 +- .../overflow-menu/_overflow-menu.scss | 6 +- .../pagination-nav/_pagination-nav.scss | 3 +- .../components/pagination/_pagination.scss | 3 +- .../pagination/_unstable_pagination.scss | 3 +- .../_progress-indicator.scss | 3 +- .../scss/components/search/_search.scss | 9 +- .../scss/components/slider/_slider.scss | 11 +- .../styles/scss/components/slug/_slug.scss | 17 +- .../styles/scss/components/tabs/_tabs.scss | 6 +- packages/styles/scss/components/tag/_tag.scss | 3 +- .../scss/components/text-area/_text-area.scss | 3 +- .../components/text-input/_text-input.scss | 6 +- .../styles/scss/components/tile/_tile.scss | 15 +- .../components/time-picker/_time-picker.scss | 3 +- .../scss/components/toggle/_toggle.scss | 4 +- .../components/ui-shell/header/_header.scss | 13 +- .../ui-shell/side-nav/_side-nav.scss | 17 +- .../styles/scss/utilities/_ai-gradient.scss | 9 +- packages/type/README.md | 12 +- .../utilities/src/dateTimeFormat/absolute.ts | 4 +- packages/web-components/README.md | 2 +- .../src/components/ai-label/ai-label.scss | 3 +- .../src/components/combo-box/combo-box.ts | 2 +- .../components/data-table/_table-action.scss | 3 +- .../data-table/table-toolbar-content.ts | 4 +- .../src/components/dropdown/dropdown.ts | 4 +- .../file-uploader/demo-file-uploader.ts | 2 +- .../file-uploader/file-uploader-button.ts | 2 +- .../file-uploader-drop-container.ts | 2 +- .../src/components/layer/layer.stories.ts | 5 +- .../src/components/modal/modal.scss | 12 +- .../notification/actionable-notification.scss | 3 +- .../src/components/slug/slug.scss | 3 +- .../src/components/tabs/tabs.scss | 3 +- .../src/components/tile/tile.scss | 3 +- .../src/globals/directives/if-non-empty.ts | 2 +- tasks/sync.js | 4 +- 79 files changed, 448 insertions(+), 349 deletions(-) diff --git a/docs/guides/icons.md b/docs/guides/icons.md index 4e59ccd676de..250cc11d4e26 100644 --- a/docs/guides/icons.md +++ b/docs/guides/icons.md @@ -150,8 +150,7 @@ update PR: `--modifiers`. All icons with `--modifiers` are listed as variants of the same icon. 3. make desired edits on the icon's `aliases` list. -4. commit changes, preferably with a commit message "[icon name] metadata - update". +4. commit changes, preferably with a commit message "[icon name] metadata update". 5. create a new branch, suggested branch name is `yourname-metadata-iconName` 6. create the PR from your branch, or click on `Propose file change` if you are in browser. diff --git a/docs/guides/support.md b/docs/guides/support.md index 12296af4c810..62fcb4d05bb1 100644 --- a/docs/guides/support.md +++ b/docs/guides/support.md @@ -40,8 +40,8 @@ started in case you get stuck. - “Could you share more about what you’ve already tried?” - “Can you share more about your usecase?” - “Can you add a repro (reproduction) using Stackblitz?” -- “After searching through [FILL IN RESOURCE HERE], I was able to find this and - thought it might be helpful... Let me know if that works.” +- “After searching through [FILL IN RESOURCE HERE], I was able to find this and thought + it might be helpful... Let me know if that works.” ### What does "ongoing support" mean regarding GitHub? diff --git a/packages/grid/scss/_css-grid.scss b/packages/grid/scss/_css-grid.scss index 48da59bc0e91..6913cf61ffb5 100644 --- a/packages/grid/scss/_css-grid.scss +++ b/packages/grid/scss/_css-grid.scss @@ -144,8 +144,10 @@ // Condensed .#{$prefix}--css-grid--condensed { --cds-grid-gutter: #{$grid-gutter-condensed}; - --cds-grid-column-hang: #{math.div($grid-gutter, 2) - - math.div($grid-gutter-condensed, 2)}; + --cds-grid-column-hang: #{math.div($grid-gutter, 2) - math.div( + $grid-gutter-condensed, + 2 + )}; } // ----------------------------------------------------------------------------- @@ -193,8 +195,10 @@ .#{$prefix}--subgrid--condensed { --cds-grid-gutter-start: #{math.div($grid-gutter-condensed, 2)}; --cds-grid-gutter-end: #{math.div($grid-gutter-condensed, 2)}; - --cds-grid-column-hang: #{math.div($grid-gutter, 2) - - math.div($grid-gutter-condensed, 2)}; + --cds-grid-column-hang: #{math.div($grid-gutter, 2) - math.div( + $grid-gutter-condensed, + 2 + )}; } // ----------------------------------------------------------------------------- diff --git a/packages/icon-build-helpers/src/builders/vanilla.js b/packages/icon-build-helpers/src/builders/vanilla.js index d20343b32fb0..8362388812d2 100644 --- a/packages/icon-build-helpers/src/builders/vanilla.js +++ b/packages/icon-build-helpers/src/builders/vanilla.js @@ -57,9 +57,8 @@ async function builder(metadata, { output }) { for (const m of modules) { files[m.filepath] = m.source; input[m.filepath] = m.filepath; - files[ - 'index.js' - ] += `\nexport { default as ${m.moduleName} } from '${m.filepath}';`; + files['index.js'] += + `\nexport { default as ${m.moduleName} } from '${m.filepath}';`; } const bundle = await rollup({ diff --git a/packages/icon-build-helpers/src/builders/vue/builder.js b/packages/icon-build-helpers/src/builders/vue/builder.js index 7c33b76d25ef..3e9c22abe702 100644 --- a/packages/icon-build-helpers/src/builders/vue/builder.js +++ b/packages/icon-build-helpers/src/builders/vue/builder.js @@ -73,9 +73,8 @@ async function builder(metadata, { output }) { for (const m of modules) { files[m.filepath] = m.source; input[m.filepath] = m.filepath; - files[ - 'index.js' - ] += `\nexport { default as ${m.moduleName} } from '${m.filepath}';`; + files['index.js'] += + `\nexport { default as ${m.moduleName} } from '${m.filepath}';`; } const bundle = await rollup({ diff --git a/packages/react/src/components/Button/ButtonBase.tsx b/packages/react/src/components/Button/ButtonBase.tsx index 3dba223de95d..643773437475 100644 --- a/packages/react/src/components/Button/ButtonBase.tsx +++ b/packages/react/src/components/Button/ButtonBase.tsx @@ -12,7 +12,7 @@ import { useId } from '../../internal/useId'; import { ButtonBaseProps, ButtonProps } from './Button'; const ButtonBase = React.forwardRef(function ButtonBase< - T extends React.ElementType + T extends React.ElementType, >( { as, diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx index afac03b9a278..d56c4b7b0c04 100644 --- a/packages/react/src/components/ComboBox/ComboBox.tsx +++ b/packages/react/src/components/ComboBox/ComboBox.tsx @@ -527,12 +527,12 @@ const ComboBox = forwardRef( typeahead ? autocompleteCustomFilter({ item: itemToString(item), inputValue }) : shouldFilterItem - ? shouldFilterItem({ - item, - itemToString, - inputValue, - }) - : defaultShouldFilterItem() + ? shouldFilterItem({ + item, + itemToString, + inputValue, + }) + : defaultShouldFilterItem() ); useEffect(() => { diff --git a/packages/react/src/components/Heading/index.tsx b/packages/react/src/components/Heading/index.tsx index 4c0dea11580a..2effad430b43 100644 --- a/packages/react/src/components/Heading/index.tsx +++ b/packages/react/src/components/Heading/index.tsx @@ -23,7 +23,7 @@ type SectionProps = PolymorphicProps< >; export const Section = React.forwardRef(function Section< - E extends ElementType = 'section' + E extends ElementType = 'section', >( { as: BaseComponent = 'section' as E, diff --git a/packages/react/src/components/InlineCheckbox/InlineCheckbox.js b/packages/react/src/components/InlineCheckbox/InlineCheckbox.js index 3d02d247b959..ae1b45d26325 100644 --- a/packages/react/src/components/InlineCheckbox/InlineCheckbox.js +++ b/packages/react/src/components/InlineCheckbox/InlineCheckbox.js @@ -12,79 +12,78 @@ import { usePrefix } from '../../internal/usePrefix'; import { useMergedRefs } from '../../internal/useMergedRefs'; /** @type any */ -const InlineCheckbox = React.forwardRef(function InlineCheckbox( - props, - forwardRef -) { - const { - ['aria-label']: ariaLabel, - ariaLabel: deprecatedAriaLabel, - checked = false, - disabled, - id, - indeterminate, - name, - onChange = () => {}, - onClick, - onKeyDown, - title, - } = props; - const prefix = usePrefix(); - const inputRef = useRef(null); - const ref = useMergedRefs([inputRef, forwardRef]); - const inputProps = { - checked, - className: `${prefix}--checkbox`, - disabled, - id, - name, - onClick: onClick ? onClickCheckBoxInput : onClick, - onChange: (evt) => { - onChange(evt.target.checked, id, evt); - }, - onKeyDown, - ref, - type: 'checkbox', - }; - - if (indeterminate) { - inputProps.checked = false; - } - - useEffect(() => { - if (inputRef?.current) { - inputRef.current.indeterminate = indeterminate; - } - }, [indeterminate]); +const InlineCheckbox = React.forwardRef( + function InlineCheckbox(props, forwardRef) { + const { + ['aria-label']: ariaLabel, + ariaLabel: deprecatedAriaLabel, + checked = false, + disabled, + id, + indeterminate, + name, + onChange = () => {}, + onClick, + onKeyDown, + title, + } = props; + const prefix = usePrefix(); + const inputRef = useRef(null); + const ref = useMergedRefs([inputRef, forwardRef]); + const inputProps = { + checked, + className: `${prefix}--checkbox`, + disabled, + id, + name, + onClick: onClick ? onClickCheckBoxInput : onClick, + onChange: (evt) => { + onChange(evt.target.checked, id, evt); + }, + onKeyDown, + ref, + type: 'checkbox', + }; - function onClickCheckBoxInput(evt) { - // If the previous "indeterminate" is true, change "checked" to false. If it is not undefined, we're working on `TableSelectAll` if (indeterminate) { - evt.target.checked = false; + inputProps.checked = false; } - onClick(evt); - } - return ( -
- - { - /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */ - + useEffect(() => { + if (inputRef?.current) { + inputRef.current.indeterminate = indeterminate; } -
- ); -}); + }, [indeterminate]); + + function onClickCheckBoxInput(evt) { + // If the previous "indeterminate" is true, change "checked" to false. If it is not undefined, we're working on `TableSelectAll` + if (indeterminate) { + evt.target.checked = false; + } + onClick(evt); + } + + return ( +
+ + { + /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */ + + } +
+ ); + } +); InlineCheckbox.propTypes = { /** diff --git a/packages/react/src/components/Layer/index.tsx b/packages/react/src/components/Layer/index.tsx index ac514a0dd8b8..886a079f10d9 100644 --- a/packages/react/src/components/Layer/index.tsx +++ b/packages/react/src/components/Layer/index.tsx @@ -56,7 +56,7 @@ export interface LayerComponent { } const LayerRenderFunction = React.forwardRef(function Layer< - T extends React.ElementType + T extends React.ElementType, >( { as = 'div' as T, diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx index c7df0543ab0d..06bfd5946b8b 100644 --- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx +++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx @@ -312,7 +312,7 @@ export interface FilterableMultiSelectProps } const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect< - ItemType + ItemType, >( { autoAlign = false, diff --git a/packages/react/src/components/Search/Search.tsx b/packages/react/src/components/Search/Search.tsx index 25b2359f1cf6..eb0af38a0a04 100644 --- a/packages/react/src/components/Search/Search.tsx +++ b/packages/react/src/components/Search/Search.tsx @@ -240,8 +240,8 @@ const Search = React.forwardRef(function Search( onExpand && isExpanded ? true : onExpand && !isExpanded - ? false - : undefined + ? false + : undefined } aria-controls={onExpand ? uniqueId : undefined}> diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx index c6a9f0cc3e4a..a66d44d45dd2 100644 --- a/packages/react/src/components/Slider/Slider.tsx +++ b/packages/react/src/components/Slider/Slider.tsx @@ -1606,8 +1606,8 @@ class Slider extends PureComponent { twoHandles ? ariaLabelInputUpper : ariaLabelInput - ? ariaLabelInput - : undefined + ? ariaLabelInput + : undefined } disabled={disabled} required={required} diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx index 7112d1a7bad0..76c96aede800 100644 --- a/packages/react/src/components/Stack/Stack.tsx +++ b/packages/react/src/components/Stack/Stack.tsx @@ -71,36 +71,35 @@ export interface StackProps extends React.HTMLAttributes { * - https://paste.twilio.design/layout/stack/ * - https://github.com/Workday/canvas-kit/blob/f2f599654876700f483a1d8c5de82a41315c76f1/modules/labs-react/layout/lib/Stack.tsx */ -const Stack = React.forwardRef(function Stack( - props, - ref -) { - const { - as: BaseComponent = 'div', - children, - className: customClassName, - gap, - orientation = 'vertical', - ...rest - } = props; - const prefix = usePrefix(); - const className = cx(customClassName, { - [`${prefix}--stack-${orientation}`]: true, - [`${prefix}--stack-scale-${gap}`]: typeof gap === 'number', - }); - const style = {}; - - if (typeof gap === 'string') { - style[`--${prefix}-stack-gap`] = gap; +const Stack = React.forwardRef( + function Stack(props, ref) { + const { + as: BaseComponent = 'div', + children, + className: customClassName, + gap, + orientation = 'vertical', + ...rest + } = props; + const prefix = usePrefix(); + const className = cx(customClassName, { + [`${prefix}--stack-${orientation}`]: true, + [`${prefix}--stack-scale-${gap}`]: typeof gap === 'number', + }); + const style = {}; + + if (typeof gap === 'string') { + style[`--${prefix}-stack-gap`] = gap; + } + + return ( + // eslint-disable-next-line react/forbid-component-props + + {children} + + ); } - - return ( - // eslint-disable-next-line react/forbid-component-props - - {children} - - ); -}); +); Stack.propTypes = { /** diff --git a/packages/react/src/components/Stack/VStack.tsx b/packages/react/src/components/Stack/VStack.tsx index 4a804d738e2c..e0ebb045e05d 100644 --- a/packages/react/src/components/Stack/VStack.tsx +++ b/packages/react/src/components/Stack/VStack.tsx @@ -9,11 +9,10 @@ import React from 'react'; import { Stack, StackProps } from './Stack'; -const VStack = React.forwardRef(function VStack( - props, - ref -) { - return ; -}); +const VStack = React.forwardRef( + function VStack(props, ref) { + return ; + } +); export { VStack }; diff --git a/packages/react/src/components/Toggletip/index.tsx b/packages/react/src/components/Toggletip/index.tsx index 57a1146a38b0..75091baad498 100644 --- a/packages/react/src/components/Toggletip/index.tsx +++ b/packages/react/src/components/Toggletip/index.tsx @@ -265,7 +265,7 @@ export type ToggleTipButtonProps = * clicks and keyboard interactions. */ export const ToggletipButton = React.forwardRef(function ToggletipButton< - T extends React.ElementType + T extends React.ElementType, >( { children, diff --git a/packages/react/src/components/UIShell/SideNavLink.tsx b/packages/react/src/components/UIShell/SideNavLink.tsx index 104f94a06372..b8c4a4863290 100644 --- a/packages/react/src/components/UIShell/SideNavLink.tsx +++ b/packages/react/src/components/UIShell/SideNavLink.tsx @@ -78,7 +78,7 @@ export interface SideNavLinkComponent { } const SideNavLink: SideNavLinkComponent = forwardRef(function SideNavLink< - E extends ElementType = 'a' + E extends ElementType = 'a', >( { children, diff --git a/packages/react/src/components/UIShell/Switcher.tsx b/packages/react/src/components/UIShell/Switcher.tsx index 933c7374a62a..9efb642aba53 100644 --- a/packages/react/src/components/UIShell/Switcher.tsx +++ b/packages/react/src/components/UIShell/Switcher.tsx @@ -46,102 +46,104 @@ interface SwitcherWithAriaLabelledBy extends BaseSwitcherProps { type SwitcherProps = SwitcherWithAriaLabel | SwitcherWithAriaLabelledBy; -const Switcher = forwardRef(function Switcher( - props, - forwardRef -) { - const switcherRef = useRef(null); - const ref = useMergedRefs([switcherRef, forwardRef]); - - const prefix = usePrefix(); - const { - 'aria-label': ariaLabel, - 'aria-labelledby': ariaLabelledBy, - className: customClassName, - children, - expanded, - } = props; - - const accessibilityLabel = { - 'aria-label': ariaLabel, - 'aria-labelledby': ariaLabelledBy, - }; - - const className = cx(`${prefix}--switcher`, { - [customClassName || '']: !!customClassName, - }); - - const handleSwitcherItemFocus = ({ - currentIndex, - direction, - }: { - currentIndex: number; - direction: number; - }) => { - const enabledIndices = React.Children.toArray(children).reduce( - (acc, curr, i) => { - if (Object.keys((curr as any).props).length !== 0) { - acc.push(i); +const Switcher = forwardRef( + function Switcher(props, forwardRef) { + const switcherRef = useRef(null); + const ref = useMergedRefs([ + switcherRef, + forwardRef, + ]); + + const prefix = usePrefix(); + const { + 'aria-label': ariaLabel, + 'aria-labelledby': ariaLabelledBy, + className: customClassName, + children, + expanded, + } = props; + + const accessibilityLabel = { + 'aria-label': ariaLabel, + 'aria-labelledby': ariaLabelledBy, + }; + + const className = cx(`${prefix}--switcher`, { + [customClassName || '']: !!customClassName, + }); + + const handleSwitcherItemFocus = ({ + currentIndex, + direction, + }: { + currentIndex: number; + direction: number; + }) => { + const enabledIndices = React.Children.toArray(children).reduce( + (acc, curr, i) => { + if (Object.keys((curr as any).props).length !== 0) { + acc.push(i); + } + return acc; + }, + [] + ); + + const nextValidIndex = (() => { + const nextIndex = enabledIndices.indexOf(currentIndex) + direction; + + switch (enabledIndices[nextIndex]) { + case undefined: + if (direction === -1) { + return enabledIndices[enabledIndices.length - 1]; + } + return 0; + default: + return enabledIndices[nextIndex]; } - return acc; - }, - [] - ); + })(); - const nextValidIndex = (() => { - const nextIndex = enabledIndices.indexOf(currentIndex) + direction; - - switch (enabledIndices[nextIndex]) { - case undefined: - if (direction === -1) { - return enabledIndices[enabledIndices.length - 1]; - } - return 0; - default: - return enabledIndices[nextIndex]; + const switcherItem = switcherRef.current?.children[nextValidIndex] + ?.children[0] as HTMLElement; + if (switcherItem) { + switcherItem.focus(); } - })(); - - const switcherItem = switcherRef.current?.children[nextValidIndex] - ?.children[0] as HTMLElement; - if (switcherItem) { - switcherItem.focus(); - } - }; - - const childrenWithProps = React.Children.toArray(children).map( - (child, index) => { - // only setup click handlers if onChange event is passed - if ( - React.isValidElement(child) && - child.type && - getDisplayName(child.type) === 'Switcher' - ) { + }; + + const childrenWithProps = React.Children.toArray(children).map( + (child, index) => { + // only setup click handlers if onChange event is passed + if ( + React.isValidElement(child) && + child.type && + getDisplayName(child.type) === 'Switcher' + ) { + return React.cloneElement(child as React.ReactElement, { + handleSwitcherItemFocus, + index, + key: index, + expanded, + }); + } + return React.cloneElement(child as React.ReactElement, { - handleSwitcherItemFocus, index, key: index, expanded, }); } + ); - return React.cloneElement(child as React.ReactElement, { - index, - key: index, - expanded, - }); - } - ); - - return ( -
    } - className={className} - {...accessibilityLabel}> - {childrenWithProps} -
- ); -}); + return ( +
    } + className={className} + {...accessibilityLabel}> + {childrenWithProps} +
+ ); + } +); Switcher.displayName = 'Switcher'; Switcher.propTypes = { diff --git a/packages/react/src/internal/__tests__/wrapFocus-test.js b/packages/react/src/internal/__tests__/wrapFocus-test.js index 43c38c21eee1..5f683a3db328 100644 --- a/packages/react/src/internal/__tests__/wrapFocus-test.js +++ b/packages/react/src/internal/__tests__/wrapFocus-test.js @@ -121,9 +121,8 @@ describe('wrapFocus', () => { }); it('uses inner modal node as a escape hatch for focusing for forward focus-wrap', () => { - node.querySelector( - '#inner-modal' - ).innerHTML = `
`; + node.querySelector('#inner-modal').innerHTML = + `
`; wrapFocus({ bodyNode: node.querySelector('#inner-modal'), startSentinelNode: node.querySelector('#start-sentinel'), @@ -135,9 +134,8 @@ describe('wrapFocus', () => { }); it('uses inner modal node as a escape hatch for focusing for reverse focus-wrap', () => { - node.querySelector( - '#inner-modal' - ).innerHTML = `
`; + node.querySelector('#inner-modal').innerHTML = + `
`; wrapFocus({ bodyNode: node.querySelector('#inner-modal'), startSentinelNode: node.querySelector('#start-sentinel'), diff --git a/packages/react/src/types/common.ts b/packages/react/src/types/common.ts index 0a173a685159..c73c3fbddb67 100644 --- a/packages/react/src/types/common.ts +++ b/packages/react/src/types/common.ts @@ -33,5 +33,5 @@ export interface TranslateWithId> { */ export type InternationalProps< MID = string, - ARGS = Record + ARGS = Record, > = TranslateWithId; diff --git a/packages/styles/scss/components/accordion/_accordion.scss b/packages/styles/scss/components/accordion/_accordion.scss index 163a26880cb6..c5cb9e7fc132 100644 --- a/packages/styles/scss/components/accordion/_accordion.scss +++ b/packages/styles/scss/components/accordion/_accordion.scss @@ -109,9 +109,12 @@ $content-padding: 0 0 0 $spacing-05 !default; position: relative; z-index: 2; box-shadow: - /* Border top */ 0 -1px 0 0 $focus, - inset 0 1px 0 0 $focus, /* Border right */ inset 2px 0 0 0 $focus, - /* Border bottom */ 0 1px 0 0 $focus, inset 0 -1px 0 0 $focus, + /* Border top */ + 0 -1px 0 0 $focus, + inset 0 1px 0 0 $focus, + /* Border right */ inset 2px 0 0 0 $focus, + /* Border bottom */ 0 1px 0 0 $focus, + inset 0 -1px 0 0 $focus, /* Border left */ inset -2px 0 0 0 $focus; outline: none; } diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss index 0a14e913ce29..95d31f5e7773 100644 --- a/packages/styles/scss/components/button/_button.scss +++ b/packages/styles/scss/components/button/_button.scss @@ -322,8 +322,9 @@ padding-block: min( calc( - (layout.size('height') - var(--temp-expressive-1lh)) / 2 - - convert.to-rem(1px) + (layout.size('height') - var(--temp-expressive-1lh)) / 2 - convert.to-rem( + 1px + ) ), var(--temp-padding-block-max) ); diff --git a/packages/styles/scss/components/button/_mixins.scss b/packages/styles/scss/components/button/_mixins.scss index 638ed292a53e..28cf2bac3d05 100644 --- a/packages/styles/scss/components/button/_mixins.scss +++ b/packages/styles/scss/components/button/_mixins.scss @@ -63,12 +63,14 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus); ); padding-inline: calc(layout.density('padding-inline') - convert.to-rem(1px)) calc( - layout.density('padding-inline') * 3 + convert.to-rem(16px) - - convert.to-rem(1px) + layout.density('padding-inline') * 3 + convert.to-rem(16px) - convert.to-rem( + 1px + ) ); text-align: start; text-decoration: none; - transition: background $duration-fast-01 motion(entrance, productive), + transition: + background $duration-fast-01 motion(entrance, productive), box-shadow $duration-fast-01 motion(entrance, productive), border-color $duration-fast-01 motion(entrance, productive), outline $duration-fast-01 motion(entrance, productive); @@ -127,7 +129,8 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus); &:focus { border-color: $button-focus-color; - box-shadow: inset 0 0 0 $button-outline-width $button-focus-color, + box-shadow: + inset 0 0 0 $button-outline-width $button-focus-color, inset 0 0 0 $button-border-width $background; } diff --git a/packages/styles/scss/components/content-switcher/_content-switcher.scss b/packages/styles/scss/components/content-switcher/_content-switcher.scss index 91ab2d3632eb..edf11293fb85 100644 --- a/packages/styles/scss/components/content-switcher/_content-switcher.scss +++ b/packages/styles/scss/components/content-switcher/_content-switcher.scss @@ -72,7 +72,9 @@ &:focus { z-index: 3; border-color: $focus; - box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset; + box-shadow: + inset 0 0 0 2px $focus, + inset 0 0 0 3px $focus-inset; } &:focus::after { diff --git a/packages/styles/scss/components/data-table/action/_data-table-action.scss b/packages/styles/scss/components/data-table/action/_data-table-action.scss index 84647635604e..6a30508c0cce 100644 --- a/packages/styles/scss/components/data-table/action/_data-table-action.scss +++ b/packages/styles/scss/components/data-table/action/_data-table-action.scss @@ -40,7 +40,8 @@ block-size: $spacing-09; inline-size: 100%; transform: translate3d(0, 0, 0); - transition: transform $duration-fast-02 motion(standard, productive), + transition: + transform $duration-fast-02 motion(standard, productive), clip-path $duration-fast-02 motion(standard, productive); } @@ -79,7 +80,8 @@ box-shadow: none; cursor: pointer; inline-size: $spacing-09; - transition: width $transition-expansion $standard-easing, + transition: + width $transition-expansion $standard-easing, background-color $duration-fast-02 motion(entrance, productive); &:hover { @@ -381,7 +383,8 @@ .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-content { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transform: translate3d(0, 48px, 0); - transition: transform $duration-fast-02 motion(standard, productive), + transition: + transform $duration-fast-02 motion(standard, productive), clip-path $duration-fast-02 motion(standard, productive); } @@ -400,7 +403,8 @@ opacity: 0; pointer-events: none; transform: translate3d(0, 48px, 0); - transition: transform $duration-fast-02 motion(standard, productive), + transition: + transform $duration-fast-02 motion(standard, productive), clip-path $duration-fast-02 motion(standard, productive), opacity $duration-fast-02 motion(standard, productive); will-change: transform; diff --git a/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss b/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss index 690139c6cdfb..0030fb871966 100644 --- a/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss +++ b/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss @@ -50,7 +50,8 @@ border: 0; background-color: $layer-hover; padding-block: 0; - transition: padding $duration-moderate-01 motion(standard, productive), + transition: + padding $duration-moderate-01 motion(standard, productive), background-color $duration-fast-01 motion(standard, productive); } @@ -64,15 +65,16 @@ //child row visible tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] { - transition: height $duration-moderate-01 motion(standard, productive), + transition: + height $duration-moderate-01 motion(standard, productive), background-color $duration-fast-01 motion(standard, productive); } tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td { border-block-end: 1px solid $border-subtle; padding-inline-start: 3.5rem; - transition: padding-bottom $duration-moderate-01 - motion(standard, productive), + transition: + padding-bottom $duration-moderate-01 motion(standard, productive), transform $duration-moderate-01 motion(standard, productive); } @@ -128,7 +130,8 @@ tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) td, tr.#{$prefix}--parent-row.#{$prefix}--expandable-row td, tr.#{$prefix}--parent-row.#{$prefix}--expandable-row { - transition: height $duration-moderate-01 motion(standard, productive), + transition: + height $duration-moderate-01 motion(standard, productive), background-color $duration-fast-01 motion(standard, productive), border-color $duration-fast-01 motion(standard, productive); } @@ -352,7 +355,8 @@ tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td { - transition: transform $duration-moderate-01 motion(standard, productive), + transition: + transform $duration-moderate-01 motion(standard, productive), border-bottom $duration-fast-01 motion(standard, productive), border-top $duration-fast-01 motion(standard, productive); } diff --git a/packages/styles/scss/components/data-table/sort/_data-table-sort.scss b/packages/styles/scss/components/data-table/sort/_data-table-sort.scss index 2c1a4ee1fb26..4078c571e16d 100644 --- a/packages/styles/scss/components/data-table/sort/_data-table-sort.scss +++ b/packages/styles/scss/components/data-table/sort/_data-table-sort.scss @@ -51,7 +51,8 @@ min-block-size: 100%; padding-inline-start: $spacing-05; text-align: start; - transition: background-color $duration-fast-01 motion(entrance, productive), + transition: + background-color $duration-fast-01 motion(entrance, productive), outline $duration-fast-01 motion(entrance, productive); } diff --git a/packages/styles/scss/components/date-picker/_flatpickr.scss b/packages/styles/scss/components/date-picker/_flatpickr.scss index dd6942545179..9b8960192e12 100644 --- a/packages/styles/scss/components/date-picker/_flatpickr.scss +++ b/packages/styles/scss/components/date-picker/_flatpickr.scss @@ -406,7 +406,8 @@ } .flatpickr-calendar.animate .dayContainer.slideLeft { - animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1), + animation: + fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1), fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1); } @@ -416,18 +417,21 @@ } .flatpickr-calendar.animate .dayContainer.slideLeftNew { - animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1), + animation: + fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1), fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-calendar.animate .dayContainer.slideRight { - animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1), + animation: + fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1), fp-slide-right 400ms cubic-bezier(0.23, 1, 0.32, 1); transform: translate3d(100%, 0, 0); } .flatpickr-calendar.animate .dayContainer.slideRightNew { - animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1), + animation: + fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1), fp-slide-right-new 400ms cubic-bezier(0.23, 1, 0.32, 1); } diff --git a/packages/styles/scss/components/dialog/_dialog.scss b/packages/styles/scss/components/dialog/_dialog.scss index a80c5a249edf..df0c90aa7ef5 100644 --- a/packages/styles/scss/components/dialog/_dialog.scss +++ b/packages/styles/scss/components/dialog/_dialog.scss @@ -39,7 +39,8 @@ /** opening and closing is used in as allow-discrete is not currently supported wide enough * https://caniuse.com/mdn-css_properties_display_is_transitionable */ - transition: opacity $duration-moderate-02 motion(exit, expressive), + transition: + opacity $duration-moderate-02 motion(exit, expressive), transform $duration-moderate-02 motion(exit, expressive), overlay $duration-moderate-02 motion(exit, expressive) allow-discrete, display $duration-moderate-02 motion(exit, expressive) allow-discrete; @@ -65,7 +66,8 @@ opacity: 1; transform: translateY(0); - transition: opacity $duration-moderate-02 motion(entrance, expressive), + transition: + opacity $duration-moderate-02 motion(entrance, expressive), transform $duration-moderate-02 motion(entrance, expressive), overlay $duration-moderate-02 motion(entrance, expressive) allow-discrete, @@ -115,8 +117,8 @@ /* opening and closing is used in as allow-discrete is not currently supported wide enough * https://caniuse.com/mdn-css_properties_display_is_transitionable */ - transition: background-color $duration-moderate-02 - motion(entrance, expressive), + transition: + background-color $duration-moderate-02 motion(entrance, expressive), opacity $duration-moderate-02 motion(entrance, expressive); @media (prefers-reduced-motion) { @@ -127,7 +129,8 @@ .#{$prefix}--dialog[open]::backdrop { opacity: 1; - transition: background-color $duration-moderate-02 motion(exit, expressive), + transition: + background-color $duration-moderate-02 motion(exit, expressive), opacity $duration-moderate-02 motion(exit, expressive); @media (prefers-reduced-motion) { diff --git a/packages/styles/scss/components/dropdown/_dropdown.scss b/packages/styles/scss/components/dropdown/_dropdown.scss index 3c59520ce420..23ee1abea2ec 100644 --- a/packages/styles/scss/components/dropdown/_dropdown.scss +++ b/packages/styles/scss/components/dropdown/_dropdown.scss @@ -215,7 +215,8 @@ .#{$prefix}--dropdown-item { position: relative; opacity: 0; - transition: visibility $duration-fast-01 motion(standard, productive), + transition: + visibility $duration-fast-01 motion(standard, productive), opacity $duration-fast-01 motion(standard, productive), background-color $duration-fast-01 motion(standard, productive); visibility: inherit; diff --git a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss index e04c18026627..0490dcd75aa6 100644 --- a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss +++ b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss @@ -27,7 +27,8 @@ position: relative; block-size: 100%; inline-size: 100%; - transition: background-color $duration-fast-01 motion(standard, productive), + transition: + background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); } diff --git a/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss b/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss index aa67a0be4168..e83d1bdac2b1 100644 --- a/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss +++ b/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss @@ -21,7 +21,8 @@ position: relative; background: $field; block-size: 100%; - transition: background-color $duration-fast-01 motion(standard, productive), + transition: + background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); } diff --git a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss index 2fdb74b552ca..dd512d068624 100644 --- a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss +++ b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss @@ -84,7 +84,9 @@ input[type='number']:focus ~ .#{$prefix}--number__controls .#{$prefix}--number__control-btn:last-of-type { - box-shadow: inset 0 -1px $focus, inset -2px 0 $focus; + box-shadow: + inset 0 -1px $focus, + inset -2px 0 $focus; } .#{$prefix}--number-input--fluid diff --git a/packages/styles/scss/components/fluid-select/_fluid-select.scss b/packages/styles/scss/components/fluid-select/_fluid-select.scss index 4955ef43d396..12b83a647de9 100644 --- a/packages/styles/scss/components/fluid-select/_fluid-select.scss +++ b/packages/styles/scss/components/fluid-select/_fluid-select.scss @@ -21,7 +21,8 @@ position: relative; background: $field; block-size: 100%; - transition: background-color $duration-fast-01 motion(standard, productive), + transition: + background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); } diff --git a/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss b/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss index f1c28dc02ed5..af4b857afc54 100644 --- a/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss +++ b/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss @@ -21,7 +21,8 @@ position: relative; background: $field; block-size: 100%; - transition: background-color $duration-fast-01 motion(standard, productive), + transition: + background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); } diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss index 1af73b665bd0..3ff3d1f0ec4a 100644 --- a/packages/styles/scss/components/list-box/_list-box.scss +++ b/packages/styles/scss/components/list-box/_list-box.scss @@ -669,7 +669,8 @@ $list-box-menu-width: convert.to-rem(300px); padding-inline-end: $spacing-06; text-decoration: none; text-overflow: ellipsis; - transition: border-color $duration-fast-01 motion(standard, productive), + transition: + border-color $duration-fast-01 motion(standard, productive), color $duration-fast-01 motion(standard, productive); white-space: nowrap; diff --git a/packages/styles/scss/components/loading/_animation.scss b/packages/styles/scss/components/loading/_animation.scss index f29e9936d2ae..02f26d7a9c50 100644 --- a/packages/styles/scss/components/loading/_animation.scss +++ b/packages/styles/scss/components/loading/_animation.scss @@ -30,7 +30,8 @@ @mixin stop { // Animate the container - animation: #{$prefix}--rotate-end-p1 700ms motion.$ease-out forwards, + animation: + #{$prefix}--rotate-end-p1 700ms motion.$ease-out forwards, #{$prefix}--rotate-end-p2 700ms motion.$ease-out 700ms forwards; // Animate the stroke diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss index c413d5b35f64..8197f3c425cd 100644 --- a/packages/styles/scss/components/modal/_modal.scss +++ b/packages/styles/scss/components/modal/_modal.scss @@ -37,13 +37,15 @@ inset-block-start: 0; inset-inline-start: 0; opacity: 0; - transition: opacity $duration-moderate-02 motion(exit, expressive), + transition: + opacity $duration-moderate-02 motion(exit, expressive), visibility 0ms linear $duration-moderate-02; visibility: hidden; &.is-visible { opacity: 1; - transition: opacity $duration-moderate-02 motion(entrance, expressive), + transition: + opacity $duration-moderate-02 motion(entrance, expressive), visibility 0ms linear; visibility: inherit; @@ -370,7 +372,8 @@ border: 1px solid transparent; background-color: $layer; - box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow, + box-shadow: + inset 0 -80px 70px -65px $ai-inner-shadow, 0 24px 40px -24px $ai-drop-shadow; } @@ -378,7 +381,8 @@ .#{$prefix}--modal-container:has(.#{$prefix}--modal-footer) { @include ai-popover-gradient('default', 64px, 'layer'); - box-shadow: inset 0 -80px 0 -16px $layer, + box-shadow: + inset 0 -80px 0 -16px $layer, inset 0 -160px 70px -65px $ai-inner-shadow, 0 24px 40px -24px $ai-drop-shadow; } diff --git a/packages/styles/scss/components/notification/_actionable-notification.scss b/packages/styles/scss/components/notification/_actionable-notification.scss index 6ab184b6e6bd..757a8ccb1cc6 100644 --- a/packages/styles/scss/components/notification/_actionable-notification.scss +++ b/packages/styles/scss/components/notification/_actionable-notification.scss @@ -373,7 +373,8 @@ .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:focus { border-color: $focus-inverse; background-color: $notification-action-tertiary-inverse; - box-shadow: inset 0 0 0 button-vars.$button-outline-width $focus-inverse, + box-shadow: + inset 0 0 0 button-vars.$button-outline-width $focus-inverse, inset 0 0 0 button-vars.$button-border-width $background-inverse; color: $notification-action-tertiary-inverse-text; } @@ -439,7 +440,8 @@ inset-inline-end: 0; max-inline-size: convert.to-rem(48px); min-inline-size: convert.to-rem(48px); - transition: outline $duration-fast-02 motion(standard, productive), + transition: + outline $duration-fast-02 motion(standard, productive), background-color $duration-fast-02 motion(standard, productive); &:focus { diff --git a/packages/styles/scss/components/notification/_inline-notification.scss b/packages/styles/scss/components/notification/_inline-notification.scss index a80c47623f7a..1d18b1e2d42f 100644 --- a/packages/styles/scss/components/notification/_inline-notification.scss +++ b/packages/styles/scss/components/notification/_inline-notification.scss @@ -277,7 +277,8 @@ inset-inline-end: 0; max-inline-size: convert.to-rem(48px); min-inline-size: convert.to-rem(48px); - transition: outline $duration-fast-02 motion(standard, productive), + transition: + outline $duration-fast-02 motion(standard, productive), background-color $duration-fast-02 motion(standard, productive); &:focus { diff --git a/packages/styles/scss/components/notification/_toast-notification.scss b/packages/styles/scss/components/notification/_toast-notification.scss index 4af3a5a20de2..1ed3c69ecbda 100644 --- a/packages/styles/scss/components/notification/_toast-notification.scss +++ b/packages/styles/scss/components/notification/_toast-notification.scss @@ -165,7 +165,9 @@ margin-inline-start: auto; min-block-size: convert.to-rem(48px); min-inline-size: convert.to-rem(48px); - transition: outline $transition-base, background-color $transition-base; + transition: + outline $transition-base, + background-color $transition-base; &:focus { outline: 2px solid $focus-inverse; diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss index 32edae4c5fa8..5641619c7a15 100644 --- a/packages/styles/scss/components/number-input/_number-input.scss +++ b/packages/styles/scss/components/number-input/_number-input.scss @@ -60,7 +60,8 @@ inline-size: 100%; min-inline-size: 9.375rem; padding-inline: $spacing-05 $spacing-12; - transition: background-color $duration-fast-01 motion(standard, productive), + transition: + background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); &:focus { diff --git a/packages/styles/scss/components/overflow-menu/_overflow-menu.scss b/packages/styles/scss/components/overflow-menu/_overflow-menu.scss index 30c5868b8686..f37d9e21e785 100644 --- a/packages/styles/scss/components/overflow-menu/_overflow-menu.scss +++ b/packages/styles/scss/components/overflow-menu/_overflow-menu.scss @@ -40,7 +40,8 @@ cursor: pointer; inline-size: convert.to-rem(40px); min-block-size: convert.to-rem(40px); - transition: outline $duration-fast-02 motion(entrance, productive), + transition: + outline $duration-fast-02 motion(entrance, productive), background-color $duration-fast-02 motion(entrance, productive); &:focus { @@ -272,7 +273,8 @@ inline-size: 100%; max-inline-size: 11.25rem; text-align: start; - transition: outline $duration-fast-02 motion(entrance, productive), + transition: + outline $duration-fast-02 motion(entrance, productive), background-color $duration-fast-02 motion(entrance, productive), color $duration-fast-02 motion(entrance, productive); diff --git a/packages/styles/scss/components/pagination-nav/_pagination-nav.scss b/packages/styles/scss/components/pagination-nav/_pagination-nav.scss index e460a701bd66..b0cc7448c0d4 100644 --- a/packages/styles/scss/components/pagination-nav/_pagination-nav.scss +++ b/packages/styles/scss/components/pagination-nav/_pagination-nav.scss @@ -88,7 +88,8 @@ outline: 0; text-align: center; text-decoration: none; - transition: background-color $duration-fast-02 motion(standard, productive), + transition: + background-color $duration-fast-02 motion(standard, productive), color $duration-fast-02 motion(standard, productive); user-select: none; diff --git a/packages/styles/scss/components/pagination/_pagination.scss b/packages/styles/scss/components/pagination/_pagination.scss index fd7050625e47..f431dfd9da7c 100644 --- a/packages/styles/scss/components/pagination/_pagination.scss +++ b/packages/styles/scss/components/pagination/_pagination.scss @@ -220,7 +220,8 @@ fill: $icon-primary; inline-size: convert.to-rem(40px); min-block-size: convert.to-rem(32px); - transition: outline $duration-fast-02 motion(standard, productive), + transition: + outline $duration-fast-02 motion(standard, productive), background-color $duration-fast-02 motion(standard, productive); } diff --git a/packages/styles/scss/components/pagination/_unstable_pagination.scss b/packages/styles/scss/components/pagination/_unstable_pagination.scss index 5083d39b9508..5cacb8196ea8 100644 --- a/packages/styles/scss/components/pagination/_unstable_pagination.scss +++ b/packages/styles/scss/components/pagination/_unstable_pagination.scss @@ -85,7 +85,8 @@ fill: $icon-primary; inline-size: convert.to-rem(40px); min-block-size: convert.to-rem(32px); - transition: outline $duration-fast-02 motion(standard, productive), + transition: + outline $duration-fast-02 motion(standard, productive), background-color $duration-fast-02 motion(standard, productive); } diff --git a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss index 4e8ad2e31c8a..d88c5dcc146e 100644 --- a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss +++ b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss @@ -91,7 +91,8 @@ $progress-indicator-bar-width: 1px inset transparent !default; line-height: 1.45; max-inline-size: convert.to-rem(88px); text-overflow: ellipsis; - transition: box-shadow $duration-fast-02 motion(standard, productive), + transition: + box-shadow $duration-fast-02 motion(standard, productive), color $duration-fast-02 motion(standard, productive); white-space: nowrap; diff --git a/packages/styles/scss/components/search/_search.scss b/packages/styles/scss/components/search/_search.scss index 69e82074c44c..1fb95facecbb 100644 --- a/packages/styles/scss/components/search/_search.scss +++ b/packages/styles/scss/components/search/_search.scss @@ -54,7 +54,8 @@ inline-size: 100%; text-overflow: ellipsis; - transition: background-color $duration-fast-02 motion(standard, productive), + transition: + background-color $duration-fast-02 motion(standard, productive), outline $duration-fast-02 motion(standard, productive); &:focus { @@ -199,7 +200,8 @@ fill: $icon-primary; inline-size: convert.to-rem(40px); opacity: 1; - transition: opacity $duration-fast-02 motion(standard, productive), + transition: + opacity $duration-fast-02 motion(standard, productive), background-color $duration-fast-02 motion(standard, productive), outline $duration-fast-02 motion(standard, productive), border $duration-fast-02 motion(standard, productive); @@ -324,7 +326,8 @@ .#{$prefix}--search--expandable .#{$prefix}--search-input { padding: 0; inline-size: 0; - transition: padding $duration-fast-01 motion(standard, productive), + transition: + padding $duration-fast-01 motion(standard, productive), width 0s linear $duration-fast-01; &::placeholder { diff --git a/packages/styles/scss/components/slider/_slider.scss b/packages/styles/scss/components/slider/_slider.scss index 252ed64fa78e..065ba7434394 100644 --- a/packages/styles/scss/components/slider/_slider.scss +++ b/packages/styles/scss/components/slider/_slider.scss @@ -187,10 +187,13 @@ position: absolute; border-radius: 50%; background: $layer-selected-inverse; - box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent; + box-shadow: + inset 0 0 0 1px transparent, + inset 0 0 0 2px transparent; inset: 0; outline: none; - transition: transform $duration-fast-02 motion(standard, productive), + transition: + transform $duration-fast-02 motion(standard, productive), background $duration-fast-02 motion(standard, productive), box-shadow $duration-fast-02 motion(standard, productive); @@ -201,7 +204,9 @@ &:focus { background-color: $interactive; - box-shadow: inset 0 0 0 2px $interactive, inset 0 0 0 3px $layer; + box-shadow: + inset 0 0 0 2px $interactive, + inset 0 0 0 3px $layer; // 20px / 14px = 1.4286 transform: scale(1.4286); } diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss index 2db1dacc1f61..cdaff30bc99a 100644 --- a/packages/styles/scss/components/slug/_slug.scss +++ b/packages/styles/scss/components/slug/_slug.scss @@ -76,7 +76,8 @@ $sizes: ( color: $text-primary; font-weight: 600; outline: none; - transition: color $duration-fast-01 motion(entrance, productive), + transition: + color $duration-fast-01 motion(entrance, productive), border-color $duration-fast-01 motion(entrance, productive), box-shadow $duration-fast-01 motion(entrance, productive), background $duration-fast-01 motion(entrance, productive); @@ -114,7 +115,9 @@ $sizes: ( .#{$prefix}--slug .#{$prefix}--slug__button:hover:active { background: $border-inverse; - box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $focus-inset; + box-shadow: + inset 0 0 0 1px $focus, + inset 0 0 0 2px $focus-inset; color: $text-inverse; } @@ -192,7 +195,8 @@ $sizes: ( inset-inline-start: 0; opacity: 1; transform: translateY(-50%); - transition: background $duration-fast-01 motion(entrance, productive), + transition: + background $duration-fast-01 motion(entrance, productive), box-shadow $duration-fast-01 motion(entrance, productive); } @@ -254,7 +258,8 @@ $sizes: ( border: 1px solid transparent; border-radius: convert.to-rem(8px); // Need to make tokens - box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow, + box-shadow: + inset 0 -80px 70px -65px $ai-inner-shadow, -40px 44px 60px -24px $ai-popover-shadow-outer-01, -56px 64px 64px -24px $ai-popover-shadow-outer-02; color: $text-primary; @@ -707,7 +712,9 @@ $sizes: ( .#{$prefix}--slug .#{$prefix}--slug-actions .#{$prefix}--btn:focus { border-color: $focus; - box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $background; + box-shadow: + inset 0 0 0 1px $focus, + inset 0 0 0 2px $background; } .#{$prefix}--slug .#{$prefix}--slug-actions .#{$prefix}--btn--primary { diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss index bff584bca30f..dbe962d3b801 100644 --- a/packages/styles/scss/components/tabs/_tabs.scss +++ b/packages/styles/scss/components/tabs/_tabs.scss @@ -353,7 +353,8 @@ } .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link { - transition: color $duration-fast-01 motion(standard, productive), + transition: + color $duration-fast-01 motion(standard, productive), border-bottom-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); } @@ -484,7 +485,8 @@ text-align: start; text-decoration: none; text-overflow: ellipsis; - transition: border $duration-fast-01 motion(standard, productive), + transition: + border $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); white-space: nowrap; diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss index bf78f399565f..e9cd524b492c 100644 --- a/packages/styles/scss/components/tag/_tag.scss +++ b/packages/styles/scss/components/tag/_tag.scss @@ -303,7 +303,8 @@ color: currentColor; cursor: pointer; inline-size: layout.size('height'); - transition: background-color $duration-fast-01 motion(standard, productive), + transition: + background-color $duration-fast-01 motion(standard, productive), box-shadow $duration-fast-01 motion(standard, productive); svg { diff --git a/packages/styles/scss/components/text-area/_text-area.scss b/packages/styles/scss/components/text-area/_text-area.scss index a248b1952ca3..790f559282d2 100644 --- a/packages/styles/scss/components/text-area/_text-area.scss +++ b/packages/styles/scss/components/text-area/_text-area.scss @@ -40,7 +40,8 @@ min-inline-size: 10rem; resize: vertical; - transition: background-color $duration-fast-01 motion(standard, productive), + transition: + background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); } diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss index 9d8b8f773e50..d3e56f7c0cdd 100644 --- a/packages/styles/scss/components/text-input/_text-input.scss +++ b/packages/styles/scss/components/text-input/_text-input.scss @@ -46,7 +46,8 @@ font-family: inherit; inline-size: 100%; - transition: background-color $duration-fast-01 motion(standard, productive), + transition: + background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); &:focus, @@ -286,7 +287,8 @@ .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper { position: relative; background: $field; - transition: background-color $duration-fast-01 motion(standard, productive), + transition: + background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); } diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss index 9125bc2e9bd9..a53098559100 100644 --- a/packages/styles/scss/components/tile/_tile.scss +++ b/packages/styles/scss/components/tile/_tile.scss @@ -297,7 +297,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); .#{$prefix}--tile-content__below-the-fold { display: block; opacity: 0; - transition: opacity $duration-fast-02 motion(standard, productive), + transition: + opacity $duration-fast-02 motion(standard, productive), visibility $duration-fast-02 motion(standard, productive); visibility: hidden; } @@ -312,7 +313,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); .#{$prefix}--tile-content__below-the-fold { opacity: 1; - transition: opacity $duration-fast-02 motion(standard, productive), + transition: + opacity $duration-fast-02 motion(standard, productive), visibility $duration-fast-02 motion(standard, productive); visibility: inherit; @@ -424,7 +426,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); @include ai-popover-gradient('default', 0, 'layer'); border: 1px solid transparent; - box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow, + box-shadow: + inset 0 -80px 70px -65px $ai-inner-shadow, 0 4px 8px 0 $ai-drop-shadow; } @@ -450,7 +453,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before { @include ai-popover-gradient('hover', 0, 'layer'); - box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow, + box-shadow: + inset 0 -80px 70px -65px $ai-inner-shadow, 0 4px 10px 2px $ai-drop-shadow; } @@ -468,7 +472,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after { @include ai-popover-gradient('selected', 0, 'layer'); - box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow, + box-shadow: + inset 0 -80px 70px -65px $ai-inner-shadow, 0 4px 8px 0 $ai-drop-shadow; } diff --git a/packages/styles/scss/components/time-picker/_time-picker.scss b/packages/styles/scss/components/time-picker/_time-picker.scss index cc751ff07b44..9f774983c8df 100644 --- a/packages/styles/scss/components/time-picker/_time-picker.scss +++ b/packages/styles/scss/components/time-picker/_time-picker.scss @@ -67,7 +67,8 @@ align-items: center; block-size: convert.to-rem(40px); inline-size: 4.875rem; - transition: outline $duration-fast-01 motion(standard, productive), + transition: + outline $duration-fast-01 motion(standard, productive), background-color $duration-fast-01 motion(standard, productive); &::placeholder { diff --git a/packages/styles/scss/components/toggle/_toggle.scss b/packages/styles/scss/components/toggle/_toggle.scss index 62a890a114da..70438c4ed416 100644 --- a/packages/styles/scss/components/toggle/_toggle.scss +++ b/packages/styles/scss/components/toggle/_toggle.scss @@ -79,7 +79,9 @@ .#{$prefix}--toggle__switch, .#{$prefix}--toggle:not(.#{$prefix}--toggle--disabled):active .#{$prefix}--toggle__switch { - box-shadow: 0 0 0 1px $focus-inset, 0 0 0 3px $focus; + box-shadow: + 0 0 0 1px $focus-inset, + 0 0 0 3px $focus; } .#{$prefix}--toggle__switch--checked { diff --git a/packages/styles/scss/components/ui-shell/header/_header.scss b/packages/styles/scss/components/ui-shell/header/_header.scss index 717c20bbe789..876dd96f1fb2 100644 --- a/packages/styles/scss/components/ui-shell/header/_header.scss +++ b/packages/styles/scss/components/ui-shell/header/_header.scss @@ -45,7 +45,8 @@ border: convert.to-rem(1px) solid transparent; block-size: mini-units(6); inline-size: mini-units(6); - transition: background-color $duration-fast-02, + transition: + background-color $duration-fast-02, border-color $duration-fast-02; @include breakpoint-down('md') { min-inline-size: $spacing-09; @@ -232,8 +233,10 @@ line-height: 1.125rem; // Reset link styles and make sure the text isn't selectable text-decoration: none; - transition: background-color $duration-fast-02, - border-color $duration-fast-02, color $duration-fast-02; + transition: + background-color $duration-fast-02, + border-color $duration-fast-02, + color $duration-fast-02; user-select: none; } @@ -387,7 +390,9 @@ .#{$prefix}--header__menu-arrow { fill: $icon-secondary; margin-inline-start: mini-units(1); - transition: transform $duration-fast-02, fill $duration-fast-02; + transition: + transform $duration-fast-02, + fill $duration-fast-02; } //-------------------------------------------------------------------------- diff --git a/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss b/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss index cc294db2ddc6..7cc97848936c 100644 --- a/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss +++ b/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss @@ -40,7 +40,8 @@ inset-inline-start: 0; max-inline-size: mini-units(32); // TODO: sync with motion work - transition: inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9), + transition: + inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9), transform 0.11s cubic-bezier(0.2, 0, 1, 0.9); will-change: inline-size; } @@ -82,7 +83,8 @@ inset-block-start: convert.to-rem(48px); inset-inline-start: 0; opacity: 0; - transition: opacity $transition-expansion $standard-easing, + transition: + opacity $transition-expansion $standard-easing, background-color $transition-expansion $standard-easing; } @@ -93,7 +95,8 @@ block-size: 100vh; inline-size: 100vw; opacity: 1; - transition: opacity $transition-expansion $standard-easing, + transition: + opacity $transition-expansion $standard-easing, background-color $transition-expansion $standard-easing; } } @@ -211,7 +214,9 @@ padding: 0 mini-units(2); block-size: mini-units(4); color: $text-secondary; - transition: color $duration-fast-02, background-color $duration-fast-02, + transition: + color $duration-fast-02, + background-color $duration-fast-02, outline $duration-fast-02; user-select: none; } @@ -337,7 +342,9 @@ padding: 0 mini-units(2); min-block-size: mini-units(4); text-decoration: none; - transition: color $duration-fast-02, background-color $duration-fast-02, + transition: + color $duration-fast-02, + background-color $duration-fast-02, outline $duration-fast-02; } diff --git a/packages/styles/scss/utilities/_ai-gradient.scss b/packages/styles/scss/utilities/_ai-gradient.scss index 6199d03df344..91197d242b3b 100644 --- a/packages/styles/scss/utilities/_ai-gradient.scss +++ b/packages/styles/scss/utilities/_ai-gradient.scss @@ -89,7 +89,8 @@ ); @if $type == 'hover' { - background: linear-gradient( + background: + linear-gradient( to top, theme.$ai-aura-hover-start $start, 15%, @@ -112,7 +113,8 @@ ) border-box; } @else if $type == 'selected' { - background: linear-gradient( + background: + linear-gradient( to top, theme.$ai-aura-start $start, 15%, @@ -126,7 +128,8 @@ linear-gradient(to top, theme.$layer, theme.$layer) border-box; } @else { - background: linear-gradient( + background: + linear-gradient( to top, $background $start, theme.$ai-aura-start $start, diff --git a/packages/type/README.md b/packages/type/README.md index da398caf375f..d6bc9d0f8e77 100644 --- a/packages/type/README.md +++ b/packages/type/README.md @@ -24,14 +24,14 @@ yarn add @carbon/type Design Language. You can use all of these features either in JavaScript or Sass. These features include: -| Feature | Description | -| ----------------------------- | ------------------------------------------------------------------------------------------------------------ | +| Feature | Description | +| ----------------------------- | ------------------------------------------------------------------------------------------------------------- | | [Font face](#font-face) | Include IBM Plex™ font faces in your application. Uses Akamai CDN | -| [Type classes](#type-classes) | Helpers to use type styles directly. Not included by default | +| [Type classes](#type-classes) | Helpers to use type styles directly. Not included by default | | [Font family](#font-family) | Defines the font stack for IBM Plex™ in your application, provides helpers for working with font definitions | -| [Reset](#reset) | Provides a high-level CSS Reset to use in your project | -| [Scale](#type-scale) | Provides the type scale. Can access the size at any given step (step 1, 2, 3, etc) | -| [Styles](#type-styles) | Provides type styles for your application (heading-01, body-long-01, etc) | +| [Reset](#reset) | Provides a high-level CSS Reset to use in your project | +| [Scale](#type-scale) | Provides the type scale. Can access the size at any given step (step 1, 2, 3, etc) | +| [Styles](#type-styles) | Provides type styles for your application (heading-01, body-long-01, etc) | The `@carbon/type` package enables you to use typography from the IBM Design Language, including the type scale and fonts, along with typography design diff --git a/packages/utilities/src/dateTimeFormat/absolute.ts b/packages/utilities/src/dateTimeFormat/absolute.ts index 1e14cce8d421..545647d6be9e 100644 --- a/packages/utilities/src/dateTimeFormat/absolute.ts +++ b/packages/utilities/src/dateTimeFormat/absolute.ts @@ -73,12 +73,12 @@ export function formatRange( const timeStyle = options?.timeStyle === null ? undefined - : options?.timeStyle ?? options?.style ?? 'short'; + : (options?.timeStyle ?? options?.style ?? 'short'); const dateStyle = options?.dateStyle === null ? undefined - : options?.dateStyle ?? options?.style ?? 'medium'; + : (options?.dateStyle ?? options?.style ?? 'medium'); const dtf = new Intl.DateTimeFormat(options?.locale, { timeStyle, diff --git a/packages/web-components/README.md b/packages/web-components/README.md index 401855d19437..c56981c50ecd 100644 --- a/packages/web-components/README.md +++ b/packages/web-components/README.md @@ -131,7 +131,7 @@ The CDN artifacts define the custom elements for the browser, so they can be directly used once the script tag has been added to the page. For example: ```html - +