diff --git a/addons/rose/addon/components/rose/form/radio/card/index.js b/addons/rose/addon/components/rose/form/radio/card/index.js
index 39463c62c..c05cf1a5b 100644
--- a/addons/rose/addon/components/rose/form/radio/card/index.js
+++ b/addons/rose/addon/components/rose/form/radio/card/index.js
@@ -3,5 +3,5 @@ import RoseFormRadioRadioComponent from '../radio';
export default class RoseFormRadioCardComponent extends RoseFormRadioRadioComponent {
// =attributes
layout = this.args.layout;
- className = `rose-form-radio-card-${this.layout}`;
+ className = `rose-form-radio-card ${this.layout}`;
}
diff --git a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
index f527def6c..82310fb57 100644
--- a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
@@ -48,8 +48,7 @@ Renders a form radiofield in a Wide format.
'icon',
{
'none': null,
- 'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
- 'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
+ 'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
},
null
),
@@ -100,8 +99,7 @@ Renders a form radiofield in a tile format.
'icon',
{
'none': null,
- 'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
- 'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
+ 'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
},
null
),
diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
index 048390e9e..a1576d5b0 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
@@ -2,23 +2,68 @@
@use '../../utilities/type';
@use '../../variables/typography';
-$l: sizing.rems(l); // 16
-$m: sizing.rems(m); // 16
+$size-xxl: sizing.rems(xxl); //48
+$size-xl: sizing.rems(xl); //48
+$size-l: sizing.rems(l); // 24
+$size-m: sizing.rems(m); // 16
+$size-s: sizing.rems(s); //12
$size-xs: sizing.rems(xs); // 8
$size-xxs: sizing.rems(xxs); // 4
$size-xxxs: sizing.rems(xxxs); // 2
$size-xxxxs: sizing.rems(xxxxs); // 1
-.rose-form-radio-card-wide {
+
+$radio-svg: (
+ 'default':
+ "",
+ 'hover':
+ "",
+ 'focus':
+ "",
+ 'checked':
+ "",
+ 'disabled':
+ "",
+ 'disabled-checked':
+ "",
+ 'error':
+ "",
+ 'error-checked':
+ "",
+);
+
+.rose-form-radio-card {
+ &.wide {
+ width: ($size-m) * 23;
+ .rose-icon {
+ --size: #{$size-m};
+ }
+ }
+
+ &.tile {
+ width: ($size-m) * 15;
+
+ .rose-icon {
+ --size: #{$size-m + $size-xxs + $size-xxxs};
+ }
+ .rose-form-radio-label {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ height: $size-m * 9;
+ &::after {
+ left: $size-xl * 3.1;
+ }
+ }
+ }
position: relative;
display: flex;
align-items: center;
- width: ($m) * 23;
justify-content: center;
.radio-card-overlay {
position: absolute;
- height: $l + $size-xxs;
+ height: $size-l + $size-xxs;
background-color: var(--ui-gray-subtler-5);
width: 100%;
bottom: 0;
@@ -29,32 +74,54 @@ $size-xxxxs: sizing.rems(xxxxs); // 1
font-weight: bold;
font-size: typography.font-size(s);
color: var(--black);
- width: ($m) * 23;
- height: ($m) * 7.5;
+ width: ($size-m) * 23;
+ height: ($size-m) * 7.4;
display: block;
position: relative;
text-align: left;
word-break: break-all;
- border: $size-xxxxs solid #bac1cc;
+ border: $size-xxxxs solid var(--ui-gray-subtler-6);
box-shadow: 0 $size-xxs $size-xxs
rgba(var(--stark-components), var(--opacity-2));
border-radius: $size-xxxs;
- padding: $s $l;
+ padding: $size-s $size-m;
box-sizing: border-box;
background-color: var(--white);
.rose-form-helper-text {
font-weight: normal;
}
- .rose-icon {
- padding-right: $size-xxs;
- padding-left: $size-xxs;
+
+ &::after {
+ position: absolute;
+ bottom: $size-xxs;
+ right: $size-xxl * 3.7;
+ display: block;
+ width: $size-m;
+ height: $size-m;
+ transform: scale(2);
+ pointer-events: none;
+ content: ' ';
+ background: no-repeat 50%/50% 50%;
+ background-image: url($data-svg-prefix + map-get($radio-svg, 'default'));
}
}
.rose-form-radio-field {
position: absolute;
z-index: 1;
bottom: $size-xs;
+ opacity: 0;
+
&:not(:disabled) {
+ &:focus {
+ ~ .rose-form-radio-label {
+ &::after {
+ background-image: url($data-svg-prefix + map-get(
+ $radio-svg,
+ 'focus'
+ ));
+ }
+ }
+ }
&:hover {
~ .rose-form-radio-label {
border: $size-xxxxs solid var(--ui-gray);
@@ -62,10 +129,16 @@ $size-xxxxs: sizing.rems(xxxxs); // 1
}
&:checked {
~ .rose-form-radio-label {
+ &::after {
+ background-image: url($data-svg-prefix + map-get(
+ $radio-svg,
+ 'checked'
+ ));
+ }
.radio-card-overlay {
background-color: var(--action-subtler-1h);
}
- border: $size-xxxxs solid #1563ff;
+ border: $size-xxxxs solid var(--info-subtler-1);
}
}
}
@@ -75,141 +148,48 @@ $size-xxxxs: sizing.rems(xxxxs); // 1
border: $size-xxxxs solid var(--ui-border-subtler-1);
background-color: var(--ui-gray-subtler-6);
color: var(--ui-gray-starker-1);
- }
- }
- }
-
- &.error {
- .rose-form-radio-field {
- &:not(:disabled):not(:focus) {
- ~ .rose-form-radio-label {
- .radio-card-overlay {
- background-color: var(--failure-subtler-1);
- }
- border-color: var(--failure);
- }
- &:checked {
- opacity: 0;
- ~ .rose-form-radio-label {
- &::after {
- position: absolute;
- bottom: $size-xxs + $size-xxxs;
- right: sizing.rems(m) * 10.9;
- display: block;
- width: $m;
- height: $m;
- transform: scale(2);
- pointer-events: none;
- content: ' ';
- background: no-repeat 50%/50% 50%;
- background-image: url($data-svg-prefix + map-get(
- $radio-svg,
- 'error-checked'
- ));
- z-index: 2;
- }
- }
+ &::after {
+ background-image: url($data-svg-prefix + map-get(
+ $radio-svg,
+ 'disabled'
+ ));
}
}
- }
- }
-}
-.rose-form-radio-card-tile {
- position: relative;
- display: flex;
- align-items: center;
- width: ($m) * 15;
- justify-content: center;
-
- .radio-card-overlay {
- position: absolute;
- height: $l + $size-xxs;
- background-color: var(--ui-gray-subtler-5);
- width: 100%;
- bottom: 0;
- right: 0;
- }
- .rose-form-radio-label {
- font-style: normal;
- font-weight: bold;
- font-size: typography.font-size(s);
- color: var(--black);
- width: ($m) * 15;
- height: ($m) * 9;
- display: flex;
- flex-direction: column;
- align-items: center;
- position: relative;
- text-align: left;
- word-break: break-all;
- border: $xxxxs solid var(--ui-border);
- box-shadow: 0 $size-xxs $size-xxs
- rgba(var(--stark-components), var(--opacity-2));
- border-radius: $size-xxxs;
- padding: $m $size-xxs;
- box-sizing: border-box;
- background-color: var(--white);
- .rose-form-helper-text {
- font-weight: normal;
- }
- }
- .rose-form-radio-field {
- position: absolute;
- z-index: 1;
- bottom: $size-xs;
- &:not(:disabled) {
- &:hover {
- ~ .rose-form-radio-label {
- border: $xxxxs solid var(--ui-gray);
- }
- }
&:checked {
~ .rose-form-radio-label {
- .radio-card-overlay {
- background-color: var(--action-subtler-1h);
+ &::after {
+ background-image: url($data-svg-prefix + map-get(
+ $radio-svg,
+ 'disabled-checked'
+ ));
}
- border: $xxxxs solid #1563ff;
}
}
}
- &:disabled {
- ~ .rose-form-radio-label {
- border: $xxxxs solid var(--ui-border-subtler-1);
- background-color: var(--ui-gray-subtler-6);
- color: var(--ui-gray-starker-1);
- }
- }
}
&.error {
.rose-form-radio-field {
&:not(:disabled):not(:focus) {
- ~ .rose-form-radio-label {
- .radio-card-overlay {
- background-color: var(--failure-subtler-1);
- }
- border-color: var(--failure);
- }
- &:checked {
- opacity: 0;
+ &:not(:disabled):not(:focus) {
~ .rose-form-radio-label {
&::after {
- position: absolute;
- bottom: $size-xxs;
- right: sizing.rems(m) * 6.8;
- display: block;
- width: $m;
- height: $m;
- transform: scale(2);
- pointer-events: none;
- content: ' ';
- background: no-repeat 50%/50% 50%;
background-image: url($data-svg-prefix + map-get(
$radio-svg,
- 'error-checked'
+ 'error'
));
- z-index: 2;
+ }
+ }
+
+ &:checked {
+ ~ .rose-form-radio-label {
+ &::after {
+ background-image: url($data-svg-prefix + map-get(
+ $radio-svg,
+ 'error-checked'
+ ));
+ }
}
}
}
diff --git a/addons/rose/tests/integration/components/rose/form/radio/card-test.js b/addons/rose/tests/integration/components/rose/form/radio/card-test.js
index ba0f66206..f3dff2206 100644
--- a/addons/rose/tests/integration/components/rose/form/radio/card-test.js
+++ b/addons/rose/tests/integration/components/rose/form/radio/card-test.js
@@ -14,7 +14,7 @@ module('Integration | Component | rose/form/radio/card', function (hooks) {
test('it renders in a tile format when tile layout is applied', async function (assert) {
await render(hbs``);
- assert.ok(await find('.rose-form-radio-card-tile'));
+ assert.ok(await find('.tile'));
});
test('it supports an icon', async function (assert) {