From ff514b076b762f4e30f3fa3df342b1a232e144fe Mon Sep 17 00:00:00 2001 From: dharini Date: Mon, 24 Jan 2022 15:43:44 -0800 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20sizing=20var=20consistenc?= =?UTF-8?q?y?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/rose/form/radio/card/index.js | 2 +- .../rose/form/radio/card/index.stories.mdx | 6 +- .../rose/components/form/_radio-card.scss | 238 ++++++++---------- .../components/rose/form/radio/card-test.js | 2 +- 4 files changed, 113 insertions(+), 135 deletions(-) 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) {