Skip to content

Commit f5b1c17

Browse files
ncamerancamera
authored
Add styles for radio-group control and improve styles in dialog control (#30)
* Add styles for radio-group control * Add secondary style for dialogs
1 parent 002af17 commit f5b1c17

File tree

3 files changed

+195
-18
lines changed

3 files changed

+195
-18
lines changed

‎packages/unanimo/src/components/_dialog.scss‎

Lines changed: 73 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
1-
%dialog {
1+
%dialog-primary {
22
border-radius: var(--border-radius-un-border__radius--l);
33
background-color: var(--elevation-un-elevation--2);
44
box-shadow: var(--box-shadows-un-box-shadow--2);
55
padding: var(--spacing-un-spacing--l);
66
}
77

8-
%dialog__backdrop {
8+
%dialog-secondary {
9+
border-radius: var(--border-radius-un-border__radius--l);
10+
background-color: var(--surface-un-surface--positive);
11+
border: 1px solid var(--borders-un-border-color__mild);
12+
box-shadow: var(--box-shadows-un-box-shadow--2);
13+
padding: var(--spacing-un-spacing--l);
14+
}
15+
16+
%dialog-primary__backdrop,
17+
%dialog-secondary__backdrop {
918
background-color: color-mix(
1019
in srgb,
1120
var(--elevation-un-elevation--4) 25%,
@@ -15,44 +24,94 @@
1524
z-index: 108; // TODO: This is a WA to show the backdrop above the button of the dropdown
1625
}
1726

18-
%dialog__header {
27+
%dialog-primary__header {
1928
align-items: flex-start;
2029
gap: var(--spacing-un-spacing--l);
2130
margin-block-end: var(--spacing-un-spacing--xl);
2231
}
2332

24-
%dialog__caption {
33+
%dialog-secondary__header {
34+
gap: var(--spacing-un-spacing--l);
35+
margin-block-end: var(--spacing-un-spacing--xl);
36+
}
37+
38+
%dialog-primary__caption {
2539
@extend %heading-2;
2640
margin-block-start: 32px;
2741
word-break: break-word;
2842
}
2943

44+
%dialog-secondary__caption {
45+
@extend %heading-4;
46+
word-break: break-word;
47+
}
48+
3049
@mixin dialog__close-button-icon($icons-path: "") {
3150
--button-icon: url("#{$icons-path}close.svg");
3251
}
3352

34-
@mixin dialog(
35-
$dialog-selector: ".dialog::part(dialog)",
36-
$backdrop-selector: ".dialog.ch-dialog--modal",
37-
$header-selector: ".dialog::part(header)",
38-
$caption-selector: ".dialog::part(caption)",
39-
$close-button-selector: ".dialog::part(close-button)",
53+
@mixin dialog-primary(
54+
$dialog-selector: ".dialog-primary::part(dialog)",
55+
$backdrop-selector: ".dialog-primary.ch-dialog--modal",
56+
$header-selector: ".dialog-primary::part(header)",
57+
$caption-selector: ".dialog-primary::part(caption)",
58+
$close-button-selector: ".dialog-primary::part(close-button)",
59+
$icons-path: ""
60+
) {
61+
#{$dialog-selector} {
62+
@extend %dialog-primary;
63+
}
64+
65+
#{$backdrop-selector} {
66+
@extend %dialog-primary__backdrop;
67+
}
68+
69+
#{$header-selector} {
70+
@extend %dialog-primary__header;
71+
}
72+
73+
#{$caption-selector} {
74+
@extend %dialog-primary__caption;
75+
}
76+
77+
@include button-tertiary(
78+
$selector: #{$close-button-selector},
79+
$add--disabled: false,
80+
$add--error: false
81+
);
82+
83+
#{$close-button-selector} {
84+
@extend %button-icon-only;
85+
@include dialog__close-button-icon($icons-path);
86+
87+
&::before {
88+
@extend %button-icon;
89+
}
90+
}
91+
}
92+
93+
@mixin dialog-secondary(
94+
$dialog-selector: ".dialog-secondary::part(dialog)",
95+
$backdrop-selector: ".dialog-secondary.ch-dialog--modal",
96+
$header-selector: ".dialog-secondary::part(header)",
97+
$caption-selector: ".dialog-secondary::part(caption)",
98+
$close-button-selector: ".dialog-secondary::part(close-button)",
4099
$icons-path: ""
41100
) {
42101
#{$dialog-selector} {
43-
@extend %dialog;
102+
@extend %dialog-secondary;
44103
}
45104

46105
#{$backdrop-selector} {
47-
@extend %dialog__backdrop;
106+
@extend %dialog-secondary__backdrop;
48107
}
49108

50109
#{$header-selector} {
51-
@extend %dialog__header;
110+
@extend %dialog-secondary__header;
52111
}
53112

54113
#{$caption-selector} {
55-
@extend %dialog__caption;
114+
@extend %dialog-secondary__caption;
56115
}
57116

