CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 🐛 sizing var consistency

Browse Source
This commit is contained in:
dharini committed 2022-01-24 15:43:44 -08:00
1 parent bd7834ca81
commit ff514b076b
4 files changed
+113 -135
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/form/radio/card/index.js
+1 -1
View File
@@ -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}`;
}
addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
+2 -4
View File
@@ -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
),
addons/rose/addon/styles/rose/components/form/_radio-card.scss
+109 -129
View File
@@ -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':
"<svg viewBox='0 0 24 24' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
'hover':
"<svg viewBox='0 0 24 24' fill='%236f7682' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
'focus':
"<svg viewBox='0 0 24 24' fill='%231563ff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
'checked':
"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%231563ff'/></svg>",
'disabled':
"<svg viewBox='0 0 24 24' fill='%23bac1cc' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
'disabled-checked':
"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23bac1cc'/></svg>",
'error':
"<svg viewBox='0 0 24 24' fill='%23c73445' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
'error-checked':
"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23c73445'/></svg>",
);
.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'
));
}
}
}
}
addons/rose/tests/integration/components/rose/form/radio/card-test.js
+1 -1
View File
@@ -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`<Rose::Form::Radio::Card @layout="tile"/>`);
assert.ok(await find('.rose-form-radio-card-tile'));
assert.ok(await find('.tile'));
});
test('it supports an icon', async function (assert) {