Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(checkbox): match MD spec #16186

Merged
merged 7 commits into from
Nov 1, 2018
Merged

fix(checkbox): match MD spec #16186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
63c83d6
fix(checkbox): prevent transition inheritance
camwiegert Nov 1, 2018
3b4e8b0
fix(checkbox): use SVG for checkbox icon
camwiegert Nov 1, 2018
84024c5
fix(checkbox): match MD spec size
camwiegert Nov 1, 2018
3c3ae3e
refactor(checkbox): use height/width custom props over size
camwiegert Nov 1, 2018
71d3314
fix(checkbox): match MD spec off state border color
camwiegert Nov 1, 2018
86b3840
feat(checkbox): animate check path for MD
camwiegert Nov 1, 2018
b3f1b46
Merge branch 'master' into checkbox-md-updates-v2
camwiegert Nov 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 2 additions & 20 deletions core/src/components/checkbox/checkbox.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
// --------------------------------------------------

:host {
--size: #{$checkbox-ios-icon-size};
--height: #{$checkbox-ios-icon-size};
--width: #{$checkbox-ios-icon-size};

// Border
--border-radius: #{$checkbox-ios-icon-border-radius};
Expand All @@ -17,25 +18,6 @@
--background: #{$checkbox-ios-background-color-off};
}

// iOS Checkbox Inner Checkmark: Checked
// -----------------------------------------

.checkbox-inner {
@include position(calc(var(--size) / 6), null, null, calc(var(--size) / 2.5 - 1px));

position: absolute;

width: calc(var(--size) / 6 + 1px);
height: calc(var(--size) / 2);

transform: rotate(45deg);

border-width: $checkbox-ios-checkmark-border-width;
border-top-width: 0;
border-left-width: 0;
border-style: $checkbox-ios-checkmark-border-style;
}


// iOS Checkbox: Disabled
// -----------------------------------------
Expand Down
27 changes: 11 additions & 16 deletions core/src/components/checkbox/checkbox.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@
// --------------------------------------------------

:host {
--size: #{$checkbox-md-icon-size};
--height: #{$checkbox-md-icon-size};
--width: #{$checkbox-md-icon-size};

// Border
--border-radius: calc(var(--size) * .125);
--border-radius: calc(var(--height) * .125);
--border-width: #{$checkbox-md-icon-border-width};
--border-style: #{$checkbox-md-icon-border-style};
--border-color: #{$checkbox-md-icon-border-color-off};
Expand All @@ -18,23 +19,17 @@
--transition: #{background $checkbox-md-transition-duration $checkbox-md-transition-easing};
}

// Material Design Checkbox Inner Checkmark: Checked
// -----------------------------------------

