Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Contrib > Checkbox and radio styles #1691

Closed
wants to merge 8 commits into from
Closed

Contrib > Checkbox and radio styles #1691

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8d1f47f
Added icon style checkboxes
Blackbaud-AnandBhat Apr 20, 2018
588c552
updating border radius and border colors
Blackbaud-AnandBhat May 7, 2018
df79073
Merge branch 'master' into icon-checkbox
Blackbaud-AnandBhat May 7, 2018
9ce9d5a
Merge branch 'master' into icon-checkbox
Blackbaud-SteveBrush May 7, 2018
d9050c1
adding focus styling to icon-checkbox
Blackbaud-AnandBhat May 8, 2018
28bd943
Merge branch 'master' into icon-checkbox
Blackbaud-SteveBrush May 14, 2018
4b56756
Merge branch 'master' into contrib-icon-checkbox
Blackbaud-SteveBrush May 16, 2018
562dfa3
Updated radio and checkbox styles
Blackbaud-SteveBrush May 16, 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
59 changes: 44 additions & 15 deletions src/demos/checkbox/checkbox-demo.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,47 @@
<fieldset>
<legend>Checkbox options</legend>
<ul class="sky-list-unstyled">
<li *ngFor="let checkboxItem of checkboxItems">
<sky-checkbox [(ngModel)]="checkboxItem.checked" [disabled]="checkboxItem.disabled">
<sky-checkbox-label>
{{ checkboxItem.description }}
</sky-checkbox-label>
</sky-checkbox>
</li>
</ul>
</fieldset>
<b>Checked state:</b>
<h3>
Checkbox states
</h3>

<ul class="sky-list-unstyled">
<li *ngFor="let checkboxItem of checkboxItems">
{{ checkboxItem.description }}: <b>{{ checkboxItem.checked ? 'true': 'false' }}</b>
<li *ngFor="let item of checkboxItems">
<sky-checkbox
[(ngModel)]="item.checked"
[disabled]="item.disabled"
>
<sky-checkbox-label>
{{ item.label }}
</sky-checkbox-label>
</sky-checkbox>
</li>
</ul>

<h3>
Checkbox styles
</h3>

<sky-checkbox
[(ngModel)]="successChecked"
checkboxType="success"
>
<sky-checkbox-label>
Success
</sky-checkbox-label>
</sky-checkbox>

<sky-checkbox
[(ngModel)]="warningChecked"
checkboxType="warning"
>
<sky-checkbox-label>
Warning
</sky-checkbox-label>
</sky-checkbox>

