diff --git a/.changeset/young-carrots-turn.md b/.changeset/young-carrots-turn.md new file mode 100644 index 00000000000..a3e82c04c2e --- /dev/null +++ b/.changeset/young-carrots-turn.md @@ -0,0 +1,5 @@ +--- +'@talend/design-system': patch +--- + +chore: update rich radio button diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx index 5921a39cae6..da0b1894d78 100644 --- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx +++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx @@ -7,7 +7,6 @@ import { import { StackVertical, StackHorizontal } from '../Stack'; import { getIconWithDeprecatedSupport } from '../Icon/DeprecatedIconHelper'; import style from './RichRadioButton.module.scss'; -import classnames from 'classnames'; import { Tag } from '../Tag'; import { Icon } from '../Icon'; import { DataAttributes } from 'src/types'; @@ -15,17 +14,17 @@ import { DataAttributes } from 'src/types'; function RichRadioButtonIcon({ asset }: { asset?: LogoAsset | IllustrationAsset | IconAsset }) { if (asset?.illustration) { return ( - + ); } if (asset?.logo) { - return ; + return ; } if (asset?.name) { return ( - + {getIconWithDeprecatedSupport({ iconSrc: asset.name || '', size: 'L', @@ -68,6 +67,12 @@ const RichRadioButton = ({ data-test={dataTest} onChange={() => onChange(id)} data-checked={isChecked} + onKeyDown={event => { + if (event.key === 'Enter') { + event.preventDefault(); + onChange(id); + } + }} /> diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss b/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss index c92f9d7c202..c3e6366d008 100644 --- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss +++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss @@ -34,12 +34,17 @@ &__wrapper { display: flex; flex: 1; + height: 100%; margin: 0; max-width: 400px; min-height: 77px; min-width: 220px; position: relative; width: 100%; + + input { + margin: 0; + } } &__input { @@ -152,6 +157,11 @@ &:checked { &:not(:disabled, [readonly]) { + + .rich-radio-button { + background-color: tokens.$coral-color-accent-background-selected; + border: tokens.$coral-border-m-solid tokens.$coral-color-accent-border; + } + &:hover { + .rich-radio-button { border-color: tokens.$coral-color-accent-border-hover; @@ -164,9 +174,10 @@ } } - + .rich-radio-button { - background-color: tokens.$coral-color-accent-background-selected; - border: tokens.$coral-border-m-solid tokens.$coral-color-accent-border; + &:focus { + + .rich-radio-button { + outline-offset: -2px; + } } }