Skip to content

Commit

Permalink
feat: added t-shirt sizes to checkbox
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: a t-shirt size class is now required for checkbox.
closes #951
  • Loading branch information
@GarthDB @lazd
GarthDB authored and lazd committed Feb 2, 2021
1 parent 327e888 commit f4c59bd
Show file tree
Hide file tree
Showing 13 changed files with 429 additions and 332 deletions.
114 changes: 57 additions & 57 deletions components/actionbar/metadata/actionbar.yml
View file

Large diffs are not rendered by default.

18 changes: 9 additions & 9 deletions components/assetlist/metadata/assetlist.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ examples:
markup: |
<ul class="spectrum-AssetList">
<li class="spectrum-AssetList-item is-selectable" tabindex="0">
<label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" tabindex="-1">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark75" />
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
</label>
Expand All @@ -22,11 +22,11 @@ examples:
</svg>
</li>
<li class="spectrum-AssetList-item is-selectable" tabindex="0">
<label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" tabindex="-1">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark75" />
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
</label>
Expand All @@ -39,11 +39,11 @@ examples:
</svg>
</li>
<li class="spectrum-AssetList-item is-branch is-selectable is-selected" tabindex="0">
<label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" tabindex="-1" checked>
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark75" />
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
</label>
Expand Down
10 changes: 5 additions & 5 deletions components/card/metadata/card-asset.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,14 @@ examples:
</div>
</div>
<div class="spectrum-QuickActions spectrum-Card-quickActions">
<div class="spectrum-Checkbox">
<div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark75" />
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash75" />
<svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash100" />
</svg>
</span>
</div>
Expand Down
10 changes: 5 additions & 5 deletions components/card/metadata/card-gallery.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,14 @@ examples:
</div>
</div>
<div class="spectrum-QuickActions spectrum-Card-quickActions">
<div class="spectrum-Checkbox">
<div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark75" />
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash75" />
<svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash100" />
</svg>
</span>
</div>
Expand Down
80 changes: 40 additions & 40 deletions components/card/metadata/card.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,14 @@ examples:
Footer
</div>
<div class="spectrum-QuickActions spectrum-Card-quickActions">
<div class="spectrum-Checkbox">
<div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
<input type="checkbox" class="spectrum-Checkbox-input" aria-checked="false" title="Select" value="">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark75" />
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash75" />
<svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash100" />
</svg>
</span>
</div>
Expand Down Expand Up @@ -76,14 +76,14 @@ examples:
Footer
</div>
<div class="spectrum-QuickActions spectrum-Card-quickActions">
<div class="spectrum-Checkbox">
<div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" tabindex="-1">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark75" />
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash75" />
<svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash100" />
</svg>
</span>
</div>
Expand Down Expand Up @@ -121,14 +121,14 @@ examples:
</div>
</div>
<div class="spectrum-QuickActions spectrum-Card-quickActions">
<div class="spectrum-Checkbox">
<div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark75" />
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash75" />
<svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash100" />
</svg>
</span>
</div>
Expand Down Expand Up @@ -158,14 +158,14 @@ examples:
</div>
</div>
<div class="spectrum-QuickActions spectrum-Card-quickActions">
<div class="spectrum-Checkbox">
<div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark75" />
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash75" />
<svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash100" />
</svg>
</span>
</div>
Expand Down Expand Up @@ -195,14 +195,14 @@ examples:
</div>
</div>
<div class="spectrum-QuickActions spectrum-Card-quickActions">
<div class="spectrum-Checkbox">
<div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark75" />
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash75" />
<svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash100" />
</svg>
</span>
</div>
Expand All @@ -228,14 +228,14 @@ examples:
Footer
</div>
<div class="spectrum-QuickActions spectrum-Card-quickActions">
<div class="spectrum-Checkbox">
<div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark75" />
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash75" />
<svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash100" />
</svg>
</span>
</div>
Expand Down Expand Up @@ -292,14 +292,14 @@ examples:
</div>
</div>
<div class="spectrum-QuickActions spectrum-Card-quickActions">
<div class="spectrum-Checkbox">
<div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
<input type="checkbox" class="spectrum-Checkbox-input" aria-checked="false" title="Select" value="" tabindex="-1">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark75" />
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash75" />
<svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash100" />
</svg>
</span>
</div>
Expand Down Expand Up @@ -335,14 +335,14 @@ examples:
</div>
</div>
<div class="spectrum-QuickActions spectrum-Card-quickActions">
<div class="spectrum-Checkbox">
<div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" tabindex="-1">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark75" />
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash75" />
<svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Dash100" />
</svg>
</span>
</div>
Expand Down
54 changes: 37 additions & 17 deletions components/checkbox/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,6 @@ governing permissions and limitations under the License.
@import "../vars/css/scales/spectrum-medium.css";
@import "../vars/css/components/spectrum-checkbox.css";

