Skip to content

Commit 91d61ee

Browse files
ninamarinaninamarina
authored
chore: remove utility classes from components (#21)
* chore: remove utility classes from components Adds styles for the following components in dialtone library: avatar chip codeblock checkbox * fix collapsible, combobox, input, input group * fix image viewer, keyboard shortcut, list item group
1 parent 6fa1401 commit 91d61ee

File tree

11 files changed

+250
-0
lines changed

11 files changed

+250
-0
lines changed

‎packages/dialtone/lib/build/less/components/avatar.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,13 @@
7575
}
7676

7777
&__initials {
78+
position: absolute;
79+
z-index: var(--zi-base);
7880
font-weight: var(--dt-font-weight-bold);
7981
font-size: var(--avatar-size-text);
8082
line-height: var(--dt-font-line-height-100);
8183
text-transform: uppercase;
84+
user-select: none;
8285
}
8386

8487
&__icon {

‎packages/dialtone/lib/build/less/components/chip.less

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,12 @@
128128
background-color: var(--dt-color-black-400);
129129
}
130130

131+
.d-chip__text {
132+
overflow: hidden;
133+
white-space: nowrap;
134+
text-overflow: ellipsis;
135+
}
136+
131137
// ============================================================================
132138
// $ SIZES
133139
// ----------------------------------------------------------------------------

‎packages/dialtone/lib/build/less/components/codeblock.less

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
//
2+
// DIALTONE
3+
// COMPONENTS: Codeblock
4+
//
5+
// These are the styles for codeblock component.
6+
//
7+
// TABLE OF CONTENTS
8+
// • BASE STYLE
9+
//
10+
// ============================================================================
11+
// $ BASE STYLE
12+
// ----------------------------------------------------------------------------
13+
14+
.d-codeblock {
15+
display: block;
16+
padding: var(--dt-space-400);
17+
color: var(--dt-color-foreground-secondary);
18+
font-size: var(--dt-font-size-200);
19+
font-family: var(--dt-font-family-mono);
20+
line-height: var(--dt-font-line-height-400);
21+
white-space: pre-wrap;
22+
background-color: var(--dt-color-surface-secondary);
23+
border: var(--dt-size-100) solid;
24+
border-color: var(--dt-color-border-subtle);
25+
border-radius: var(--dt-size-radius-400);
26+
}

‎packages/dialtone/lib/build/less/components/collapsible.less

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
//
2+
// DIALTONE
3+
// COMPONENTS: COLLAPSIBLE
4+
//
5+
// These are collapsible classes for Dialpad's design system Dialtone.
6+
// For further documentation of these and other classes,
7+
// visit https://dialpad.design/components/collapsible
8+
//
9+
// TABLE OF CONTENTS
10+
// • BASE STYLE
11+
//
12+
// ============================================================================
13+
// $ BASE STYLE
14+
// ----------------------------------------------------------------------------
15+
.d-collapsible__icon {
16+
--icon-base-scale: var(--dt-size-400);
17+
--icon-size-300: calc(var(--icon-base-scale) * 2.25);
18+
--icon-size: var(--icon-size-300);
19+
20+
flex: none;
21+
flex-shrink: 0;
22+
width: var(--icon-size);
23+
height: var(--icon-size);
24+
margin-right: var(--dt-space-400);
25+
fill: currentColor;
26+
}
27+
28+
.d-collapsible__anchor-text {
29+
margin-right: auto;
30+
overflow: hidden;
31+
white-space: nowrap;
32+
text-overflow: ellipsis;
33+
}

‎packages/dialtone/lib/build/less/components/combobox.less

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
//
2+
// DIALTONE
3+
// COMPONENTS: COMBOBOX
4+
//
5+
// These are combobox classes for Dialpad's design system Dialtone.
6+
// For further documentation of these and other classes,
7+
// visit https://dialpad.design/components/combobox
8+
//
9+
// TABLE OF CONTENTS
10+
// • EMPTY LIST
11+
// • LOADING LIST LIST
12+
//
13+
// ============================================================================
14+
// $ EMPTY LIST
15+
// ----------------------------------------------------------------------------
16+
.d-combobox__empty-list {
17+
padding: var(--dt-space-0);
18+
}
19+
20+
// ============================================================================
21+
// $ LOADING LIST
22+
// ----------------------------------------------------------------------------
23+
.d-combobox__loading-list {
24+
max-height: var(--dt-size-925);
25+
margin-top: var(--dt-space-400);
26+
padding: var(--dt-space-0);
27+
overflow-y: auto;
28+
}

‎packages/dialtone/lib/build/less/components/image-viewer.less

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
//
2+
// DIALTONE
3+
// COMPONENTS: Image Viewer
4+
//
5+
// These are the styles for Image Viewer component.
6+
//
7+
// TABLE OF CONTENTS
8+
// • BASE STYLE
9+
//
10+
// ============================================================================
11+
// $ BASE STYLE
12+
// ----------------------------------------------------------------------------
13+
.d-image-viewer__preview-button {
14+
padding: var(--dt-space-0);
15+
cursor: -webkit-zoom-in;
16+
cursor: zoom-in;
17+
}
18+
19+
.d-image-viewer__full {
20+
max-width: 80%;
21+
max-height: 80%;
22+
padding: var(--dt-space-0);
23+
border-radius: var(--dt-size-radius-0);
24+
25+
&__image {
26+
max-width: 100%;
27+
max-height: 100%;
28+
}
29+
}
30+
31+
.d-image-viewer__close-button {
32+
--fco: 100%;
33+
34+
color: hsla(var(--dt-color-neutral-white-h) var(--dt-color-neutral-white-s) var(--dt-color-neutral-white-l) / var(--fco));
35+
}

