Skip to content

Commit 6c5cf96

Browse files
francisrupertfrancisrupert
committed
improve disabled state styling
1 parent 242a856 commit 6c5cf96

File tree

5 files changed

+99
-103
lines changed

5 files changed

+99
-103
lines changed

‎apps/dialtone-documentation/docs/components/button.md‎

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -190,41 +190,41 @@ showHtmlWarning />
190190

191191
### Disabled
192192

193-
Buttons can be disabled using either the `disabled` attribute or a Dialtone class. Use the attribute when a button should appear disabled and not recieve focus; use the class when a button should appear disabled but still recieve focus (i.e. a disabled button with a tooltip). Using the class also requires `aria-disabled` and a wrapper to display the "not allowed" pointer. Additional javascript implementation is required to prevent the click event.
194-
All button styles and variations appear the same when disabled.
193+
Buttons can be disabled using the `disabled` attribute or the Dialtone class, `d-btn--disabled`. Use the attribute when a button should appear disabled and not receive focus; use the class when a button should appear disabled but still receive focus (i.e. a disabled button with a tooltip).
194+
195+
When using the raw HTML intead of the Vue component , it requires `aria-disabled`, and additional javascript implementation is required to prevent events.
195196

196197
<code-well-header>
197-
<dt-stack
198-
gap="400"
199-
:direction="{ 'default': 'column', 'md': 'row' }"
200-
>
201-
<span>
202-
<dt-button disabled>Place Call (disabled attribute)</dt-button>
203-
</span>
204-
<span>
205-
<span class="d-c-not-allowed">
206-
<dt-button class="d-btn--disabled">Place Call (disabled class)</dt-button>
207-
</span>
208-
</span>
198+
<dt-stack gap="500">
199+
<dt-toggle v-model="isDisabled" size="sm" wrapperClass="d-g8 d-m-auto">Disabled</dt-toggle>
200+
<dt-stack gap="400" ref="disabledButtons">
201+
<dt-stack gap="400" :direction="{ 'default': 'column', 'md': 'row' }">
202+
<dt-button :disabled="isDisabled"> Place Call </dt-button>
203+
<dt-button :disabled="isDisabled" importance="outlined"> Place Call </dt-button>
204+
<dt-button :disabled="isDisabled" importance="clear"> Place Call </dt-button>
205+
</dt-stack>
206+
<dt-stack gap="400" :direction="{ 'default': 'column', 'md': 'row' }">
207+
<dt-button :disabled="isDisabled" kind="danger"> Place Call </dt-button>
208+
<dt-button :disabled="isDisabled" kind="danger" importance="outlined"> Place Call </dt-button>
209+
<dt-button :disabled="isDisabled" kind="danger" importance="clear"> Place Call </dt-button>
210+
</dt-stack>
211+
<dt-stack gap="400" :direction="{ 'default': 'column', 'md': 'row' }">
212+
<dt-button :disabled="isDisabled" kind="positive">Place Call</dt-button>
213+
<dt-button :disabled="isDisabled" kind="positive" importance="outlined">Place Call</dt-button>
214+
<dt-button :disabled="isDisabled" kind="positive" importance="clear">Place Call</dt-button>
215+
</dt-stack>
216+
<dt-stack gap="400" :direction="{ 'default': 'column', 'md': 'row' }">
217+
<dt-button :disabled="isDisabled" kind="muted" importance="clear"> Place Call </dt-button>
218+
<dt-button :disabled="isDisabled" kind="muted" importance="outlined"> Place Call </dt-button>
219+
</dt-stack>
220+
</dt-stack>
209221
</dt-stack>
210222
</code-well-header>
211223

212224
<code-example-tabs
213-
htmlCode='
214-
<!-- disabled attribute -->
215-
<button class="d-btn" type="button" disabled><span class="d-btn__label">...</span></button>
216-
<!-- disabled class -->
217-
<span class="d-c-not-allowed">
218-
<button type="button" class="base-button__button d-btn d-btn--primary d-btn--disabled"><span class="d-btn__label base-button__label">...</span></button>
219-
</span>
220-
'
225+
:htmlCode='() => $refs.disabledButtons'
221226
vueCode='
222-
<!-- disabled attribute -->
223-
<dt-button disabled>Place Call</dt-button>
224-
<!-- disabled class -->
225-
<span class="d-c-not-allowed">
226-
<dt-button class="d-btn--disabled">Place Call</dt-button>
227-
</span>
227+
<dt-button disabled {props}>Place Call</dt-button>
228228
'
229229
showHtmlWarning />
230230

@@ -1304,6 +1304,7 @@ We provide the following branded buttons for log-in and sign-up workflows.
13041304