58117
@include button-tertiary(

‎packages/unanimo/src/components/_radio-group.scss‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
%radio-group {
2+
@extend %form-input__text;
3+
4+
--ch-radio-group__radio-container-size: 16px;
5+
--ch-radio-group__radio-option-size: 8px;
6+
7+
color: var(--text-un-text__on-surface--positive);
8+
gap: var(--spacing-un-spacing--m);
9+
}
10+
11+
%radio-item {
12+
gap: var(--spacing-un-spacing--m);
13+
}
14+
15+
%radio__container {
16+
border-color: var(--borders-un-border-color__strong);
17+
18+
&--focus {
19+
border-color: var(--borders-un-border-color__focused);
20+
border-width: 2px;
21+
}
22+
23+
&--disabled {
24+
color: var(--borders-un-border-color__disabled);
25+
}
26+
27+
&--checked {
28+
color: var(--accents-un-accent__primary);
29+
}
30+
31+
// Not implemented yet in the control
32+
&--error {
33+
background-color: var(--colors-Foundation-un-color__red--100);
34+
color: var(--borders-un-border-color__error);
35+
}
36+
}
37+
38+
%radio__label--disabled {
39+
color: var(--borders-un-border-color__disabled);
40+
}
41+
42+
@mixin radio-group(
43+
$radio-group-selector: ".radio-group",
44+
45+
$radio-item-selector: ".radio-group::part(radio-item)",
46+
47+
$radio-item__container-selector: ".radio-group::part(radio__container)",
48+
49+
$radio-item__container--focus-selector:
50+
".radio-group::part(radio__container):focus-within",
51+
52+
$radio-item__container--disabled-selector:
53+
".radio-group::part(radio__container disabled)",
54+
55+
$radio-item__container--checked-selector:
56+
".radio-group::part(radio__container checked)",
57+
58+
$radio-item__container--error-selector:
59+
".radio-group::part(radio__container error)",
60+
61+
$radio-item__label--disabled-selector:
62+
".radio-group::part(radio__label disabled)",
63+
64+
$add--disabled: true,
65+
66+
$add--error: true
67+
) {
68+
#{$radio-group-selector} {
69+
@extend %radio-group;
70+
}
71+
72+
#{$radio-item-selector} {
73+
@extend %radio-item;
74+
}
75+
76+
#{$radio-item__container-selector} {
77+
@extend %radio__container;
78+
}
79+
80+
#{$radio-item__container--focus-selector} {
81+
@extend %radio__container--focus;
82+
}
83+
84+
@if $add--disabled {
85+
#{$radio-item__container--disabled-selector} {
86+
@extend %radio__container--disabled;
87+
}
88+
}
89+
90+
#{$radio-item__container--checked-selector} {
91+
@extend %radio__container--checked;
92+
}
93+
94+
@if $add--error {
95+
#{$radio-item__container--error-selector} {
96+
@extend %radio__container--error;
97+
}
98+
}
99+
100+
@if $add--disabled {
101+
#{$radio-item__label--disabled-selector} {
102+
@extend %radio__label--disabled;
103+
}
104+
}
105+
}

‎packages/unanimo/src/unanimo.scss‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
@import "./components/header";
2323
@import "./components/markdown";
2424
@import "./components/query-viewer-pivot-table";
25+
@import "./components/radio-group";
2526
@import "./components/segmented-control";
2627
@import "./components/slider";
2728
@import "./components/tab";
@@ -68,13 +69,15 @@
6869
$components: true,
6970
$action-group: true,
7071
$card: true,
71-
$dialog: true,
72+
$dialog-primary: true,
73+
$dialog-secondary: true,
7274
$dropdown-primary: true,
7375
$dropdown-secondary: true,
7476
$dropdown-conversational: true,
7577
$header: true,
7678
$markdown: true,
7779
$query-viewer-pivot-table: true,
80+
$radio-group: true,
7881
$segmented-control: true,
7982
$slider-primary: true,
8083
$slider-secondary: true,
@@ -238,9 +241,14 @@
238241
@include card();
239242
}
240243

241-
// dialog
242-
@if $dialog {
243-
@include dialog($icons-path: $icons-path);
244+
// dialog-primary
245+
@if $dialog-primary {
246+
@include dialog-primary($icons-path: $icons-path);
247+
}
248+
249+
// dialog-secondary
250+
@if $dialog-secondary {
251+
@include dialog-secondary($icons-path: $icons-path);
244252
}
245253

246254
// dropdown primary
@@ -273,6 +281,11 @@
273281
@include query-viewer-pivot-table($icons-path);
274282
}
275283

284+
// radio-group
285+
@if $radio-group {
286+
@include radio-group();
287+
}
288+
276289
// segmented-control
277290
@if $segmented-control {
278291
@include segmented-control();

0 commit comments

Comments
 (0)