Skip to content

Commit 20b5917

Browse files
Yosevu KilonzopfultonGarthDB
authored
feat(checkbox)!: migrate checkbox component to core tokens (CSS-99) (#1465)
BREAKING CHANGE: migrates Checkbox to core tokens Co-authored-by: Patrick Fulton <pfulton@adobe.com> Co-authored-by: Garth Braithwaite <garthdb@gmail.com>
1 parent 3cd4118 commit 20b5917

File tree

8 files changed

+643
-482
lines changed

8 files changed

+643
-482
lines changed

‎components/checkbox/gulpfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require('@spectrum-css/component-builder');
1+
module.exports = require('@spectrum-css/component-builder-simple');

‎components/checkbox/index.css

Lines changed: 474 additions & 99 deletions
Large diffs are not rendered by default.

‎components/checkbox/metadata/checkbox.yml

Lines changed: 103 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
name: Checkbox
22
status: Verified
33
SpectrumSiteSlug: https://spectrum.adobe.com/page/checkbox/
4-
description:
5-
Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.
4+
description: |
5+
- Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.
6+
- Checkboxes should not be used on their own, they should always be used within a [FieldGroup](fieldgroup.html).
7+
- Invalid checkboxes are indicated with an alert [HelpText](helptext.html) when included in a Fieldgroup.
68
7-
Checkboxes should not be used on their own, they should always be used within a [FieldGroup](fieldgroup.html).
89
sections:
910
- name: Migration Guide
1011
description: |
@@ -407,6 +408,53 @@ examples:
407408
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
408409
409410
<label class="spectrum-Checkbox spectrum-Checkbox--sizeS">
411+
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
412+
<span class="spectrum-Checkbox-box">
413+
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark50 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
414+
<use xlink:href="#spectrum-css-icon-Checkmark50" />
415+
</svg>
416+
<svg class="spectrum-Icon spectrum-UIIcon-Dash50 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
417+
<use xlink:href="#spectrum-css-icon-Dash50" />
418+
</svg>
419+
</span>
420+
<span class="spectrum-Checkbox-label">Checkbox</span>
421+
</label>
422+
423+
<br/>
424+
425+
<label class="spectrum-Checkbox spectrum-Checkbox--sizeS">
426+
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
427+
<span class="spectrum-Checkbox-box">
428+
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark50 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
429+
<use xlink:href="#spectrum-css-icon-Checkmark50" />
430+
</svg>
431+
<svg class="spectrum-Icon spectrum-UIIcon-Dash50 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
432+
<use xlink:href="#spectrum-css-icon-Dash50" />
433+
</svg>
434+
</span>
435+
<span class="spectrum-Checkbox-label">Checkbox</span>
436+
</label>
437+
438+
<br />
439+
440+
<label class="spectrum-Checkbox spectrum-Checkbox--sizeS is-indeterminate">
441+
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
442+
<span class="spectrum-Checkbox-box">
443+
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark50 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
444+
<use xlink:href="#spectrum-css-icon-Checkmark50" />
445+
</svg>
446+
<svg class="spectrum-Icon spectrum-UIIcon-Dash50 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
447+
<use xlink:href="#spectrum-css-icon-Dash50" />
448+
</svg>
449+
</span>
450+
<span class="spectrum-Checkbox-label">Checkbox</span>
451+
</label>
452+
453+
</div>
454+
<div class="spectrum-Examples-item">
455+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
456+
457+
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
410458
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
411459
<span class="spectrum-Checkbox-box">
412460
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -418,8 +466,25 @@ examples:
418466
</span>
419467
<span class="spectrum-Checkbox-label">Checkbox</span>
420468
</label>
469+
421470
<br/>
422-
<label class="spectrum-Checkbox spectrum-Checkbox--sizeS">
471+
472+
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
473+
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
474+
<span class="spectrum-Checkbox-box">
475+
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
476+
<use xlink:href="#spectrum-css-icon-Checkmark75" />
477+
</svg>
478+
<svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
479+
<use xlink:href="#spectrum-css-icon-Dash75" />
480+
</svg>
481+
</span>
482+
<span class="spectrum-Checkbox-label">Checkbox</span>
483+
</label>
484+
485+
<br/>
486+
487+
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
423488
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
424489
<span class="spectrum-Checkbox-box">
425490
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -433,10 +498,11 @@ examples:
433498
</label>
434499
435500
</div>
501+
436502
<div class="spectrum-Examples-item">
437-
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
503+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
438504
439-
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
505+
<label class="spectrum-Checkbox spectrum-Checkbox--sizeL">
440506
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
441507
<span class="spectrum-Checkbox-box">
442508
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -448,8 +514,25 @@ examples:
448514
</span>
449515
<span class="spectrum-Checkbox-label">Checkbox</span>
450516
</label>
517+
451518
<br/>
452-
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
519+
520+
<label class="spectrum-Checkbox spectrum-Checkbox--sizeL">
521+
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
522+
<span class="spectrum-Checkbox-box">
523+
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
524+
<use xlink:href="#spectrum-css-icon-Checkmark100" />
525+
</svg>
526+
<svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
527+
<use xlink:href="#spectrum-css-icon-Dash100" />
528+
</svg>
529+
</span>
530+
<span class="spectrum-Checkbox-label">Checkbox</span>
531+
</label>
532+
533+
<br />
534+
535+
<label class="spectrum-Checkbox spectrum-Checkbox--sizeL is-indeterminate">
453536
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
454537
<span class="spectrum-Checkbox-box">
455538
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -462,12 +545,14 @@ examples:
462545
<span class="spectrum-Checkbox-label">Checkbox</span>
463546
</label>
464547
548+
549+
465550
</div>
466551
467552
<div class="spectrum-Examples-item">
468-
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
553+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
469554
470-
<label class="spectrum-Checkbox spectrum-Checkbox--sizeL">
555+
<label class="spectrum-Checkbox spectrum-Checkbox--sizeXL">
471556
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
472557
<span class="spectrum-Checkbox-box">
473558
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark200 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -479,8 +564,10 @@ examples:
479564
</span>
480565
<span class="spectrum-Checkbox-label">Checkbox</span>
481566
</label>
567+
482568
<br/>
483-
<label class="spectrum-Checkbox spectrum-Checkbox--sizeL">
569+
570+
<label class="spectrum-Checkbox spectrum-Checkbox--sizeXL">
484571
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
485572
<span class="spectrum-Checkbox-box">
486573
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark200 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -493,32 +580,16 @@ examples:
493580
<span class="spectrum-Checkbox-label">Checkbox</span>
494581
</label>
495582
496-
</div>
497-
498-
<div class="spectrum-Examples-item">
499-
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
500-
501-
<label class="spectrum-Checkbox spectrum-Checkbox--sizeXL">
502-
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
503-
<span class="spectrum-Checkbox-box">
504-
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark300 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
505-
<use xlink:href="#spectrum-css-icon-Checkmark300" />
506-
</svg>
507-
<svg class="spectrum-Icon spectrum-UIIcon-Dash300 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
508-
<use xlink:href="#spectrum-css-icon-Dash300" />
509-
</svg>
510-
</span>
511-
<span class="spectrum-Checkbox-label">Checkbox</span>
512-
</label>
513583
<br/>
514-
<label class="spectrum-Checkbox spectrum-Checkbox--sizeXL">
584+
585+
<label class="spectrum-Checkbox spectrum-Checkbox--sizeXL is-indeterminate">
515586
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
516587
<span class="spectrum-Checkbox-box">
517-
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark300 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
518-
<use xlink:href="#spectrum-css-icon-Checkmark300" />
588+
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark200 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
589+
<use xlink:href="#spectrum-css-icon-Checkmark200" />
519590
</svg>
520-
<svg class="spectrum-Icon spectrum-UIIcon-Dash300 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
521-
<use xlink:href="#spectrum-css-icon-Dash300" />
591+
<svg class="spectrum-Icon spectrum-UIIcon-Dash200 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
592+
<use xlink:href="#spectrum-css-icon-Dash200" />
522593
</svg>
523594
</span>
524595
<span class="spectrum-Checkbox-label">Checkbox</span>

‎components/checkbox/package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@spectrum-css/checkbox",
3-
"version": "3.1.3",
3+
"version": "4.0.0-beta.4",
44
"description": "The Spectrum CSS checkbox component",
55
"license": "Apache-2.0",
66
"main": "dist/index-vars.css",
@@ -16,17 +16,17 @@
1616
"build": "gulp"
1717
},
1818
"peerDependencies": {
19-
"@spectrum-css/icon": "^3.0.21",
20-
"@spectrum-css/vars": "^8.0.0"
19+
"@spectrum-css/icon": "^3.0.23",
20+
"@spectrum-css/tokens": "^3.0.0"
2121
},
2222
"devDependencies": {
23-
"@spectrum-css/component-builder": "^3.2.0",
23+
"@spectrum-css/component-builder-simple": "^1.0.0-beta",
2424
"@spectrum-css/icon": "^3.0.23",
25-
"@spectrum-css/vars": "^8.0.0",
25+
"@spectrum-css/tokens": "^3.0.0",
2626
"gulp": "^4.0.0"
2727
},
2828
"publishConfig": {
2929
"access": "public"
3030
},
3131
"homepage": "https://opensource.adobe.com/spectrum-css/"
32-
}
32+
}

0 commit comments

Comments
 (0)