diff --git a/.changeset/old-onions-remain.md b/.changeset/old-onions-remain.md deleted file mode 100644 index 44b8ec6bea6..00000000000 --- a/.changeset/old-onions-remain.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@talend/design-tokens': minor ---- - -feat: add brand & info tokens diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index ddb2a2c6d87..4d652bfe164 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,13 @@ # @talend/react-components +## 11.1.3 + +### Patch Changes + +- 3345262d2: fix: tokens on the Slider component and migration to typescript +- Updated dependencies [b36165add] + - @talend/design-tokens@2.8.0 + ## 11.1.2 ### Patch Changes diff --git a/packages/components/package.json b/packages/components/package.json index f88e9b9e755..700720c019e 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -36,7 +36,7 @@ "dependencies": { "@popperjs/core": "^2.11.8", "@talend/bootstrap-theme": "^8.0.0", - "@talend/design-tokens": "^2.7.3", + "@talend/design-tokens": "^2.8.0", "@talend/react-a11y": "^1.1.0", "@talend/icons": "^6.58.1", "@talend/utils": "^2.5.1", @@ -113,5 +113,5 @@ "publishConfig": { "access": "public" }, - "version": "11.1.2" + "version": "11.1.3" } diff --git a/packages/components/src/Slider/Slider.component.js b/packages/components/src/Slider/Slider.component.js deleted file mode 100644 index 7a8a01963dd..00000000000 --- a/packages/components/src/Slider/Slider.component.js +++ /dev/null @@ -1,294 +0,0 @@ -import PropTypes from 'prop-types'; -import { forwardRef } from 'react'; -import classnames from 'classnames'; -import RcSlider from 'rc-slider'; -import range from 'lodash/range'; -import 'rc-slider/assets/index.css'; // eslint-disable-line no-unused-vars -import Icon from '../Icon'; -import theme from './Slider.module.scss'; -import Action from '../Actions/Action'; - -const noFormat = value => value; -/** - * Options for controlling slider operator display mode - */ -const SLIDER_MODE = { - GREATER_THAN: 'greaterThan', - EQUALS: 'equals', - EXCLUSIVE: 'exclusive', -}; - -/** - * this function check if we have icons to display - * @param {array} icons array if icons to display - */ -function isIconsAvailables(icons) { - return icons && Array.isArray(icons) && icons.length > 1; -} - -/** - * This function give the selected icon position if there is more than 1 icon - * @param {array} icons - array of icons - * @param {number} value - current value of the slider - * @param {number} min - minimum value of the slider - * @param {number} max - maximum value of the slider - */ -export function getSelectedIconPosition(icons, value, min, max) { - if (value == null) { - return -1; - } - const interval = (max - min) / (icons.length - 1); - return Math.round(value / interval); -} - -/** - * Return an array with ranged values calculate on the length of the captions . - * @param {number} captionsLength - * @param {number} min - * @param {number} max - */ -export function getCaptionsValue(captionsLength, min, max) { - const interval = (max - min) / (captionsLength - 1); - const captionsValue = range(min, max, interval); - captionsValue.push(max); - return captionsValue; -} - -/** - * This function allow to get the actions components - * @param {array} actions - * @param {number} value - * @param {number} min - * @param {number} max - * @param {function} onChange - */ -export function renderActions(actions, value, min, max, onChange, disabled) { - const captions = getCaptionsValue(actions.length, min, max); - const position = getSelectedIconPosition(actions, value, min, max); - return ( -
- {actions.map((action, index) => ( - onChange(captions[index])} - className={classnames( - theme['tc-slider-captions-element'], - 'tc-slider-captions-element', - { [theme.selected]: index === position }, - { selected: index === position }, - )} - /> - ))} -
- ); -} - -/** - * This function allow to get the icons components - * @param {array} icons - array of icons - * @param {number} value - current value of the slider - * @param {number} min - minimum value of the slider - * @param {number} max - maximum value of the slider - */ -function renderIcons(icons, value, min, max) { - if (isIconsAvailables(icons)) { - const position = getSelectedIconPosition(icons, value, min, max); - return ( -
- {icons.map((icon, index) => ( -
- -
- ))} -
- ); - } - return null; -} - -/** - * This function allow to get the text caption - * @param {number} captionTextStepNumber the number of text captions - * @param {function} captionsFormat the function to format the caption - * @param {number} min min value of the slider - * @param {number} max max value of the slider - */ -function renderTextCaptions(captionTextStepNumber, captionsFormat, min, max) { - if (captionTextStepNumber > 1) { - const captions = getCaptionsValue(captionTextStepNumber, min, max); - return ( -
- {captions.map((caption, index) => ( -
- {captionsFormat(caption)} -
- ))} -
- ); - } - return null; -} - -/** - * function that return icons or text captions - * @param {array} captionIcons icons to display on the bottom of the slider - * @param {number} captionTextStepNumber number of text caption - * @param {function} captionsFormat the function to format the caption - * @param {number} value current value of the slider - * @param {number} min min value of the slider - * @param {number} max max value of the slider - */ -function getCaption( - captionActions, - captionIcons, - captionTextStepNumber, - captionsFormat, - value, - min, - max, - onChange, - disabled, -) { - if (captionActions) { - return renderActions(captionActions, value, min, max, onChange, disabled); - } else if (captionIcons) { - return renderIcons(captionIcons, value, min, max); - } else if (captionTextStepNumber) { - return renderTextCaptions(captionTextStepNumber, captionsFormat, min, max); - } - return null; -} - -/** - * Function to set the tooltip - * @param {function} captionsFormat the function to format the caption - */ -function getHandle(captionsFormat) { - function renderHandler(node, props) { - return ( -
-
- {captionsFormat(props?.value)} -
- {node} -
- ); - } - - return renderHandler; -} - -const Slider = forwardRef((props, ref) => { - const handleRender = getHandle(props.captionsFormat, ref); - - const { - id, - value, - captionActions, - captionIcons, - captionTextStepNumber, - captionsFormat, - min, - max, - step, - mode, - onChange, - disabled, - hideTooltip, - ...rest - } = props; - const noValue = value === null || value === undefined; - return ( -
-
- -
- {getCaption( - captionActions, - captionIcons, - captionTextStepNumber, - captionsFormat, - value, - min, - max, - onChange, - disabled, - )} -
- ); -}); - -Slider.propTypes = { - id: PropTypes.string, - value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]), - onChange: PropTypes.func.isRequired, - getTooltipContainer: PropTypes.func, - onAfterChange: PropTypes.func, - captionActions: PropTypes.array, - captionIcons: PropTypes.array, - captionTextStepNumber: PropTypes.number, - min: PropTypes.number, - max: PropTypes.number, - step: PropTypes.number, - mode: PropTypes.string, - captionsFormat: PropTypes.func, - disabled: PropTypes.bool, - hideTooltip: PropTypes.bool, -}; -Slider.displayName = 'Slider'; - -Slider.defaultProps = { - min: 0, - max: 100, - step: 1, - captionsFormat: noFormat, -}; - -Slider.MODES = SLIDER_MODE; -export default Slider; diff --git a/packages/components/src/Slider/Slider.component.tsx b/packages/components/src/Slider/Slider.component.tsx new file mode 100644 index 00000000000..ff51bd86a0d --- /dev/null +++ b/packages/components/src/Slider/Slider.component.tsx @@ -0,0 +1,300 @@ +import { forwardRef, JSXElementConstructor, ReactElement, Ref } from 'react'; +import classnames from 'classnames'; +import RcSlider, { SliderRef } from 'rc-slider'; +import { HandleProps } from 'rc-slider/lib/Handles/Handle'; +import range from 'lodash/range'; +import 'rc-slider/assets/index.css'; // eslint-disable-line no-unused-vars +import { ButtonIcon } from '@talend/design-system'; +import Icon from '../Icon'; +import theme from './Slider.module.scss'; + +/** + * Options for controlling slider operator display mode + */ +export const SliderModes = { + GREATER_THAN: 'greaterThan', + EQUALS: 'equals', + EXCLUSIVE: 'exclusive', +}; + +/** + * this function check if we have icons to display + * @param {array} icons array if icons to display + */ +function isIconsAvailable(icons: string[]) { + return icons && Array.isArray(icons) && icons.length > 1; +} + +/** + * This function give the selected icon position if there is more than 1 icon + */ +export function getSelectedIconPosition( + icons: string[], + min: number, + max: number, + value?: number | number[], +) { + if (Array.isArray(value) || value === undefined) { + return -1; + } + const interval = (max - min) / (icons.length - 1); + return Math.round(value / interval); +} + +/** + * Return an array with ranged values calculate on the length of the captions . + * @param {number} captionsLength + * @param {number} min + * @param {number} max + */ +export function getCaptionsValue(captionsLength: number, min: number, max: number) { + const interval = (max - min) / (captionsLength - 1); + const captionsValue = range(min, max, interval); + captionsValue.push(max); + return captionsValue; +} + +/** + * This function allow to get the actions components + * @param {array} actions + * @param {number} value + * @param {number} min + * @param {number} max + * @param {function} onChange + */ +export function renderActions( + actions: SliderCaptionAction[], + onChange: (value: number | number[]) => void, + min: number, + max: number, + value?: number | number[], + disabled?: boolean, +) { + const captions = getCaptionsValue(actions.length, min, max); + return ( +
+ {actions.map((action, index) => ( + onChange(captions[index])} + disabled={disabled} + > + {'children' in action ? action.children || '' : 'label' in action ? action.label : ''} + + ))} +
+ ); +} + +function renderIcons(icons: string[], min: number, max: number, value?: number | number[]) { + if (isIconsAvailable(icons)) { + const position = getSelectedIconPosition(icons, min, max, value); + return ( +
+ {icons.map((icon, index) => ( +
+ +
+ ))} +
+ ); + } + return null; +} + +function renderTextCaptions( + captionTextStepNumber: number, + captionsFormat: (value?: number) => string, + min: number, + max: number, +) { + if (captionTextStepNumber > 1) { + const captions = getCaptionsValue(captionTextStepNumber, min, max); + return ( +
+ {captions.map((caption, index) => ( +
+ {captionsFormat(caption)} +
+ ))} +
+ ); + } + return null; +} + +function getCaption( + onChange: (value: number | number[]) => void, + captionsFormat: (value?: number) => string, + min: number, + max: number, + value?: number | number[], + captionActions?: SliderCaptionAction[], + captionIcons?: string[], + captionTextStepNumber?: number, + disabled?: boolean, +) { + if (captionActions) { + return renderActions(captionActions, onChange, min, max, value, disabled); + } + if (captionIcons) { + return renderIcons(captionIcons, min, max, value); + } + if (captionTextStepNumber) { + return renderTextCaptions(captionTextStepNumber, captionsFormat, min, max); + } + return null; +} + +/** + * Function to set the tooltip + * @param {function} captionsFormat the function to format the caption + */ +function getHandle(captionsFormat: ((value?: number) => string) | undefined) { + function renderHandler( + origin: ReactElement>, + props: any, + ) { + return ( +
+
+ {captionsFormat ? captionsFormat(props?.value) : null} +
+ {origin} +
+ ); + } + + return renderHandler; +} + +type SliderCaptionAction = + | { + id: string; + label: string; + icon: string; + 'data-feature'?: string; + link: true; + hideLabel: true; + } + | { + id: string; + children?: string; + 'data-feature'?: string; + icon: string; + }; + +type SliderProps = { + id?: string; + value?: number | number[]; + onChange: (value: number | number[]) => void; + getTooltipContainer?: () => HTMLElement; + onAfterChange?: (value: number | number[]) => void; + captionActions?: SliderCaptionAction[]; + captionIcons?: string[]; + captionTextStepNumber?: number; + min?: number; + max?: number; + step?: number; + mode?: 'greaterThan' | 'equals' | 'exclusive'; + captionsFormat?: (value?: number) => string; + disabled?: boolean; + hideTooltip?: boolean; + allowCross?: boolean; +}; + +const Slider = forwardRef( + ( + { + id, + value, + captionActions, + captionIcons, + captionTextStepNumber, + captionsFormat = (captionValue: any) => captionValue, + min = 0, + max = 100, + step = 1, + mode, + onChange, + disabled, + hideTooltip, + ...rest + }: SliderProps, + ref: Ref | undefined, + ) => { + const handleRender = getHandle(captionsFormat); + + const noValue = value === null || value === undefined; + return ( +
+
+ +
+ {getCaption( + onChange, + captionsFormat, + min, + max, + value, + captionActions, + captionIcons, + captionTextStepNumber, + disabled, + )} +
+ ); + }, +); + +Slider.displayName = 'Slider'; + +// @ts-ignore +Slider.MODES = SliderModes; +export default Slider; diff --git a/packages/components/src/Slider/Slider.module.scss b/packages/components/src/Slider/Slider.module.scss index 82feb8958dc..9f15ea4d612 100644 --- a/packages/components/src/Slider/Slider.module.scss +++ b/packages/components/src/Slider/Slider.module.scss @@ -42,6 +42,17 @@ $tc-slider-line-height: 24px; min-height: $tc-slider-line-height; display: flex; justify-content: center; + + :global(svg) { + height: $tc-slider-line-height; + width: $tc-slider-line-height; + margin: 0; + color: tokens.$coral-color-neutral-icon-weak; + + &.selected { + fill: tokens.$coral-color-accent-icon; + } + } } :global(.btn) { @@ -53,17 +64,6 @@ $tc-slider-line-height: 24px; } } } - - :global(svg) { - height: $tc-slider-line-height; - width: $tc-slider-line-height; - margin: 0; - fill: tokens.$coral-color-neutral-icon; - - &.selected { - fill: tokens.$coral-color-accent-icon; - } - } } &-rc-slider { @@ -76,7 +76,7 @@ $tc-slider-line-height: 24px; } :global(.rc-slider-rail) { - background-color: tokens.$coral-color-neutral-background-medium; + background-color: tokens.$coral-color-neutral-background-strong; } :global(.rc-slider-track) { @@ -113,7 +113,7 @@ $tc-slider-line-height: 24px; :global { .rc-slider-rail, .rc-slider-track { - background-color: tokens.$coral-color-neutral-background; + background-color: tokens.$coral-color-neutral-background-medium; } .rc-slider-handle { diff --git a/packages/components/src/Slider/Slider.stories.js b/packages/components/src/Slider/Slider.stories.tsx similarity index 69% rename from packages/components/src/Slider/Slider.stories.js rename to packages/components/src/Slider/Slider.stories.tsx index 43769087b22..25faca4ddc8 100644 --- a/packages/components/src/Slider/Slider.stories.js +++ b/packages/components/src/Slider/Slider.stories.tsx @@ -1,6 +1,6 @@ import { action } from '@storybook/addon-actions'; -import Slider from './Slider.component'; +import Slider, { SliderModes } from './Slider.component'; const icons = [ 'talend-activity', @@ -63,8 +63,41 @@ const actions = [ }, ]; -const functionToFormat = value => `${value}-test`; -const functionFormatFloor = value => `${Math.floor(value)}`; +const actionsDS = [ + { + id: 'icon1', + children: 'this is the worst entity', + icon: 'smiley-angry', + 'data-feature': 'slider-worst-entity', + }, + { + id: 'icon2', + children: 'this is a bad entity', + icon: 'smiley-neutral', + 'data-feature': 'slider-bad-entity', + }, + { + id: 'icon3', + children: 'this is a meh entity', + icon: 'smiley-satisfied', + 'data-feature': 'slider-meh-entity', + }, + { + id: 'icon4', + children: 'this is a good entity', + icon: 'smiley-satisfied', + 'data-feature': 'slider-good-entity', + }, + { + id: 'icon5', + children: 'this is the best entity', + icon: 'smiley-satisfied', + 'data-feature': 'slider-best-entity', + }, +]; + +const functionToFormat = (value: any) => `${value}-test`; +const functionFormatFloor = (value: any) => `${Math.floor(value)}`; export default { title: 'Components/Form - Controls/Slider', @@ -83,23 +116,11 @@ export const Default = () => (

