Skip to content

Commit

Permalink
feat: updating form element states to match wires (fixes #240) (#288)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jhung
jhung committed Apr 16, 2020
1 parent 1a4a8d7 commit 4f20709
Show file tree
Hide file tree
Showing 31 changed files with 581 additions and 461 deletions.
10 changes: 6 additions & 4 deletions src/assets/scripts/Pinecone/NestedCheckbox/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,18 @@ class NestedCheckbox {
initCustomCheckbox() {
const status = this.getCustomState();
const supplementaryLabel = this.container.querySelector( 'span.supplementary-label' );
supplementaryLabel.parentNode.removeChild( supplementaryLabel );
const customCheckbox = document.createElement( 'div' );
customCheckbox.classList.add( 'checkbox' );
customCheckbox.setAttribute( 'role', 'checkbox' );
customCheckbox.setAttribute( 'aria-checked', status );
customCheckbox.setAttribute( 'tabindex', 0 );
customCheckbox.textContent = this.label.innerText;
customCheckbox.appendChild( supplementaryLabel );
supplementaryLabel.classList.add( 'screen-reader-text' );
supplementaryLabel.hidden = false;
if ( supplementaryLabel ) {
supplementaryLabel.parentNode.removeChild( supplementaryLabel );
customCheckbox.appendChild( supplementaryLabel );
supplementaryLabel.classList.add( 'screen-reader-text' );
supplementaryLabel.hidden = false;
}
this.input.parentNode.insertBefore( customCheckbox, this.input );
this.input.classList.add( 'screen-reader-text' );
this.input.setAttribute( 'aria-hidden', 'true' );
Expand Down
195 changes: 132 additions & 63 deletions src/assets/styles/components/_button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,67 +27,108 @@ button:-moz-focusring {

.button--inverse {
--color: var(--blue-500);
--outline-color: var(--blue-500);
--background-color: var(--off-white);
--hover-color: var(--color);

--active-background-color: var(--blue-500);
--active-color: var(--off-white);

--disabled-background-color: var(--grey-200);
--disabled-border-color: var(--grey-200);
--disabled-color: var(--grey-400);

--focus-background-color: var(--off-white);
--focus-border-color: var(--off-white);
--focus-color: var(--blue-500);

--hover-background-color: var(--blue-50);
--active-color: var(--blue-400);
--active-background-color: var(--background-color);
--focus-background-color: var(--background-color);
--focus-color: var(--color);
--hover-color: var(--color);
}

.button--secondary {
--color: var(--blue-500);
--outline-color: var(--blue-500);
--outline-width: #{rem(2)};
--border-color: var(--outline-color);
--border-width: #{rem(1)};
--background-color: var(--white);
--hover-color: var(--blue-500);
--border-color: var(--blue-500);

--active-border-color: transparent;
--active-background-color: var(--blue-500);
--active-color: var(--off-white);

--hover-background-color: var(--grey-200);
--active-color: var(--blue-400);
--active-background-color: var(--background-color);
--hover-color: var(--blue-500);

--disabled-background-color: var(--grey-200);
--disabled-border-color: var(--grey-200);
--disabled-color: var(--grey-400);

--focus-background-color: var(--off-white);
--focus-border-color: var(--blue-500);
--focus-color: var(--blue-500);
--focus-background-color: var(--hover-background-color);
--focus-box-shadow:
0 0 0 var(--outline-width) var(--focus-background-color, var(--off-white)),
0 0 0 calc(2 * var(--outline-width)) var(--outline-color, var(--blue-700));

&:focus {
border-width: var(--outline-width);
border-color: transparent;
}
}

.button--secondary.button--inverse {
--color: var(--off-white);
--outline-color: var(--off-white);
--background-color: var(--blue-500);
--hover-color: var(--blue-50);
--hover-background-color: var(--blue-500);
--active-color: var(--white);
--active-background-color: var(--background-color);
--border-color: var(--off-white);

--active-background-color: var(--off-white);
--active-color: var(--blue-500);

--disabled-background-color: var(--parent-background-color);
--disabled-border-color: var(--grey-400);
--disabled-color: var(--grey-400);

--focus-background-color: var(--blue-500);
--focus-border-color: var(--off-white);
--focus-color: var(--off-white);
--focus-background-color: var(--background-color);

--hover-border-color: var(--blue-50);
--hover-color: var(--blue-50);
--hover-background-color: var(--blue-700);
}

.button--borderless {
--color: var(--blue-500);
--outline-color: var(--dark-mint-500);
--background-color: transparent;
--border-width: #{rem(2)};
--hover-background-color: var(--off-white);
--hover-color: var(--blue-600);
--active-background-color: var(--grey-200);
--active-color: var(--blue-500);
--focus-color: var(--dark-mint-500);
--focus-background-color: var(--grey-200);
--focus-box-shadow: 0 0 0 var(--border-width) var(--outline-color), 0 0 0 calc(2 * var(--border-width)) var(--parent-background-color), 0 0 0 calc(3 * var(--border-width)) var(--outline-color);

--active-background-color: var(--blue-500);
--active-color: var(--off-white);

--disabled-background-color: var(--parent-background-color);
--disabled-color: var(--grey-400);

--focus-background-color: inherit;
--focus-border-color: var(--color);
--focus-color: var(--blue-500);

--hover-background-color: var(--grey-200);
--hover-color: var(--dark-mint-500);

margin: rem(6) rem(24) rem(6) rem(-8);
min-height: rem(28);
padding: 0 rem(4);
padding: rem(4) rem(6);
width: auto;

&:disabled {
border-color: var(--parent-background-color);
}

&:focus {
border: solid var(--border-width) transparent;
}
}

.button[disabled] {
background-color: var(--disabled-background-color);
color: var(--disabled-color);

&:active,
&:focus {
box-shadow: none;
}
}

.align-right .button--borderless {
Expand All @@ -97,35 +138,49 @@ button:-moz-focusring {

.button--borderless.button--inverse {
--color: var(--off-white);
--outline-color: var(--off-white);
--hover-background-color: var(--blue-600);
--hover-color: var(--blue-50);
--active-background-color: var(--blue-600);
--active-color: var(--blue-200);
--focus-color: var(--off-white);

--active-color: var(--blue-600);
--active-background-color: var(--off-white);

--focus-background-color: transparent;
--focus-box-shadow: 0 0 0 var(--border-width) var(--dark-mint-500), 0 0 0 calc(2 * var(--border-width)) var(--outline-color);
--focus-box-shadow: 0 0 0 var(--border-width) var(--outline-color), 0 0 0 calc(2 * var(--border-width)) var(--parent-background-color), 0 0 0 calc(3 * var(--border-width)) var(--outline-color);
--focus-color: var(--off-white);

--hover-background-color: var(--blue-600);
--hover-color: var(--off-white);
}

.button--borderless.button--destructive {
--color: var(--red-500);
--outline-color: var(--red-500);
--hover-color: var(--dark-mint-500);
--focus-color: var(--red-500);
--active-color: var(--white);

--active-background-color: var(--red-500);
--active-color: var(--white);

--focus-color: var(--red-500);

--hover-color: var(--dark-mint-500);
}

.button--borderless.button--destructive.button--inverse {
// TODO.
--color: var(--red-200);

--active-background-color: var(--red-200);
--active-color: var(--blue-600);

--focus-border-color: var(--red-200);
--focus-color: var(--red-200);

--hover-color: var(--red-200);
--hover-background-color: var(--blue-600);
}

.button--tag-button {
--outline-color: var(--white);
--active-background-color: var(--blue-400);
--active-border-color: var(--border-color);
--active-color: var(--off-white);
--active-background-color: var(--off-white);
--active-color: var(--blue-700);

--focus-border-color: var(--blue-700);
--focus-background-color: var(--blue-700);

--hover-background-color: var(--blue-700);

border-radius: rem(15);
font-family: $font-family-sans;
Expand All @@ -142,18 +197,22 @@ button:-moz-focusring {

.button--disc {
--color: var(--blue-500);
--outline-color: var(--blue-500);
--background-color: var(--blue-50);

--active-border-color: transparent;
--active-background-color: var(--blue-500);
--active-color: var(--blue-50);

--disabled-background-color: var(--grey-200);
--disabled-border-color: var(--parent-background-color);
--disabled-color: var(--grey-400);

--focus-background-color: var(--background-color);
--focus-border-color: var(--color);
--focus-color: var(--color);

--hover-background-color: var(--blue-150);
--hover-color: var(--color);
--active-background-color: var(--blue-100);
--active-color: var(--color);
--focus-color: var(--color);
--focus-background-color: var(--background-color);
--focus-box-shadow:
0 0 0 var(--border-width) var(--outline-color),
0 0 0 calc(2 * var(--border-width)) var(--focus-background-color),
0 0 0 calc(3 * var(--border-width)) var(--outline-color);

align-items: center;
border-radius: 50%;
Expand All @@ -171,12 +230,22 @@ button:-moz-focusring {
svg {
margin-bottom: 0;
}

&:focus {
border: none;
}
}

.button--disc.button--inverse {
--color: var(--off-white);
--background-color: #{var(--blue-700)};
--outline-color: var(--off-white);
--background-color: var(--blue-700);

--active-background-color: var(--off-white);
--active-color: var(--blue-700);

--disabled-color: var(--blue-700);
--disabled-background-color: var(--blue-500);
--disabled-border-color: var(--blue-700);

--hover-background-color: var(--black);
--active-background-color: var(--blue-400);
}

0 comments on commit 4f20709

Please sign in to comment.