:host(.checkbox-checked) .checkbox-inner {
@include position(calc(var(--size) * .05), null, null, calc(var(--size) * .3));

position: absolute;

width: calc(var(--size) * .3125);
height: calc(var(--size) * .625);
.checkbox-icon path {
stroke-dasharray: 30;
stroke-dashoffset: 30;
stroke-width: 3;
}

transform: rotate(45deg);
:host(.checkbox-checked) .checkbox-icon path {
stroke-dashoffset: 0;

border-width: calc(var(--size) * .125);
border-top-width: 0;
border-left-width: 0;
border-style: $checkbox-md-icon-checkmark-style;
transition: stroke-dashoffset 90ms linear 90ms;
}


Expand Down
6 changes: 3 additions & 3 deletions core/src/components/checkbox/checkbox.md.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ $checkbox-md-background-color-focused: ion-color(primary, tint) !default;
$checkbox-md-icon-background-color-on: ion-color(primary, base) !default;

/// @prop - Size of the checkbox icon
$checkbox-md-icon-size: 16px !default;
$checkbox-md-icon-size: 14px !default;

/// @prop - Width of the checkbox icon checkmark
$checkbox-md-icon-checkmark-width: 2px !default;
Expand All @@ -38,13 +38,13 @@ $checkbox-md-icon-border-style: solid !default;
$checkbox-md-icon-border-radius: 2px !default;

/// @prop - Border color of the checkbox icon when off
$checkbox-md-icon-border-color-off: $border-md-color !default;
$checkbox-md-icon-border-color-off: rgba(0, 0, 0, .54) !default;

/// @prop - Border color of the checkbox icon when on
$checkbox-md-icon-border-color-on: ion-color(primary, base) !default;

/// @prop - Transition duration of the checkbox
$checkbox-md-transition-duration: 280ms !default;
$checkbox-md-transition-duration: 180ms !default;

/// @prop - Transition easing of the checkbox
$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
Expand Down
18 changes: 11 additions & 7 deletions core/src/components/checkbox/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,17 @@
* @prop --border-radius: Border radius of the checkbox icon
* @prop --border-width: Border width of the checkbox icon
* @prop --border-style: Border style of the checkbox icon
* @prop --size: Size of the checkbox icon
* @prop --transition: Transition of the checkbox icon
* @prop --background-checked: Background of the checkbox icon when checked
* @prop --border-color-checked: Border color of the checkbox icon when checked
* @prop --checkmark-color: Color of the checkbox checkmark when checked
* @prop --height: Height of the checkbox icon
* @prop --width: Width of the checkbox icon
*/
--background-checked: #{ion-color(primary, base)};
--border-color-checked: #{ion-color(primary, base)};
--checkmark-color: #{ion-color(primary, contrast)};
--transition: none;

display: inline-block;
position: relative;
Expand All @@ -42,8 +44,8 @@ input {

position: relative;

width: var(--size);
height: var(--size);
width: var(--width);
height: var(--height);

transition: var(--transition);

Expand All @@ -56,8 +58,10 @@ input {
contain: strict;
}

.checkbox-inner {
border-color: var(--checkmark-color);
.checkbox-icon path {
fill: none;
stroke: var(--checkmark-color);
stroke-width: 1;

opacity: 0;
}
Expand All @@ -71,7 +75,7 @@ input {
background: var(--background-checked);
}

:host(.checkbox-checked) .checkbox-inner {
:host(.checkbox-checked) .checkbox-icon path {
opacity: 1;
}

Expand All @@ -80,4 +84,4 @@ input {

:host(.checkbox-disabled) {
pointer-events: none;
}
}
9 changes: 6 additions & 3 deletions core/src/components/checkbox/checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,9 +134,12 @@ export class Checkbox implements ComponentInterface {
renderHiddenInput(this.el, this.name, this.value, this.disabled);

return [
<div class="checkbox-icon">
<div class="checkbox-inner"></div>
</div>,
<svg class="checkbox-icon" viewBox="0 0 24 24">
{ this.mode === 'md'
? <path d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
: <path d="M5.9,12.5l3.8,3.8l8.8-8.8"/>
}
</svg>,
<input
type="checkbox"
id={this.inputId}
Expand Down
3 changes: 2 additions & 1 deletion core/src/components/checkbox/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,9 @@ Checkboxes allow the selection of multiple options from a set of options. They a
| `--border-style` | Border style of the checkbox icon |
| `--border-width` | Border width of the checkbox icon |
| `--checkmark-color` | Color of the checkbox checkmark when checked |
| `--size` | Size of the checkbox icon |
| `--height` | Height of the checkbox icon |
| `--transition` | Transition of the checkbox icon |
| `--width` | Width of the checkbox icon |


----------------------------------------------
Expand Down
4 changes: 2 additions & 2 deletions core/src/components/checkbox/test/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@

<ion-item>
<ion-label>Dark</ion-label>
<ion-checkbox checked color="dark" style="--size: 100px;"></ion-checkbox>
<ion-checkbox checked color="dark" style="--height: 100px; --width: 100px;"></ion-checkbox>
</ion-item>

<ion-item>
Expand All @@ -72,7 +72,7 @@

<ion-item>
<ion-label>Dark</ion-label>
<ion-checkbox checked color="dark" slot="start" style="--size: 100px;"></ion-checkbox>
<ion-checkbox checked color="dark" slot="start" style="--height: 100px; --width: 100px;"></ion-checkbox>
</ion-item>

<ion-item>
Expand Down