<sky-checkbox
[(ngModel)]="dangerChecked"
checkboxType="danger"
>
<sky-checkbox-label>
Danger
</sky-checkbox-label>
</sky-checkbox>
8 changes: 4 additions & 4 deletions src/demos/checkbox/checkbox-demo.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@ import { Component } from '@angular/core';
export class SkyCheckboxDemoComponent {
public checkboxItems = [
{
description: 'Checkbox 1'
label: 'Checkbox 1'
},
{
description: 'Checkbox 2',
label: 'Checkbox 2',
checked: true
},
{
description: 'Disabled',
label: 'Disabled',
disabled: true
},
{
description: 'Disabled and selected',
label: 'Disabled and checked',
checked: true,
disabled: true
}
Expand Down
121 changes: 88 additions & 33 deletions src/demos/radio/radio-demo.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,91 @@
<form #checkForm="ngForm">
<div>
<fieldset>
<legend>Radio button options</legend>
<ul class="sky-list-unstyled">
<li>
<sky-radio name="radiotest" [(ngModel)]="selectedValue" #cb="ngModel" value="1">
<sky-radio-label>Option 1</sky-radio-label>
</sky-radio>
</li>
<h3>
Radio states
</h3>

<li>
<sky-radio
name="radiotest"
[ngModel]="selectedValue"
(ngModelChange)="selectedValue = $event"
disabled="true"
[value]="valueGuy">
<sky-radio-label>Option 2</sky-radio-label>
</sky-radio>
</li>
<ul class="sky-list-unstyled">
<li>
<sky-radio
name="radiotest"
value="1"
[(ngModel)]="selectedValue"
#cb="ngModel"
>
<sky-radio-label>
Option 1
</sky-radio-label>
</sky-radio>
</li>
<li>
<sky-radio
disabled="true"
name="radiotest"
[ngModel]="selectedValue"
[value]="valueGuy"
(ngModelChange)="selectedValue = $event"
>
<sky-radio-label>
Option 2
</sky-radio-label>
</sky-radio>
</li>
<li>
<sky-radio
name="radiotest"
value="3"
[ngModel]="selectedValue"
(ngModelChange)="selectedValue = $event"
>
<sky-radio-label>
Option 3
</sky-radio-label>
</sky-radio>
</li>
</ul>

<li>
<sky-radio name="radiotest" [ngModel]="selectedValue" (ngModelChange)="selectedValue = $event" value="3">
<sky-radio-label>Option 3</sky-radio-label>
</sky-radio>
</li>
</ul>
</fieldset>
<p>
Selected option: <strong>{{ selectedValue }}</strong>
</p>

<br />
Selected option: {{selectedValue}}
Touched: {{cb.touched}}
Pristine: {{cb.pristine}}
</div>
</form>
<h3>
Radio styles
</h3>

<sky-radio
name="styleradios"
radioType="success"
value="success"
[ngModel]="selectedStyle"
(ngModelChange)="selectedStyle = $event"
>
<sky-radio-label>
Success
</sky-radio-label>
</sky-radio>

<sky-radio
name="styleradios"
radioType="warning"
value="warning"
[ngModel]="selectedStyle"
(ngModelChange)="selectedStyle = $event"
>
<sky-radio-label>
Warning
</sky-radio-label>
</sky-radio>

<sky-radio
name="styleradios"
radioType="danger"
value="danger"
[ngModel]="selectedStyle"
(ngModelChange)="selectedStyle = $event"
>
<sky-radio-label>
Danger
</sky-radio-label>
</sky-radio>

<p>
Selected style: <strong>{{ selectedStyle }}</strong>
</p>
40 changes: 27 additions & 13 deletions src/modules/checkbox/checkbox.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,28 @@
<label class="sky-checkbox-wrapper" [ngClass]="{'sky-checkbox-wrapper-disabled': disabled}">
<input type="checkbox"
[id]="inputId"
[checked]="checked"
[disabled]="disabled"
[name]="name"
[tabIndex]="tabindex"
[attr.aria-label]="label"
[attr.aria-labelledby]="labelledBy"
(blur)="onInputBlur()"
(change)="onInteractionEvent($event)"/>
<span class="sky-checkbox"></span>
<ng-content select="sky-checkbox-label"></ng-content>
<label
class="sky-checkbox-wrapper sky-switch"
[ngClass]="classNames"
>
<input
class="sky-switch-input"
type="checkbox"
[id]="inputId"
[checked]="checked"
[disabled]="disabled"
[name]="name"
[tabIndex]="tabindex"
[attr.aria-label]="label"
[attr.aria-labelledby]="labelledBy"
(blur)="onInputBlur()"
(change)="onInteractionEvent($event)"
/>
<span class="sky-switch-control sky-rounded-corners">
<i *ngIf="checked"
aria-hidden="true"
class="fa fa-fw fa-check"
></i>
</span>
<span class="sky-switch-label">
<ng-content select="sky-checkbox-label">
</ng-content>
</span>
</label>
62 changes: 0 additions & 62 deletions src/modules/checkbox/checkbox.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +0,0 @@
@import "../../scss/variables";
@import "../../scss/mixins";

.sky-checkbox-wrapper {
cursor: pointer;
position: relative;
}

.sky-checkbox-wrapper.sky-checkbox-wrapper-disabled, .sky-checkbox-wrapper.sky-checkbox-wrapper-disabled input {
cursor: default;
}

.sky-checkbox-wrapper input {
opacity: 0;
position: absolute;
height: 22px;
width: 22px;
margin: 0;
padding: 0;
cursor: pointer;
}

.sky-checkbox {
background-color: $sky-color-white;
@include sky-border(dark, top, bottom, left, right);
display: inline-block;
height: 22px;
margin: 0;
padding: 0;
vertical-align: middle;
width: 22px;
text-align: center;
font-size: $sky-font-size-base;
line-height: 19px;
}

.sky-checkbox-wrapper input:hover + .sky-checkbox {
border: 2px solid $sky-background-color-primary-dark;
}

.sky-checkbox-wrapper input:checked + .sky-checkbox {
background-color: $sky-background-color-primary-dark;
border-color: $sky-background-color-primary-dark;
border-width: 1px;

&:before {
color: $sky-color-white;
content: "\f00c";
font-family: FontAwesome;
font-size: 13px;
}
}


.sky-checkbox-wrapper input:disabled + .sky-checkbox {
background-color: $sky-background-color-neutral-light;
@include sky-border(light, top, bottom, left, right);
}

.sky-checkbox-wrapper input:focus + .sky-checkbox {
@include sky-focus-outline;
}
23 changes: 19 additions & 4 deletions src/modules/checkbox/checkbox.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,14 @@ import { FormsModule, NgModel } from '@angular/forms';
import {Component, DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';

import {
expect
} from '@blackbaud/skyux-builder/runtime/testing/browser';

import {
SkyCheckboxType
} from './types';

import {SkyCheckboxComponent, SkyCheckboxChange} from './checkbox.component';
import { SkyCheckboxModule } from './checkbox.module';

Expand All @@ -18,10 +26,11 @@ import { SkyCheckboxModule } from './checkbox.module';
template: `
<div>
<sky-checkbox
id="simple-check"
[checked]="isChecked"
[disabled]="isDisabled"
(change)="checkboxChange($event)">
id="simple-check"
[checked]="isChecked"
[disabled]="isDisabled"
[checkboxType]="type"
(change)="checkboxChange($event)">
<sky-checkbox-label>
Simple checkbox
</sky-checkbox-label>
Expand All @@ -31,6 +40,7 @@ import { SkyCheckboxModule } from './checkbox.module';
class SingleCheckboxComponent {
public isChecked: boolean = false;
public isDisabled: boolean = false;
public type: SkyCheckboxType;

public checkboxChange($event: any) {
this.isChecked = $event.checked;
Expand Down Expand Up @@ -241,6 +251,11 @@ describe('Checkbox component', () => {
expect(inputElement.tabIndex).toBe(0);
});

it('should allow changing the checkbox style', () => {
fixture.componentInstance.type = 'success';
fixture.detectChanges();
expect(labelElement).toHaveCssClass('sky-switch-success');
});
});

describe('with change event and no initial value', () => {
Expand Down
Loading