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

feat(business/checkbox): expose checkbox component for business #51

Merged
merged 6 commits into from
Jun 28, 2019
Merged

feat(business/checkbox): expose checkbox component for business #51

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
89d6300
feat(business/checkbox): expose checkbox component for business
efux Jun 24, 2019
21c18c5
fix(business/checkbox): adapt checkbox component for business
efux Jun 25, 2019
6fdbc9a
Merge remote-tracking branch 'origin/master' into feature/business-ch…
efux Jun 25, 2019
6a2e7ae
fix(business/checkbox): do not test native element indeterminate
efux Jun 25, 2019
3765550
fix(business/checkbox): fix eslint
efux Jun 25, 2019
b2f8590
fix(business/checkbox): extract to distinct template
efux Jun 28, 2019
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
1 change: 1 addition & 0 deletions projects/sbb-esta/angular-business/src/lib/checkbox/checkbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from '../../../../angular-public/src/lib/checkbox/checkbox';
1 change: 1 addition & 0 deletions projects/sbb-esta/angular-business/src/public-api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/
export * from './lib/autocomplete/autocomplete';
export * from './lib/button/button';
export * from './lib/checkbox/checkbox';
export * from './lib/datepicker/datepicker';
export * from './lib/field/field';
export * from './lib/radio-button/radio-button';
Expand Down
44 changes: 40 additions & 4 deletions projects/sbb-esta/angular-public/src/lib/checkbox/_checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
@import 'common';

$checkBoxGreyColor: $sbbColorGrey;
$checkBoxContainerBorder: 2;

@if $sbbBusiness {
$checkBoxGreyColor: $sbbColorGranite;
$checkBoxContainerBorder: 1;
}


@mixin checkbox() {
& > label {
@include checkboxBase();
Expand All @@ -18,14 +27,41 @@
display: none;
}

& > .sbb-checkbox-indeterminate {
display: none;
}

& + .sbb-checkbox-label-content {
color: $sbbColorGrey;
@include businessOnly() {
line-height: toEm(21 / $sizeFontDefault);
}

color: $checkBoxGreyColor;
transition: color 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
}

&:focus + .sbb-checkbox-container {
border-color: $sbbColorGrey;
border-color: $checkBoxGreyColor;
}

@include businessOnly() {
&:indeterminate + .sbb-checkbox-container,
&[indeterminate] + .sbb-checkbox-container {
& > .sbb-checkbox-indeterminate {
position: relative;
height: 1px;
width: 10px;
left: 4px;
top: 8.5px;
border: 1px solid $sbbColorGranite;
display: block;
}

& + .sbb-checkbox-label-content {
color: $sbbColorBlack;
}
}
}

&:checked + .sbb-checkbox-container,
Expand All @@ -49,7 +85,7 @@
}

& + .sbb-checkbox-label-content {
color: $sbbColorGrey;
color: $checkBoxGreyColor;
}
}
}
Expand All @@ -59,7 +95,7 @@
width: toPx(20);
height: toPx(20);
background-color: $sbbColorWhite;
border: toPx(2) solid $sbbColorGraphite;
border: toPx($checkBoxContainerBorder) solid $sbbColorGraphite;
border-radius: toPx(2);
margin-right: toPx(8);
margin-top: toPx(1);
Expand Down
1 change: 1 addition & 0 deletions projects/sbb-esta/angular-public/src/lib/checkbox/checkbox/checkbox.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

<div class="sbb-checkbox-container">
<sbb-icon-tick class="sbb-checkbox-checked"></sbb-icon-tick>
<div *ngIf="!checked" class="sbb-checkbox-indeterminate"></div>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This I would like to avoid.
Indeterminate does not exist in public.
Is this maybe possible with pure css? (:content)
However, how can the consumer activate the indeterminate state?
I think extending the component might be the better approach here.

Copy link
Contributor Author

@efux efux Jun 25, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I created a distinct checkbox component for business, which has an indeterminate state. The checkbox can now be visually unchecked (and therefore not indeterminated), indeterminate (indeterminate and unchecked or indeterminate and checked), checked (and therefore not indeterminated).

Please note, that I don't update the indeterminate state of the native element, however, I update ariaChecked. Do you think this is sufficient or should I update the native element as well?

The indeterminate "feature" will be useful, when nesting checkboxes, which will be a requirement for business really soon.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please create a new template for the business variant, which forwards the indeterminate state to the native checkbox element (<input ... [indeterminate]="indeterminate" ...>).
indeterminate can probably be reduced to a simple property, instead of getter/setter.
You can also attach @HostBinding('class.sbb-checkbox-indeterminate') to the indeterminate property. indeterminateClass is unnecessary.

</div>

<div class="sbb-checkbox-label-content">
Expand Down