Greater than usage

- +

Equals

- +

With disabled

@@ -122,6 +143,10 @@ export const Default = () => (

with icon buttons

+
+

with icon buttons from the DS

+ +

with step number

( onChange={action('onChange')} min={0} max={100} - mode={Slider.MODES.EXCLUSIVE} + mode="exclusive" value={[25, 75]} allowCross={false} /> diff --git a/packages/components/src/Slider/Slider.test.js b/packages/components/src/Slider/Slider.test.tsx similarity index 80% rename from packages/components/src/Slider/Slider.test.js rename to packages/components/src/Slider/Slider.test.tsx index b372509c316..6c16f0178a2 100644 --- a/packages/components/src/Slider/Slider.test.js +++ b/packages/components/src/Slider/Slider.test.tsx @@ -6,6 +6,7 @@ import Slider, { renderActions, } from './Slider.component'; +jest.unmock('@talend/design-system'); const onChange = jest.fn(); describe('Slider', () => { @@ -57,7 +58,7 @@ describe('Slider', () => { // when render(); // then - const captions = document.querySelectorAll('.tc-slider-captions-element .CoralIcon'); + const captions = document.querySelectorAll('.tc-slider-captions-element .tc-svg-icon'); expect(captions).toHaveLength(5); expect(captions[0]).toHaveAttribute('name', 'talend-smiley-rating'); expect(captions[1]).toHaveAttribute('name', 'talend-most-trusted'); @@ -68,7 +69,7 @@ describe('Slider', () => { it('should render Slider with captionTextStepNumber', () => { // given - const captionsFormat = value => `${value}%`; + const captionsFormat = (value: any) => `${value}%`; const props = { id: 'selectable', onChange, @@ -121,14 +122,11 @@ describe('Slider', () => { // when render(); // then - const captions = screen.getAllByRole('link'); + const captions = screen.getAllByRole('button'); expect(captions).toHaveLength(3); - expect(captions[0]).toHaveAttribute('aria-label', 'angry'); - expect(captions[0]).toHaveClass('tc-slider-captions-element'); - expect(captions[1]).toHaveAttribute('aria-label', 'neutral'); - expect(captions[1]).toHaveClass('tc-slider-captions-element'); - expect(captions[2]).toHaveAttribute('aria-label', 'satified'); - expect(captions[2]).toHaveClass('tc-slider-captions-element'); + expect(captions[0]).toHaveAttribute('label', 'angry'); + expect(captions[1]).toHaveAttribute('label', 'neutral'); + expect(captions[2]).toHaveAttribute('label', 'satified'); }); it('should render Slider disabled', () => { // given @@ -161,7 +159,7 @@ describe('Slider', () => { // when render(); // then - const captions = screen.getAllByRole('link'); + const captions = screen.getAllByRole('button'); expect(captions).toHaveLength(3); expect(captions[0]).toBeDisabled(); expect(captions[1]).toBeDisabled(); @@ -173,25 +171,16 @@ describe('Slider', () => { // given const icons = ['icon1', 'icon2', 'icon3', 'icon4', 'icon5']; // when - const result = getSelectedIconPosition(icons, 46, 0, 100); + const result = getSelectedIconPosition(icons, 0, 100, 46); // then expect(result).toBe(2); }); - it('should return -1 when value is null', () => { - // given - const icons = ['icon1', 'icon2', 'icon3', 'icon4', 'icon5']; - // when - const result = getSelectedIconPosition(icons, null, 0, 100); - // then - expect(result).toBe(-1); - }); - it('should return -1 when value is undefined', () => { // given const icons = ['icon1', 'icon2', 'icon3', 'icon4', 'icon5']; // when - const result = getSelectedIconPosition(icons, undefined, 0, 100); + const result = getSelectedIconPosition(icons, 0, 100, undefined); // then expect(result).toBe(-1); }); @@ -228,12 +217,12 @@ describe('getActions', () => { }, ]; // When - render(renderActions(actions, 76, 0, 100, false)); + render(renderActions(actions, onChange, 0, 100, 76, false)); // Then - expect(screen.getAllByRole('link')).toHaveLength(3); - expect(screen.getByLabelText('angry')).toBeVisible(); - expect(screen.getByLabelText('neutral')).toBeVisible(); - expect(screen.getByLabelText('satisfied')).toBeVisible(); + expect(screen.getAllByRole('button')).toHaveLength(3); + expect(screen.getByText('angry')).toBeInTheDocument(); + expect(screen.getByText('neutral')).toBeInTheDocument(); + expect(screen.getByText('satisfied')).toBeInTheDocument(); }); }); diff --git a/packages/components/src/Slider/__snapshots__/Slider.test.js.snap b/packages/components/src/Slider/__snapshots__/Slider.test.tsx.snap similarity index 100% rename from packages/components/src/Slider/__snapshots__/Slider.test.js.snap rename to packages/components/src/Slider/__snapshots__/Slider.test.tsx.snap diff --git a/packages/components/src/Slider/index.js b/packages/components/src/Slider/index.ts similarity index 100% rename from packages/components/src/Slider/index.js rename to packages/components/src/Slider/index.ts diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index daf4692ed33..a4d1bef3e46 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -1,5 +1,11 @@ # @talend/design-tokens +## 2.8.0 + +### Minor Changes + +- b36165add: feat: add brand & info tokens + ## 2.7.3 ### Patch Changes diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index d68337b32b5..8bf7812460d 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@talend/design-tokens", - "version": "2.7.3", + "version": "2.8.0", "description": "Talend Design Tokens", "main": "lib/index.js", "types": "lib/index.d.ts", diff --git a/packages/faceted-search/CHANGELOG.md b/packages/faceted-search/CHANGELOG.md index 259f2c5e88a..5a146ce86cd 100644 --- a/packages/faceted-search/CHANGELOG.md +++ b/packages/faceted-search/CHANGELOG.md @@ -1,5 +1,12 @@ # Changelog +## 11.0.1 + +### Patch Changes + +- Updated dependencies [b36165add] + - @talend/design-tokens@2.8.0 + ## 11.0.0 ### Major Changes diff --git a/packages/faceted-search/package.json b/packages/faceted-search/package.json index 47d89a29567..ca38e8f7e5d 100644 --- a/packages/faceted-search/package.json +++ b/packages/faceted-search/package.json @@ -1,6 +1,6 @@ { "name": "@talend/react-faceted-search", - "version": "11.0.0", + "version": "11.0.1", "description": "Faceted search", "main": "lib/index.js", "mainSrc": "src/index.js", @@ -36,7 +36,7 @@ "@talend/daikon-tql-client": "^1.3.1", "@talend/utils": "^2.5.1", "@talend/react-bootstrap": "^1.35.2", - "@talend/design-tokens": "2.7.3", + "@talend/design-tokens": "2.8.0", "classnames": "^2.3.2", "date-fns": "^1.30.1", "invariant": "^2.2.4", @@ -51,7 +51,7 @@ "@talend/icons": "^6.58.1", "@talend/locales-tui-components": "^9.5.0", "@talend/locales-tui-faceted-search": "^8.1.0", - "@talend/react-components": "^11.0.0", + "@talend/react-components": "^11.1.3", "@talend/scripts-core": "^14.0.0", "@talend/scripts-config-react-webpack": "^15.4.1", "babel-plugin-angularjs-annotate": "^0.10.0", diff --git a/packages/theme/CHANGELOG.md b/packages/theme/CHANGELOG.md index 1933430ba00..d0da5e27371 100644 --- a/packages/theme/CHANGELOG.md +++ b/packages/theme/CHANGELOG.md @@ -1,5 +1,11 @@ # @talend/bootstrap-theme +## 8.0.1 + +### Patch Changes + +- ae4916894: Bootstrap Theme : Fix various button border issues using Design System tokens + ## 8.0.0 ### Major Changes diff --git a/packages/theme/package.json b/packages/theme/package.json index ffa9621f34e..05ea8c573f7 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -44,5 +44,5 @@ "publishConfig": { "access": "public" }, - "version": "8.0.0" + "version": "8.0.1" } diff --git a/packages/theme/src/theme/_buttons.scss b/packages/theme/src/theme/_buttons.scss index 2e76a38149b..a7be904cbd0 100644 --- a/packages/theme/src/theme/_buttons.scss +++ b/packages/theme/src/theme/_buttons.scss @@ -24,21 +24,13 @@ &, &:focus, &:hover { - color: currentColor; - background-color: transparent; border-color: transparent; } &:active, .open > &.dropdown-toggle { box-shadow: none; - - &, - &:hover { - color: var(--t-button-color); - background-color: var(--t-button-background-color); - border-color: var(--t-button-border-color); - } + border-color: transparent; } &, @@ -56,9 +48,6 @@ &:hover, &:focus, &.focus { - color: var(--t-button-color); - background-color: var(--t-button-background-color); - border-color: var(--t-button-border-color); opacity: 0.54; cursor: not-allowed; } @@ -99,16 +88,28 @@ background: tokens.$coral-color-accent-background-strong-active; color: tokens.$coral-color-accent-text-weak-active; } + + &.disabled, + &[disabled], + &[aria-disabled='true'], + &[aria-busy='true'] { + background: tokens.$coral-color-accent-background-strong; + color: tokens.$coral-color-accent-text-weak; + + &:hover { + background-color: tokens.$coral-color-accent-background-strong; + } + } } &-inverse { background-color: transparent; - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border; + border-color: tokens.$coral-color-accent-border; color: tokens.$coral-color-accent-text; &:hover { background: tokens.$coral-color-accent-background-weak-hover; - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border; + border-color: tokens.$coral-color-accent-border-hover; color: tokens.$coral-color-accent-text-strong-hover; } @@ -117,12 +118,13 @@ color: tokens.$coral-color-accent-text-strong-active; } - &:disabled, + &.disabled, + &[disabled], &[aria-disabled='true'], &[aria-busy='true'] { background: transparent; - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled; - color: tokens.$coral-color-neutral-text-disabled; + border-color: tokens.$coral-color-accent-border; + color: tokens.$coral-color-accent-text; &:hover { background-color: transparent; @@ -132,12 +134,12 @@ &--secondary { background-color: transparent; - border-color: tokens.$coral-color-accent-text; + border-color: tokens.$coral-color-accent-border; color: tokens.$coral-color-accent-text; &:hover { background: tokens.$coral-color-accent-background-weak-hover; - border-color: tokens.$coral-color-accent-text; + border-color: tokens.$coral-color-accent-border-hover; color: tokens.$coral-color-accent-text-strong-hover; } @@ -146,12 +148,13 @@ color: tokens.$coral-color-accent-text-strong-active; } - &:disabled, + &.disabled, + &[disabled], &[aria-disabled='true'], &[aria-busy='true'] { background: transparent; - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled; - color: tokens.$coral-color-neutral-text-disabled; + border-color: tokens.$coral-color-accent-border; + color: tokens.$coral-color-accent-text; &:hover { background-color: transparent; @@ -174,12 +177,12 @@ color: tokens.$coral-color-accent-text-strong-active; } - &:disabled, + &.disabled, + &[disabled], &[aria-disabled='true'], &[aria-busy='true'] { background: transparent; - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled; - color: tokens.$coral-color-neutral-text-disabled; + color: tokens.$coral-color-accent-text; &:hover { background-color: transparent; @@ -198,22 +201,27 @@ color: tokens.$coral-color-accent-text-strong-active; } - &:disabled, + &.disabled, + &[disabled], &[aria-disabled='true'], &[aria-busy='true'] { - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled; - color: tokens.$coral-color-neutral-text-disabled; + color: tokens.$coral-color-accent-text; + + &:hover { + color: tokens.$coral-color-accent-text; + } } } &.btn-danger, &.btn--destructive { background: tokens.$coral-color-danger-background-strong; - border: tokens.$coral-color-danger-background-strong; + border-color: tokens.$coral-color-danger-border; color: tokens.$coral-color-danger-text-weak; &:hover { background: tokens.$coral-color-danger-background-strong-hover; + border-color: tokens.$coral-color-danger-border-hover; color: tokens.$coral-color-danger-text-weak-hover; } @@ -222,10 +230,17 @@ color: tokens.$coral-color-danger-text-weak-active; } - &[disabled] &:hover, - .disabled &:hover { - background: tokens.$coral-color-neutral-background-disabled; - color: tokens.$coral-color-neutral-text-disabled; + &[disabled], + .disabled, + &[aria-disabled='true'], + &[aria-busy='true'] { + background: tokens.$coral-color-danger-background-strong; + border-color: tokens.$coral-color-danger-border; + color: tokens.$coral-color-danger-text-weak; + + &:hover { + background-color: tokens.$coral-color-danger-background-strong; + } } }