Pattern Library
Form Molecules
Crate ReNew Updates
APPROVED. Keir has approved. Dev implementation in progress.
- Toggle Switch is approved by Keir.
- Compound Quantity is approved by Keir.
- Button Group is approved by Keir.
Toggle Switch
The Code:
Notes/Usage
- Size of switch can be controlled just by overriding font-size on
.button-toggle. Default value is10px. This will scale the entire switch. - Code underneath is a
<button aria-pressed>for maximum cross-screen-reader support. Styling is based on state using aria-pressed value as hook. - Accessibility
- Color contrast ratios met for all states.
- Focus state styling included.
- Compatible with High Constrast Mode.
- Compatible with text-only zoom to at least 200%.
- All roles and states clearly communicated to screen readers.
- Keyboard-only compatible.
New Variables
$toggle-switch-track-background-color: #fff;
$toggle-switch-track-border-color: #666;
$toggle-switch-track-width: 4.4em;
$toggle-switch-track-height: 1.6em;
$toggle-switch-thumb-width: 2.4em;
$toggle-switch-thumb-height: 2.4em;
$toggle-switch-thumb-off-background-color: #ccc;
$toggle-switch-thumb-off-text-color: transparent;
$toggle-switch-thumb-off-border-color: #666;
$toggle-switch-thumb-off-border-width: .1em;
$toggle-switch-thumb-on-background-color: #222;
$toggle-switch-thumb-on-text-color: transparent;
$toggle-switch-thumb-on-border-color: #222;
$toggle-switch-thumb-on-border-width: 1.2em;
HTML
<button id="toggle-switch-example" type="button" aria-pressed="false" class="button-toggle" onclick="toggleSwitch();">
<span class="sr-only">Short Descriptive Name</span>
<span class="toggle-track"></span>
</button>
SCSS
.button-toggle {
box-sizing: border-box;
display: inline-block;
border: 0 !important; // !important to enforce in hcm
margin: 0;
padding: .4em;
background: transparent;
font-size: 10px;
position: relative;
.toggle-track {
box-sizing: border-box;
display: block;
border: solid .1em;
border-radius: 0.8em;
width: $toggle-switch-track-width;
height: $toggle-switch-track-height;
background: $toggle-switch-track-background-color;
color: $toggle-switch-track-border-color;
}
&:focus {
outline: 0;
.toggle-track {
&::before {
content: "";
box-sizing: border-box;
display: block;
border: inherit;
border-radius: 0.9em;
position: absolute;
top: .2em;
right: .2em;
bottom: .2em;
left: .2em;
}
}
}
&::before,
&::after {
content: "";
box-sizing: border-box;
display: block;
border-style: solid;
border-radius: 50%;
width: $toggle-switch-thumb-width;
height: $toggle-switch-thumb-height;
line-height: $toggle-switch-thumb-height;
text-align: center;
position: absolute;
top: 0;
transition: left .1825s ease-in-out;
z-index: 2;
}
&[aria-pressed="false"] {
&::before,
&::after {
border-color: $toggle-switch-thumb-off-border-color;
border-width: $toggle-switch-thumb-off-border-width;
background: $toggle-switch-thumb-off-background-color;
color: $toggle-switch-thumb-off-text-color;
left: -.1em;
}
&::after {
content: "Off";
}
}
&[aria-pressed="true"] {
&::before,
&::after {
border-color: $toggle-switch-thumb-on-border-color;
border-width: $toggle-switch-thumb-on-border-width;
background: $toggle-switch-thumb-on-background-color;
color: $toggle-switch-thumb-on-text-color;
left: calc((100% + .1em) - #{$toggle-switch-thumb-width});
}
&::after {
content: "On";
border-width: calc(.2em + #{$toggle-switch-thumb-off-border-width});
//line-height: calc(2px + #{$toggle-switch-thumb-height} - (2px + #{$toggle-switch-thumb-off-border-width}));
line-height: calc(#{$toggle-switch-thumb-height} - (.3em + #{$toggle-switch-thumb-off-border-width});
}
}
}
Compound Quantity
The Code:
Notes/Usage
- JavaScript is for demo only. Production code will be more nuanced and built in React.
- Accessibility
- Color contrast ratios met for all states.
- Focus state styling included.
- Compatible with High Constrast Mode.
- Compatible with text-only zoom to at least 200%.
- All roles and states clearly communicated to screen readers.
- Keyboard-only compatible.
HTML
<fieldset class="compound-quantity-fieldset">
<legend class="compund-quantity-legend">Product Name</legend>
<div class="compound-quantity">
<label for="input-quantity-unique-id" class="compound-quantity-label">
Quantity
</label>
<button type="button" class="button button-lg button-quantity button-quantity-decrease">
<svg class="svg-icon-minus" focusable="false" aria-hidden="true"><use xlink:href="#svg-icon-minus"></use></svg>
<span class="sr-only">Decrease</span>
</button>
<input id="input-quantity-unique-id" class="field-qty input-lg" type="number" value="1" />
<button type="button" class="button button-lg button-quantity button-quantity-increase">
<svg class="svg-icon-plus" focusable="false" aria-hidden="true"><use xlink:href="#svg-icon-plus"></use></svg>
<span class="sr-only">Increase</span>
</button>
</div>
</fieldset>
div.compound-quantity instead of fieldset.compound-quantity due to display bug in some browsers. See https://bugzilla.mozilla.org/show_bug.cgi?id=949476
Updated Mixin
@mixin mixin-field-element-qty {
padding-left: 5px;
padding-right: 5px;
text-align: center;
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
}
&.input-xl,
&.input-l {
font-size: 16px;
}
}
SCSS
.compound-quantity-fieldset {
.compound-quantity-legend {
@include sr-only;
}
.compound-quantity {
display: flex;
align-items: center;
margin-bttom: 8px;
.compound-quantity-label {
@include sr-only;
}
.button-quantity {
margin: 0;
}
}
[class*="svg-icon"] {
font-size: 10px;
width: 1.6em;
height: 1.6em;
max-width: 48px;
max-height: 48px;
margin: 8px;
padding: 2px;
color: inherit;
stroke-width: 4;
}
}
.button-quantity {
@include mixin-button-oneoff(
/* Quantity Control Buttons - Default */
$button-oneoff-border: #f0efed,
$button-oneoff-background: #f0efed,
$button-oneoff-color: #222,
/* Quantity Control Buttons - Hover */
$button-oneoff-border-hover: #f0efed,
$button-oneoff-background-hover: #f0efed,
$button-oneoff-color-hover: #222,
/* Quantity Control Buttons - Focus */
$button-oneoff-border-focus: #f0efed,
$button-oneoff-background-focus: #f0efed,
$button-oneoff-color-focus: #222,
$button-oneoff-ring-color-focus: #666,
$button-oneoff-box-shadow-focus: none,
/* Quantity Control Buttons - Disabled */
$button-oneoff-border-disabled: #ccc,
$button-oneoff-background-disabled: #fff,
$button-oneoff-color-disabled: #ccc,
$button-oneoff-ring-color-disabled-focus: #ccc
);
&.button {
padding: 0;
}
&.button-lg {
min-width: $button-lg-height;
}
letter-spacing: 0;
}