From db09107c81d7985289779fca122debdc66a2d3ae Mon Sep 17 00:00:00 2001 From: Jory Tindall Date: Mon, 23 Sep 2024 13:14:22 -0700 Subject: [PATCH 01/10] Changed text colors to disabled-foreground, fixed border colors to reflect interactive states --- .../src/styles/components/form/radio-card.scss | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/components/src/styles/components/form/radio-card.scss b/packages/components/src/styles/components/form/radio-card.scss index 350f61adba..e38376218d 100644 --- a/packages/components/src/styles/components/form/radio-card.scss +++ b/packages/components/src/styles/components/form/radio-card.scss @@ -7,7 +7,6 @@ // FORM > RADIO-CARD // - // RadioCard Group .hds-form-group--radio-cards { @@ -38,7 +37,8 @@ display: flex; flex-direction: column; background-color: var(--token-color-surface-primary); - border: var(--token-form-radiocard-border-width) solid var(--token-color-border-primary); + border: var(--token-form-radiocard-border-width) solid + var(--token-color-border-primary); border-radius: var(--token-form-radiocard-border-radius); box-shadow: var(--token-elevation-mid-box-shadow); cursor: pointer; @@ -64,12 +64,17 @@ &--checked, &.mock-checked { - border-color: var(--token-color-focus-action-internal); + border-color: var(--token-color-palette-blue-300); .hds-form-radio-card__control-wrapper { background-color: var(--token-color-surface-action); border-color: var(--token-color-border-action); } + + &:hover, + &.mock-hover { + border-color: var(--token-color-palette-blue-400); + } } &--disabled, @@ -77,8 +82,14 @@ background-color: var(--token-color-surface-interactive-disabled); border-color: var(--token-color-border-primary); box-shadow: none; + color: var(--token-form-control-disabled-foreground-color); cursor: not-allowed; + .hds-form-radio-card__label, + .hds-form-radio-card__description { + color: var(--token-form-control-disabled-foreground-color); + } + .hds-form-radio-card__control-wrapper { background-color: var(--token-color-surface-interactive-disabled); border-color: var(--token-color-border-primary); From 08ccf80cf1a4499c3112a9eaa0f2ba665970f288 Mon Sep 17 00:00:00 2001 From: Jory Tindall Date: Mon, 23 Sep 2024 13:18:24 -0700 Subject: [PATCH 02/10] Add changeset --- .changeset/quiet-ducks-develop.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .changeset/quiet-ducks-develop.md diff --git a/.changeset/quiet-ducks-develop.md b/.changeset/quiet-ducks-develop.md new file mode 100644 index 0000000000..fc401ea533 --- /dev/null +++ b/.changeset/quiet-ducks-develop.md @@ -0,0 +1,9 @@ +--- +'@hashicorp/design-system-components': patch +--- + +`RadioCard` + +- Fixed selected border colors to match Figma and interactive states. +- Updated icon, label, and description colors to use `disabled-foreground` when + the `RadioCard` is disabled. From 347ede5b72a1d6d8855e2c17fa70600f33708738 Mon Sep 17 00:00:00 2001 From: Jory Tindall Date: Mon, 23 Sep 2024 13:29:33 -0700 Subject: [PATCH 03/10] Satisfy linter --- packages/components/src/styles/components/form/radio-card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/styles/components/form/radio-card.scss b/packages/components/src/styles/components/form/radio-card.scss index e38376218d..c4612af832 100644 --- a/packages/components/src/styles/components/form/radio-card.scss +++ b/packages/components/src/styles/components/form/radio-card.scss @@ -79,10 +79,10 @@ &--disabled, &.mock-disabled { + color: var(--token-form-control-disabled-foreground-color); background-color: var(--token-color-surface-interactive-disabled); border-color: var(--token-color-border-primary); box-shadow: none; - color: var(--token-form-control-disabled-foreground-color); cursor: not-allowed; .hds-form-radio-card__label, From 146bcd5de4a9176cce61646b4fcdc905067645ce Mon Sep 17 00:00:00 2001 From: Jory Tindall Date: Tue, 24 Sep 2024 12:33:54 -0700 Subject: [PATCH 04/10] Alter the opacity of nested icons and badges to make them appear disabled --- .../components/src/styles/components/form/radio-card.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/src/styles/components/form/radio-card.scss b/packages/components/src/styles/components/form/radio-card.scss index c4612af832..ca6783bdf9 100644 --- a/packages/components/src/styles/components/form/radio-card.scss +++ b/packages/components/src/styles/components/form/radio-card.scss @@ -94,6 +94,12 @@ background-color: var(--token-color-surface-interactive-disabled); border-color: var(--token-color-border-primary); } + + /* Set the opacity of nested components to make them appear disabled */ + .hds-badge, + .hds-icon { + opacity: 50%; + } } } From 001ff1ebefa2bf7e14694fd1abaf7b687cd3193e Mon Sep 17 00:00:00 2001 From: Jory Tindall Date: Tue, 24 Sep 2024 12:37:56 -0700 Subject: [PATCH 05/10] Add showcase examples --- .../app/templates/components/form/radio-card.hbs | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/showcase/app/templates/components/form/radio-card.hbs b/showcase/app/templates/components/form/radio-card.hbs index 98b8e1b102..ac54d8c953 100644 --- a/showcase/app/templates/components/form/radio-card.hbs +++ b/showcase/app/templates/components/form/radio-card.hbs @@ -17,18 +17,28 @@ {{#each @model.STATES as |state|}} - + Label Description + + + Strong text in a generic. + + {{/each}} {{#each @model.STATES as |state|}} - + Label Description + + + Strong text in a generic. + + {{/each}} From e4c95e74c0209d5e191cd518d1a0a2265816cde3 Mon Sep 17 00:00:00 2001 From: Jory Tindall Date: Tue, 24 Sep 2024 12:40:59 -0700 Subject: [PATCH 06/10] Update opacity value --- packages/components/src/styles/components/form/radio-card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/styles/components/form/radio-card.scss b/packages/components/src/styles/components/form/radio-card.scss index ca6783bdf9..7175283c8c 100644 --- a/packages/components/src/styles/components/form/radio-card.scss +++ b/packages/components/src/styles/components/form/radio-card.scss @@ -98,7 +98,7 @@ /* Set the opacity of nested components to make them appear disabled */ .hds-badge, .hds-icon { - opacity: 50%; + opacity: 0.5; } } } From 25b897d464d0de45fffc5fa5a098515d4405d965 Mon Sep 17 00:00:00 2001 From: Jory Tindall Date: Wed, 25 Sep 2024 09:13:01 -0700 Subject: [PATCH 07/10] Moved change in opacity to radio-card__content --- .../components/src/styles/components/form/radio-card.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/components/src/styles/components/form/radio-card.scss b/packages/components/src/styles/components/form/radio-card.scss index 7175283c8c..f2f9ada5d8 100644 --- a/packages/components/src/styles/components/form/radio-card.scss +++ b/packages/components/src/styles/components/form/radio-card.scss @@ -95,10 +95,8 @@ border-color: var(--token-color-border-primary); } - /* Set the opacity of nested components to make them appear disabled */ - .hds-badge, - .hds-icon { - opacity: 0.5; + .hds-form-radio-card__content { + opacity: 0.6; } } } From 73c5549fd9d85128f8e5e3adc9b31d0b6b5cde1e Mon Sep 17 00:00:00 2001 From: Jory Tindall Date: Wed, 25 Sep 2024 09:17:06 -0700 Subject: [PATCH 08/10] Slight change in opacity value --- packages/components/src/styles/components/form/radio-card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/styles/components/form/radio-card.scss b/packages/components/src/styles/components/form/radio-card.scss index f2f9ada5d8..5c17215874 100644 --- a/packages/components/src/styles/components/form/radio-card.scss +++ b/packages/components/src/styles/components/form/radio-card.scss @@ -96,7 +96,7 @@ } .hds-form-radio-card__content { - opacity: 0.6; + opacity: 0.5; } } } From 10d731763b5045830584d8e78f65222e16b76201 Mon Sep 17 00:00:00 2001 From: Jory Tindall Date: Wed, 25 Sep 2024 09:26:03 -0700 Subject: [PATCH 09/10] Revert examples in showcase --- .../app/templates/components/form/radio-card.hbs | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/showcase/app/templates/components/form/radio-card.hbs b/showcase/app/templates/components/form/radio-card.hbs index ac54d8c953..5a9bc5ab27 100644 --- a/showcase/app/templates/components/form/radio-card.hbs +++ b/showcase/app/templates/components/form/radio-card.hbs @@ -17,28 +17,16 @@ {{#each @model.STATES as |state|}} - Label Description - - - Strong text in a generic. - - {{/each}} {{#each @model.STATES as |state|}} - Label Description - - - Strong text in a generic. - - {{/each}} From 383513d1b2120edfbfe3cae9fc0ceb93f48f0e6f Mon Sep 17 00:00:00 2001 From: Jory Tindall Date: Wed, 25 Sep 2024 09:49:05 -0700 Subject: [PATCH 10/10] Cleanup of showcase and revert changing text styles --- .../components/src/styles/components/form/radio-card.scss | 6 ------ showcase/app/templates/components/form/radio-card.hbs | 2 ++ 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/components/src/styles/components/form/radio-card.scss b/packages/components/src/styles/components/form/radio-card.scss index 5c17215874..c37aa2990a 100644 --- a/packages/components/src/styles/components/form/radio-card.scss +++ b/packages/components/src/styles/components/form/radio-card.scss @@ -79,17 +79,11 @@ &--disabled, &.mock-disabled { - color: var(--token-form-control-disabled-foreground-color); background-color: var(--token-color-surface-interactive-disabled); border-color: var(--token-color-border-primary); box-shadow: none; cursor: not-allowed; - .hds-form-radio-card__label, - .hds-form-radio-card__description { - color: var(--token-form-control-disabled-foreground-color); - } - .hds-form-radio-card__control-wrapper { background-color: var(--token-color-surface-interactive-disabled); border-color: var(--token-color-border-primary); diff --git a/showcase/app/templates/components/form/radio-card.hbs b/showcase/app/templates/components/form/radio-card.hbs index 5a9bc5ab27..98b8e1b102 100644 --- a/showcase/app/templates/components/form/radio-card.hbs +++ b/showcase/app/templates/components/form/radio-card.hbs @@ -17,6 +17,7 @@ {{#each @model.STATES as |state|}} + Label Description @@ -25,6 +26,7 @@ {{#each @model.STATES as |state|}} + Label Description