chore: update rich radio button (#4791)

Talend · Jul 10, 2023 · 1c53807 · 1c53807
1 parent c310d41
commit 1c53807
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/.changeset/young-carrots-turn.md 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
@@ -7,25 +7,24 @@ 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';
 
 function RichRadioButtonIcon({ asset }: { asset?: LogoAsset | IllustrationAsset | IconAsset }) {
 	if (asset?.illustration) {
 		return (
-			<span className={classnames([style['rich-radio-button__illustration']])}>
+			<span className={style['rich-radio-button__illustration']}>
 				<asset.illustration />
 			</span>
 		);
 	}
 	if (asset?.logo) {
-		return <Icon name={asset.logo} className={classnames([style['rich-radio-button__logo']])} />;
+		return <Icon name={asset.logo} className={style['rich-radio-button__logo']} />;
 	}
 	if (asset?.name) {
 		return (
-			<span className={classnames([style['rich-radio-button__icon']])}>
+			<span className={style['rich-radio-button__icon']}>
 				{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);
+					}
+				}}
 			/>
 			<span className={style['rich-radio-button']}>
 				<StackVertical as="span" gap="XS">

diff --git 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;
+					}
 				}
 			}