13051305
<script setup>
13061306
import { ref } from 'vue';
1307+
const isDisabled = ref(true);
13071308
import ButtonVariantsTable from '@baseComponents/ButtonVariantsTable.vue';
13081309

13091310
const loading = ref(true);

‎packages/dialtone-css/lib/build/less/components/button.less‎

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -96,14 +96,14 @@
9696

9797
// -- STATES
9898
// ------------------------------------------------------------------------
99-
&:hover:not([disabled]) {
99+
&:hover:not(:disabled, .d-btn--disabled) {
100100
--button-color-text: var(--dt-action-color-foreground-base-hover);
101101
--button-color-background: var(--dt-action-color-background-base-hover);
102102
}
103103

104-
&:active:not([disabled]),
105-
&.d-btn--active:not([disabled]),
106-
&.d-btn--active:active:not([disabled]) {
104+
&:active:not(:disabled, .d-btn--disabled),
105+
&.d-btn--active:not(:disabled, .d-btn--disabled),
106+
&.d-btn--active:active:not(:disabled, .d-btn--disabled) {
107107
--button-color-text: var(--dt-action-color-foreground-base-active);
108108
--button-color-background: var(--dt-action-color-background-base-active);
109109
}
@@ -113,17 +113,30 @@
113113
box-shadow: var(--dt-shadow-focus);
114114
}
115115

116-
&[disabled] {
117-
--button-color-border: transparent !important;
118-
--button-color-text: var(
119-
--dt-action-color-foreground-disabled-default
120-
) !important;
121-
--button-color-background: var(
122-
--dt-action-color-background-disabled-default
123-
) !important;
116+
&--disabled,
117+
&:disabled {
118+
--chroma-adjust-text: .08;
119+
--chroma-adjust-background: .08;
120+
--chroma-adjust-border: .08;
121+
--opacity-adjust-text: 65%;
122+
--opacity-adjust-background: 65%;
123+
--opacity-adjust-border: 40%;
124124

125+
color: color-mix(in oklch, oklch( from var(--button-color-text) l calc(c - var(--chroma-adjust-text)) h ) var(--opacity-adjust-text), transparent);
126+
background-color: color-mix(in oklch, oklch( from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h ) var(--opacity-adjust-background), transparent);
127+
border-color: color-mix(in oklch, oklch( from var(--button-color-border) l calc(c - var(--chroma-adjust-border)) h ) var(--opacity-adjust-border), transparent);
125128
cursor: not-allowed;
126129
transition: none;
130+
pointer-events: none;
131+
132+
&.d-btn--primary {
133+
--opacity-adjust-text: 80%;
134+
}
135+
136+
&.d-btn--muted {
137+
--opacity-adjust-text: 50%;
138+
--opacity-adjust-border: 50%;
139+
}
127140
}
128141
}
129142

@@ -246,14 +259,14 @@
246259
--button-color-text: var(--dt-action-color-foreground-muted-default);
247260
--button-border-radius: var(--dt-size-radius-circle);
248261

249-
&:hover:not([disabled]) {
262+
&:hover:not(:disabled, .d-btn--disabled) {
250263
--button-color-text: var(--dt-action-color-foreground-muted-hover);
251264
--button-color-background: var(--dt-action-color-background-muted-hover);
252265
}
253266

254-
&:active:not([disabled]),
255-
&.d-btn--active:not([disabled]),
256-
&.d-btn--active:active:not([disabled]) {
267+
&:active:not(:disabled, .d-btn--disabled),
268+
&.d-btn--active:not(:disabled, .d-btn--disabled),
269+
&.d-btn--active:active:not(:disabled, .d-btn--disabled) {
257270
--button-color-text: var(--dt-action-color-foreground-muted-active);
258271
--button-color-background: var(--dt-action-color-background-muted-active);
259272
}
@@ -311,16 +324,16 @@
311324
--dt-action-color-background-base-primary-default
312325
);
313326

314-
&:hover:not([disabled]) {
327+
&:hover:not(:disabled, .d-btn--disabled) {
315328
--button-color-text: var(--dt-action-color-foreground-base-primary-default);
316329
--button-color-background: var(
317330
--dt-action-color-background-base-primary-hover
318331
);
319332
}
320333

321-
&:active:not([disabled]),
322-
&.d-btn--active:not([disabled]),
323-
&.d-btn--active:active:not([disabled]) {
334+
&:active:not(:disabled, .d-btn--disabled),
335+
&.d-btn--active:not(:disabled, .d-btn--disabled),
336+
&.d-btn--active:active:not(:disabled, .d-btn--disabled) {
324337
--button-color-text: var(--dt-action-color-foreground-base-primary-default);
325338
--button-color-background: var(
326339
--dt-action-color-background-base-primary-active
@@ -333,14 +346,14 @@
333346
.d-btn--muted {
334347
--button-color-text: var(--dt-action-color-foreground-muted-default);
335348

336-
&:hover:not([disabled]) {
349+
&:hover:not(:disabled, .d-btn--disabled) {
337350
--button-color-text: var(--dt-action-color-foreground-muted-hover);
338351
--button-color-background: var(--dt-action-color-background-muted-hover);
339352
}
340353

341-
&:active:not([disabled]),
342-
&.d-btn--active:not([disabled]),
343-
&.d-btn--active:active:not([disabled]) {
354+
&:active:not(:disabled, .d-btn--disabled),
355+
&.d-btn--active:not(:disabled, .d-btn--disabled),
356+
&.d-btn--active:active:not(:disabled, .d-btn--disabled) {
344357
--button-color-text: var(--dt-action-color-foreground-muted-active);
345358
--button-color-background: var(--dt-action-color-background-muted-active);
346359
}
@@ -356,14 +369,14 @@
356369
--button-color-text: var(--dt-action-color-foreground-critical-default);
357370
--button-color-background: var(--dt-action-color-background-critical-default);
358371

359-
&:hover:not([disabled]) {
372+
&:hover:not(:disabled, .d-btn--disabled) {
360373
--button-color-text: var(--dt-action-color-foreground-critical-hover);
361374
--button-color-background: var(--dt-action-color-background-critical-hover);
362375
}
363376

364-
&:active:not([disabled]),
365-
&.d-btn--active:not([disabled]),
366-
&.d-btn--active:active:not([disabled]) {
377+
&:active:not(:disabled, .d-btn--disabled),
378+
&.d-btn--active:not(:disabled, .d-btn--disabled),
379+
&.d-btn--active:active:not(:disabled, .d-btn--disabled) {
367380
--button-color-text: var(--dt-action-color-foreground-critical-active);
368381
--button-color-background: var(
369382
--dt-action-color-background-critical-active
@@ -384,7 +397,7 @@
384397
--dt-action-color-background-critical-primary-default
385398
);
386399

387-
&:hover:not([disabled]) {
400+
&:hover:not(:disabled, .d-btn--disabled) {
388401
--button-color-text: var(
389402
--dt-action-color-foreground-critical-primary-default
390403
);
@@ -393,9 +406,9 @@
393406
);
394407
}
395408

396-
&:active:not([disabled]),
397-
&.d-btn--active:not([disabled]),
398-
&.d-btn--active:active:not([disabled]) {
409+
&:active:not(:disabled, .d-btn--disabled),
410+
&.d-btn--active:not(:disabled, .d-btn--disabled),
411+
&.d-btn--active:active:not(:disabled, .d-btn--disabled) {
399412
--button-color-text: var(
400413
--dt-action-color-foreground-critical-primary-default
401414
);
@@ -412,14 +425,14 @@
412425
--button-color-text: var(--dt-action-color-foreground-positive-default);
413426
--button-color-background: var(--dt-action-color-background-positive-default);
414427

415-
&:hover:not([disabled]) {
428+
&:hover:not(:disabled, .d-btn--disabled) {
416429
--button-color-text: var(--dt-action-color-foreground-positive-hover);
417430
--button-color-background: var(--dt-action-color-background-positive-hover);
418431
}
419432

420-
&:active:not([disabled]),
421-
&.d-btn--active:not([disabled]),
422-
&.d-btn--active:active:not([disabled]) {
433+
&:active:not(:disabled, .d-btn--disabled),
434+
&.d-btn--active:not(:disabled, .d-btn--disabled),
435+
&.d-btn--active:active:not(:disabled, .d-btn--disabled) {
423436
--button-color-text: var(--dt-action-color-foreground-positive-active);
424437
--button-color-background: var(
425438
--dt-action-color-background-positive-active
@@ -440,7 +453,7 @@
440453
--dt-action-color-background-positive-primary-default
441454
);
442455

443-
&:hover:not([disabled]) {
456+
&:hover:not(:disabled, .d-btn--disabled) {
444457
--button-color-text: var(
445458
--dt-action-color-foreground-positive-primary-default
446459
);
@@ -449,9 +462,9 @@
449462
);
450463
}
451464

452-
&:active:not([disabled]),
453-
&.d-btn--active:not([disabled]),
454-
&.d-btn--active:active:not([disabled]) {
465+
&:active:not(:disabled, .d-btn--disabled),
466+
&.d-btn--active:not(:disabled, .d-btn--disabled),
467+
&.d-btn--active:active:not(:disabled, .d-btn--disabled) {
455468
--button-color-text: var(
456469
--dt-action-color-foreground-positive-primary-default
457470
);
@@ -469,14 +482,14 @@
469482
--button-color-text: var(--dt-action-color-foreground-inverted-default);
470483
--button-color-background: var(--dt-action-color-background-inverted-default);
471484

472-
&:hover:not([disabled]) {
485+
&:hover:not(:disabled, .d-btn--disabled) {
473486
--button-color-text: var(--dt-action-color-foreground-inverted-hover);
474487
--button-color-background: var(--dt-action-color-background-inverted-hover);
475488
}
476489

477-
&:active:not([disabled]),
478-
&.d-btn--active:not([disabled]),
479-
&.d-btn--active:active:not([disabled]) {
490+
&:active:not(:disabled, .d-btn--disabled),
491+
&.d-btn--active:not(:disabled, .d-btn--disabled),
492+
&.d-btn--active:active:not(:disabled, .d-btn--disabled) {
480493
--button-color-text: var(--dt-action-color-foreground-inverted-active);
481494
--button-color-background: var(
482495
--dt-action-color-background-inverted-active
@@ -499,7 +512,7 @@
499512
--dt-action-color-background-inverted-primary-default
500513
);
501514

502-
&:hover:not([disabled]) {
515+
&:hover:not(:disabled, .d-btn--disabled) {
503516
--button-color-text: var(
504517
--dt-action-color-foreground-inverted-primary-hover
505518
);
@@ -508,9 +521,9 @@
508521
);
509522
}
510523

511-
&:active:not([disabled]),
512-
&.d-btn--active:not([disabled]),
513-
&.d-btn--active:active:not([disabled]) {
524+
&:active:not(:disabled, .d-btn--disabled),
525+
&.d-btn--active:not(:disabled, .d-btn--disabled),
526+
&.d-btn--active:active:not(:disabled, .d-btn--disabled) {
514527
--button-color-text: var(
515528
--dt-action-color-foreground-inverted-primary-active
516529
);
@@ -597,19 +610,6 @@
597610

598611
// $$ DISABLED STATE
599612
// ----------------------------------------------------------------------------
600-
.d-btn--disabled {
601-
--button-color-text: var(
602-
--dt-action-color-foreground-disabled-default
603-
) !important;
604-
--button-color-background: var(
605-
--dt-action-color-background-disabled-default
606-
) !important;
607-
--button-color-border: transparent !important;
608-
609-
cursor: not-allowed;
610-
transition: none;
611-
pointer-events: none;
612-
}
613613

614614
// $$ BRAND BUTTONS
615615
// ----------------------------------------------------------------------------
@@ -621,8 +621,8 @@
621621

622622
display: flex;
623623

624-
&:hover:not([disabled]),
625-
&:active:not([disabled]) {
624+
&:hover:not(:disabled, .d-btn--disabled),
625+
&:active:not(:disabled, .d-btn--disabled) {
626626
--button-color-text: hsl(var(--dt-color-neutral-white-hsl) ~" / " 90%);
627627
--button-color-background: hsl(
628628
var(--brand-color-h) calc(var(--brand-color-s) + 2.5%)
@@ -639,7 +639,7 @@
639639
);
640640
}
641641

642-
&:active:not([disabled]) {
642+
&:active:not(:disabled, .d-btn--disabled) {
643643
--button-color-background: hsl(
644644
var(--brand-color-h) calc(var(--brand-color-s) + 5%)
645645
calc(var(--brand-color-l) - 10%)

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,13 +99,13 @@
9999
content: '';
100100
}
101101

102-
&:hover:not([disabled]) {
102+
&:hover:not(:disabled, .d-btn--disabled) {
103103
--button-color-background: var(--dt-action-color-background-muted-hover);
104104
}
105105

106-
&:active:not([disabled]),
107-
&.d-btn--active:not([disabled]),
108-
&.d-btn--active:active:not([disabled]) {
106+
&:active:not(:disabled, .d-btn--disabled),
107+
&.d-btn--active:not(:disabled, .d-btn--disabled),
108+
&.d-btn--active:active:not(:disabled, .d-btn--disabled) {
109109
--button-color-background: var(--dt-action-color-background-muted-active);
110110
}
111111
}

‎packages/dialtone-css/lib/build/less/components/pagination.less‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,6 @@
2525
.d-pagination__button {
2626
padding-right: var(--dt-space-400);
2727
padding-left: var(--dt-space-400);
28-
29-
&:disabled {
30-
color: var(--dt-color-foreground-secondary-inverted);
31-
background-color: var(--dt-color-neutral-transparent);
32-
}
3328
}
3429

3530
// ============================================================================

0 commit comments

Comments
 (0)