.spectrum-Checkbox {
@remapvars {
find: /--spectrum-checkbox-m(.*)/;
filter: color;
replace: --spectrum-checkbox$1;
}

/* Hardcoded for wrapping study.
Will be a DNA token in https://jira.corp.adobe.com/browse/SDS-2984 */
--spectrum-checkbox-label-margin-top: var(--spectrum-global-dimension-size-75);
}

.spectrum-Checkbox {
display: inline-flex;
align-items: flex-start;
Expand Down Expand Up @@ -89,6 +77,38 @@ governing permissions and limitations under the License.
}
}

.spectrum-Checkbox--sizeS {
@remapvars {
find: /--spectrum-checkbox-s(.*)/;
filter: color;
replace: --spectrum-checkbox$1;
}
}

.spectrum-Checkbox--sizeM {
@remapvars {
find: /--spectrum-checkbox-m(.*)/;
filter: color;
replace: --spectrum-checkbox$1;
}
}

.spectrum-Checkbox--sizeL {
@remapvars {
find: /--spectrum-checkbox-l(.*)/;
filter: color;
replace: --spectrum-checkbox$1;
}
}

.spectrum-Checkbox--sizeXL {
@remapvars {
find: /--spectrum-checkbox-xl(.*)/;
filter: color;
replace: --spectrum-checkbox$1;
}
}

.spectrum-Checkbox.is-indeterminate {
.spectrum-Checkbox-box,
.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box {
Expand All @@ -112,7 +132,7 @@ governing permissions and limitations under the License.
.spectrum-Checkbox-label {
text-align: start;
margin-inline-start: var(--spectrum-checkbox-text-gap);
margin-block-start: var(--spectrum-checkbox-label-margin-top);
margin-block-start: var(--spectrum-checkbox-text-padding-top);

font-size: var(--spectrum-checkbox-text-size);
font-weight: var(--spectrum-checkbox-text-font-weight);
Expand Down Expand Up @@ -184,13 +204,13 @@ governing permissions and limitations under the License.
}

.spectrum-Checkbox-checkmark {
margin-block-start: calc(var(--spectrum-alias-ui-icon-checkmark-size-75) / -2);
margin-inline-start: calc(var(--spectrum-alias-ui-icon-checkmark-size-75) / -2);
margin-block-start: calc(var(--spectrum-checkbox-checkmark-size) / -2);
margin-inline-start: calc(var(--spectrum-checkbox-checkmark-size) / -2);
}

.spectrum-Checkbox-partialCheckmark {
margin-block-start: calc(var(--spectrum-alias-ui-icon-dash-size-75) / -2);
margin-inline-start: calc(var(--spectrum-alias-ui-icon-dash-size-75) / -2);
margin-block-start: calc(var(--spectrum-checkbox-checkmark-size) / -2);
margin-inline-start: calc(var(--spectrum-checkbox-checkmark-size) / -2);
}

.spectrum-Checkbox-partialCheckmark {
Expand Down
Loading

0 comments on commit f4c59bd

Please sign in to comment.