From 57ad9a91e143f786dea3edab573094b216f3de53 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 23 Oct 2024 23:51:01 +0200 Subject: [PATCH 1/9] Increase radio stroke width on hover --- packages/css/src/components/radio/radio.scss | 3 ++- proprietary/tokens/src/components/ams/radio.tokens.json | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss index ddfe99957d..664dbb7ec9 100644 --- a/packages/css/src/components/radio/radio.scss +++ b/packages/css/src/components/radio/radio.scss @@ -39,7 +39,7 @@ .ams-radio__circle { fill: none; stroke: var(--ams-radio-circle-stroke); - stroke-width: 0.125rem; + stroke-width: var(--ams-radio-circle-stroke-width); } .ams-radio__checked-indicator { @@ -54,6 +54,7 @@ .ams-radio__circle { stroke: var(--ams-radio-circle-hover-stroke); + stroke-width: var(--ams-radio-circle-hover-stroke-width); } .ams-radio__checked-indicator { diff --git a/proprietary/tokens/src/components/ams/radio.tokens.json b/proprietary/tokens/src/components/ams/radio.tokens.json index 3fe1016855..0d33ff4000 100644 --- a/proprietary/tokens/src/components/ams/radio.tokens.json +++ b/proprietary/tokens/src/components/ams/radio.tokens.json @@ -33,6 +33,7 @@ }, "circle": { "stroke": { "value": "{ams.color.primary-blue}" }, + "stroke-width": { "value": "2px" }, "disabled": { "stroke": { "value": "{ams.color.neutral-grey3}" } }, @@ -43,7 +44,8 @@ } }, "hover": { - "stroke": { "value": "{ams.color.dark-blue}" } + "stroke": { "value": "{ams.color.dark-blue}" }, + "stroke-width": { "value": "3px" } }, "invalid": { "stroke": { "value": "{ams.color.primary-red}" }, From 515fb18255d99032acad1f5b2b86fc3ad298efb9 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 12 Nov 2024 11:03:36 +0100 Subject: [PATCH 2/9] Implement contracting hover through extra circle --- packages/css/src/components/radio/radio.scss | 22 +++++++++++++++++-- proprietary/assets/icons/Radio.svg | 6 ++++- .../src/components/ams/radio.tokens.json | 14 ++++++++++-- 3 files changed, 37 insertions(+), 5 deletions(-) diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss index 664dbb7ec9..f6096fcecf 100644 --- a/packages/css/src/components/radio/radio.scss +++ b/packages/css/src/components/radio/radio.scss @@ -42,6 +42,12 @@ stroke-width: var(--ams-radio-circle-stroke-width); } +.ams-radio__hover-indicator { + fill: none; + stroke: transparent; + stroke-width: var(--ams-radio-hover-indicator-stroke-width); +} + .ams-radio__checked-indicator { display: none; fill: var(--ams-radio-checked-indicator-fill); @@ -54,7 +60,10 @@ .ams-radio__circle { stroke: var(--ams-radio-circle-hover-stroke); - stroke-width: var(--ams-radio-circle-hover-stroke-width); + } + + .ams-radio__hover-indicator { + stroke: var(--ams-radio-hover-indicator-hover-stroke); } .ams-radio__checked-indicator { @@ -109,9 +118,13 @@ // HOVER -// Disabled label hover +// Disabled hover .ams-radio__input:disabled + .ams-radio__label:hover { text-decoration: none; + + .ams-radio__hover-indicator { + stroke: transparent; + } } // Invalid hover @@ -121,6 +134,11 @@ stroke: var(--ams-radio-circle-invalid-hover-stroke); } + .ams-radio__hover-indicator { + // TODO: this should be the (currently non-existent) dark red hover color + stroke: var(--ams-radio-hover-indicator-invalid-hover-stroke); + } + .ams-radio__checked-indicator { // TODO: this should be the (currently non-existent) dark red hover color fill: var(--ams-radio-checked-indicator-invalid-hover-fill); diff --git a/proprietary/assets/icons/Radio.svg b/proprietary/assets/icons/Radio.svg index 2df6ab053e..4475e9baec 100644 --- a/proprietary/assets/icons/Radio.svg +++ b/proprietary/assets/icons/Radio.svg @@ -1 +1,5 @@ - + + + + + diff --git a/proprietary/tokens/src/components/ams/radio.tokens.json b/proprietary/tokens/src/components/ams/radio.tokens.json index 0d33ff4000..4f237ec924 100644 --- a/proprietary/tokens/src/components/ams/radio.tokens.json +++ b/proprietary/tokens/src/components/ams/radio.tokens.json @@ -31,6 +31,17 @@ } } }, + "hover-indicator": { + "stroke-width": { "value": "3px" }, + "hover": { + "stroke": { "value": "{ams.color.primary-blue}" } + }, + "invalid": { + "hover": { + "stroke": { "value": "{ams.color.primary-red}" } + } + } + }, "circle": { "stroke": { "value": "{ams.color.primary-blue}" }, "stroke-width": { "value": "2px" }, @@ -44,8 +55,7 @@ } }, "hover": { - "stroke": { "value": "{ams.color.dark-blue}" }, - "stroke-width": { "value": "3px" } + "stroke": { "value": "{ams.color.dark-blue}" } }, "invalid": { "stroke": { "value": "{ams.color.primary-red}" }, From 6103c46bfa8aa6cf728d1a0b261c68b75580ca25 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 12 Nov 2024 11:05:27 +0100 Subject: [PATCH 3/9] Use border tokens --- proprietary/tokens/src/components/ams/radio.tokens.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/proprietary/tokens/src/components/ams/radio.tokens.json b/proprietary/tokens/src/components/ams/radio.tokens.json index 4f237ec924..621f011d82 100644 --- a/proprietary/tokens/src/components/ams/radio.tokens.json +++ b/proprietary/tokens/src/components/ams/radio.tokens.json @@ -32,7 +32,7 @@ } }, "hover-indicator": { - "stroke-width": { "value": "3px" }, + "stroke-width": { "value": "{ams.border.width.lg}" }, "hover": { "stroke": { "value": "{ams.color.primary-blue}" } }, @@ -44,7 +44,7 @@ }, "circle": { "stroke": { "value": "{ams.color.primary-blue}" }, - "stroke-width": { "value": "2px" }, + "stroke-width": { "value": "{ams.border.width.md}" }, "disabled": { "stroke": { "value": "{ams.color.neutral-grey3}" } }, From 3bd0d58bba88699d07577c7579b4e9b0b65cf37d Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 12 Nov 2024 11:05:51 +0100 Subject: [PATCH 4/9] Make circle fill explicitly white --- packages/css/src/components/radio/radio.scss | 2 +- proprietary/tokens/src/components/ams/radio.tokens.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss index f6096fcecf..c51627bcb4 100644 --- a/packages/css/src/components/radio/radio.scss +++ b/packages/css/src/components/radio/radio.scss @@ -37,7 +37,7 @@ } .ams-radio__circle { - fill: none; + fill: var(--ams-radio-circle-fill); stroke: var(--ams-radio-circle-stroke); stroke-width: var(--ams-radio-circle-stroke-width); } diff --git a/proprietary/tokens/src/components/ams/radio.tokens.json b/proprietary/tokens/src/components/ams/radio.tokens.json index 621f011d82..b6a94c2ae0 100644 --- a/proprietary/tokens/src/components/ams/radio.tokens.json +++ b/proprietary/tokens/src/components/ams/radio.tokens.json @@ -43,6 +43,7 @@ } }, "circle": { + "fill": { "value": "{ams.color.primary-white}" }, "stroke": { "value": "{ams.color.primary-blue}" }, "stroke-width": { "value": "{ams.border.width.md}" }, "disabled": { From 4b484a598a96bba1506af18d84081408906915fe Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 12 Nov 2024 11:28:35 +0100 Subject: [PATCH 5/9] Fix hover for disabled invalid --- packages/css/src/components/radio/radio.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss index c51627bcb4..5a53e91758 100644 --- a/packages/css/src/components/radio/radio.scss +++ b/packages/css/src/components/radio/radio.scss @@ -152,6 +152,9 @@ stroke: var(--ams-radio-circle-disabled-invalid-hover-stroke); } + .ams-radio__hover-indicator { + stroke: transparent; + } .ams-radio__checked-indicator { // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling. fill: var(--ams-radio-checked-indicator-disabled-invalid-hover-fill); From 8d5acc41e8cffde22e200b4dfeae7bdfe4038fdc Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 12 Nov 2024 13:20:20 +0100 Subject: [PATCH 6/9] Resize icon canvas to 24x24 --- proprietary/assets/icons/Radio.svg | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/proprietary/assets/icons/Radio.svg b/proprietary/assets/icons/Radio.svg index 4475e9baec..d3dd5cd0da 100644 --- a/proprietary/assets/icons/Radio.svg +++ b/proprietary/assets/icons/Radio.svg @@ -1,5 +1,5 @@ - - - - + + + + From 684c3e157a410105cac076a954ca8ea47c19c0f9 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 12 Nov 2024 14:50:06 +0100 Subject: [PATCH 7/9] Use pixels values in SVG --- proprietary/tokens/src/components/ams/radio.tokens.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/proprietary/tokens/src/components/ams/radio.tokens.json b/proprietary/tokens/src/components/ams/radio.tokens.json index b6a94c2ae0..796dc4eb83 100644 --- a/proprietary/tokens/src/components/ams/radio.tokens.json +++ b/proprietary/tokens/src/components/ams/radio.tokens.json @@ -32,7 +32,7 @@ } }, "hover-indicator": { - "stroke-width": { "value": "{ams.border.width.lg}" }, + "stroke-width": { "value": "3px" }, "hover": { "stroke": { "value": "{ams.color.primary-blue}" } }, @@ -45,7 +45,7 @@ "circle": { "fill": { "value": "{ams.color.primary-white}" }, "stroke": { "value": "{ams.color.primary-blue}" }, - "stroke-width": { "value": "{ams.border.width.md}" }, + "stroke-width": { "value": "2px" }, "disabled": { "stroke": { "value": "{ams.color.neutral-grey3}" } }, From f948dd84d56539c57f153e5f9a663167cc9b91b0 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 19 Nov 2024 22:22:20 +0100 Subject: [PATCH 8/9] Replace changed tokens --- proprietary/tokens/src/components/ams/radio.tokens.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/proprietary/tokens/src/components/ams/radio.tokens.json b/proprietary/tokens/src/components/ams/radio.tokens.json index e0a76f74e4..22b78714ec 100644 --- a/proprietary/tokens/src/components/ams/radio.tokens.json +++ b/proprietary/tokens/src/components/ams/radio.tokens.json @@ -34,16 +34,16 @@ "hover-indicator": { "stroke-width": { "value": "3px" }, "hover": { - "stroke": { "value": "{ams.color.primary-blue}" } + "stroke": { "value": "{ams.brand.color.blue.60}" } }, "invalid": { "hover": { - "stroke": { "value": "{ams.color.primary-red}" } + "stroke": { "value": "{ams.brand.color.red}" } } } }, "circle": { - "fill": { "value": "{ams.color.primary-white}" }, + "fill": { "value": "{ams.brand.color.neutral.0}" }, "stroke": { "value": "{ams.brand.color.blue.60}" }, "stroke-width": { "value": "2px" }, "disabled": { From e0e619a6a98aef60e42a9c9f5ea6441ff996670e Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 19 Nov 2024 22:42:39 +0100 Subject: [PATCH 9/9] Move Radio Icon into Radio component directory --- packages/react/src/Radio/Radio.tsx | 2 +- packages/react/src/Radio/RadioIcon.tsx | 11 +++++++++++ proprietary/assets/icons/Radio.svg | 5 ----- proprietary/assets/package.json | 2 +- 4 files changed, 13 insertions(+), 7 deletions(-) create mode 100644 packages/react/src/Radio/RadioIcon.tsx delete mode 100644 proprietary/assets/icons/Radio.svg diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx index fcb1ca03bb..7aedc1d5a6 100644 --- a/packages/react/src/Radio/Radio.tsx +++ b/packages/react/src/Radio/Radio.tsx @@ -3,10 +3,10 @@ * Copyright Gemeente Amsterdam */ -import { RadioIcon } from '@amsterdam/design-system-react-icons' import clsx from 'clsx' import { forwardRef, useId } from 'react' import type { ForwardedRef, InputHTMLAttributes, PropsWithChildren, ReactNode } from 'react' +import RadioIcon from './RadioIcon' export type RadioProps = { /** An icon to display instead of the default icon. */ diff --git a/packages/react/src/Radio/RadioIcon.tsx b/packages/react/src/Radio/RadioIcon.tsx new file mode 100644 index 0000000000..c9d62f7764 --- /dev/null +++ b/packages/react/src/Radio/RadioIcon.tsx @@ -0,0 +1,11 @@ +import type { SVGProps } from 'react' + +const SvgRadio = (props: SVGProps) => ( + +) + +export default SvgRadio diff --git a/proprietary/assets/icons/Radio.svg b/proprietary/assets/icons/Radio.svg deleted file mode 100644 index d3dd5cd0da..0000000000 --- a/proprietary/assets/icons/Radio.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/proprietary/assets/package.json b/proprietary/assets/package.json index 302fac978d..da68d82954 100644 --- a/proprietary/assets/package.json +++ b/proprietary/assets/package.json @@ -22,7 +22,7 @@ "directory": "proprietary/assets" }, "scripts": { - "optimize-icons": "svgo -f icons --exclude=Radio.svg" + "optimize-icons": "svgo -f icons" }, "devDependencies": { "svgo": "3.3.2"