‎packages/dialtone/lib/build/less/components/input.less

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,37 @@
114114
}
115115
}
116116

117+
.d-input__label-text {
118+
display: flex;
119+
flex: 1 0%;
120+
align-items: baseline;
121+
justify-content: space-between;
122+
box-sizing: border-box;
123+
margin-bottom: var(--dt-space-300);
124+
color: var(--dt-color-foreground-secondary);
125+
font-weight: var(--dt-font-weight-semi-bold);
126+
font-size: var(--dt-font-size-200);
127+
font-family: inherit;
128+
line-height: var(--dt-font-line-height-300);
129+
word-break: break-word;
130+
overflow-wrap: break-word;
131+
}
132+
133+
.d-input__description {
134+
display: flex;
135+
flex-direction: column;
136+
box-sizing: border-box;
137+
color: var(--dt-color-foreground-tertiary);
138+
font-size: var(--dt-font-size-100);
139+
font-family: inherit;
140+
line-height: var(--dt-font-line-height-400);
141+
fill: currentColor;
142+
}
143+
144+
.d-input__length-description {
145+
margin-bottom: var(--dt-space-200);
146+
}
147+
117148
// $$ INPUT WRAPPER
118149
// ----------------------------------------------------------------------------
119150
.d-input__wrapper {

‎packages/dialtone/lib/build/less/components/keyboard-shortcut.less

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
//
2+
// DIALTONE
3+
// COMPONENTS: Keyboard Shortcut
4+
//
5+
// These are the styles for Keyboard Shortcut component.
6+
//
7+
// TABLE OF CONTENTS
8+
// • BASE STYLE
9+
//
10+
// ============================================================================
11+
// $ BASE STYLE
12+
// ----------------------------------------------------------------------------
13+
.d-keyboard-shortcut {
14+
display: inline-flex;
15+
align-items: center;
16+
justify-content: center;
17+
box-sizing: border-box;
18+
padding-right: var(--dt-space-300);
19+
padding-left: var(--dt-space-300);
20+
font-size: var(--dt-font-size-100);
21+
font-family: var(--dt-font-family-body);
22+
border: var(--dt-size-100) solid;
23+
border-color: var(--dt-color-border-default);
24+
border-radius: var(--dt-size-radius-300);
25+
26+
&--inverted {
27+
border-color: var(--dt-color-border-moderate-inverted);
28+
}
29+
30+
&__icon,
31+
&__item {
32+
margin-right: var(--dt-space-200);
33+
color: var(--dt-color-foreground-tertiary);
34+
35+
&--inverted {
36+
color: var(--dt-color-foreground-secondary-inverted);
37+
}
38+
}
39+
}

‎packages/dialtone/lib/build/less/components/list-item-group.less

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
//
2+
// DIALTONE
3+
// COMPONENTS: List Item Group
4+
//
5+
// These are the styles for List Item Group component.
6+
//
7+
// TABLE OF CONTENTS
8+
// • BASE STYLE
9+
//
10+
// ============================================================================
11+
// $ BASE STYLE
12+
// ----------------------------------------------------------------------------
13+
.d-list-item-group {
14+
position: relative;
15+
padding-right: var(--dt-space-0);
16+
padding-left: var(--dt-space-0);
17+
}

‎packages/dialtone/lib/build/less/components/radio-checkbox.less

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,22 @@
107107
display: flex;
108108
flex-direction: column;
109109
align-items: flex-start;
110+
111+
&__label {
112+
display: flex;
113+
flex: 1 0%;
114+
align-items: baseline;
115+
justify-content: space-between;
116+
box-sizing: border-box;
117+
margin-bottom: var(--dt-space-300);
118+
color: var(--dt-color-foreground-secondary);
119+
font-weight: var(--dt-font-weight-semi-bold);
120+
font-size: var(--dt-font-size-200);
121+
font-family: inherit;
122+
line-height: var(--dt-font-line-height-300);
123+
word-break: break-word;
124+
overflow-wrap: break-word;
125+
}
110126
}
111127

112128

@@ -145,6 +161,16 @@
145161
cursor: pointer;
146162
}
147163

164+
.d-checkbox__description {
165+
display: flex;
166+
box-sizing: border-box;
167+
color: var(--dt-color-foreground-tertiary);
168+
font-size: var(--dt-font-size-100);
169+
font-family: inherit;
170+
line-height: var(--dt-font-line-height-400);
171+
fill: currentColor;
172+
}
173+
148174
// ============================================================================
149175
// $ CHECKBOXES
150176
// ----------------------------------------------------------------------------

‎packages/dialtone/lib/build/less/dialtone.less

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,18 @@
1717
@import 'components/button';
1818
@import 'components/card';
1919
@import 'components/chip';
20+
@import 'components/codeblock';
21+
@import 'components/collapsible';
22+
@import 'components/combobox';
2023
@import 'components/datepicker';
2124
@import 'components/emoji-picker';
2225
@import 'components/forms';
26+
@import 'components/image-viewer';
2327
@import 'components/input';
28+
@import 'components/keyboard-shortcut';
2429
@import 'components/link';
2530
@import 'components/list-group'; // Dialtone 5 shim
31+
@import 'components/list-item-group';
2632
@import 'components/modal';
2733
@import 'components/notice';
2834
@import 'components/toast';

0 commit comments

Comments
 (0)