Skip to content

Commit

Permalink
Merge branch 'master' into augmented-args-for-blazor
Browse files Browse the repository at this point in the history
  • Loading branch information
gmurray81 committed Sep 28, 2021
2 parents 37125dd + 06ebd52 commit 8ed4205
Show file tree
Hide file tree
Showing 21 changed files with 808 additions and 43 deletions.
4 changes: 3 additions & 1 deletion igniteui-webcomponents.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { IgcAvatarComponent } from './src/components/avatar/avatar.js';
import { IgcBadgeComponent } from './src/components/badge/badge.js';
import { IgcAvatarComponent } from './src/components/avatar/avatar.js';
import { IgcButtonComponent } from './src/components/button/button.js';
import { IgcFormComponent } from './src/components/form/form.js';
import { IgcCardComponent } from './src/components/card/card.js';
Expand All @@ -15,6 +15,7 @@ import { IgcListComponent } from './src/components/list/list.js';
import { IgcSwitchComponent } from './src/components/checkbox/switch.js';
import { IgcNavbarComponent } from './src/components/navbar/navbar.js';
import { IgcIconComponent } from './src/components/icon/icon.js';
import { IgcIconButtonComponent } from './src/components/button/icon-button.js';
import { IgcInputComponent } from './src/components/input/input.js';
import { IgcRadioComponent } from './src/components/radio/radio.js';
import { IgcRadioGroupComponent } from './src/components/radio-group/radio-group.js';
Expand All @@ -39,6 +40,7 @@ window.customElements.define('igc-list-item', IgcListItemComponent);
window.customElements.define('igc-switch', IgcSwitchComponent);
window.customElements.define('igc-navbar', IgcNavbarComponent);
window.customElements.define('igc-icon', IgcIconComponent);
window.customElements.define('igc-icon-button', IgcIconButtonComponent);
window.customElements.define('igc-input', IgcInputComponent);
window.customElements.define('igc-radio', IgcRadioComponent);
window.customElements.define('igc-radio-group', IgcRadioGroupComponent);
Expand Down
4 changes: 2 additions & 2 deletions src/components/button/button-base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(

/** Sets the variant of the button. */
@property({ reflect: true })
public variant: 'flat' | 'raised' | 'outlined' | 'fab' = 'flat';
public variant: 'flat' | 'contained' | 'outlined' | 'fab' = 'flat';

/** Sets focus in the button. */
@alternateName('focusComponent')
Expand Down Expand Up @@ -62,7 +62,7 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
native: true,
flat: variant === 'flat',
outlined: variant === 'outlined',
raised: variant === 'raised',
contained: variant === 'contained',
fab: variant === 'fab',
small: size === 'small',
medium: size === 'medium',
Expand Down
12 changes: 6 additions & 6 deletions src/components/button/button.bootstrap.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@
}

igc-button[variant='fab'][disabled]::part(base),
igc-button[variant='raised'][disabled]::part(base),
igc-button[variant='contained'][disabled]::part(base),
igc-link-button[variant='fab'][disabled]::part(base),
igc-link-button[variant='raised'][disabled]::part(base) {
igc-link-button[variant='contained'][disabled]::part(base) {
background: #{utils.color(primary, 100)};
color: #{utils.color(primary, 300)};
}
Expand Down Expand Up @@ -61,8 +61,8 @@
}
}

igc-button[variant='raised']:not([disabled])::part(base),
igc-link-button[variant='raised']:not([disabled])::part(base) {
igc-button[variant='contained']:not([disabled])::part(base),
igc-link-button[variant='contained']:not([disabled])::part(base) {
color: #{utils.contrast-color(primary, 600)};

&:hover {
Expand Down Expand Up @@ -172,9 +172,9 @@
}
}

igc-button[variant='raised']::part(base),
igc-button[variant='contained']::part(base),
igc-button[variant='fab']::part(base),
igc-link-button[variant='raised']::part(base),
igc-link-button[variant='contained']::part(base),
igc-link-button[variant='fab']::part(base) {
box-shadow: var(--igc-elevation-0);
}
Expand Down
14 changes: 7 additions & 7 deletions src/components/button/button.fluent.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use '../../styles/utilities' as utils;

@mixin theme() {
igc-button[variant='raised']::part(base),
igc-link-button[variant='raised']::part(base),
igc-button[variant='contained']::part(base),
igc-link-button[variant='contained']::part(base),
igc-button[variant='fab']::part(base),
igc-link-button[variant='fab']::part(base) {
box-shadow: var(--igc-elevation-0);
Expand Down Expand Up @@ -126,9 +126,9 @@
}
}

// FAB & RAISED
igc-button[variant='raised']:not([disabled])::part(base),
igc-link-button[variant='raised']:not([disabled])::part(base),
// FAB & CONTAINED
igc-button[variant='contained']:not([disabled])::part(base),
igc-link-button[variant='contained']:not([disabled])::part(base),
igc-button[variant='fab']:not([disabled])::part(base),
igc-link-button[variant='fab']:not([disabled])::part(base) {
color: #{utils.contrast-color(primary, 600)};
Expand Down Expand Up @@ -199,8 +199,8 @@

igc-button[variant='fab'][disabled]::part(base),
igc-link-button[variant='fab'][disabled]::part(base),
igc-button[variant='raised'][disabled]::part(base),
igc-link-button[variant='raised'][disabled]::part(base) {
igc-button[variant='contained'][disabled]::part(base),
igc-link-button[variant='contained'][disabled]::part(base) {
color: #{utils.color(gray, 400)};

&::before {
Expand Down
14 changes: 7 additions & 7 deletions src/components/button/button.indigo.scss
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,8 @@

igc-button[variant='fab']:not([disabled])::part(base),
igc-link-button[variant='fab']:not([disabled])::part(base),
igc-button[variant='raised']:not([disabled])::part(base),
igc-link-button[variant='raised']:not([disabled])::part(base) {
igc-button[variant='contained']:not([disabled])::part(base),
igc-link-button[variant='contained']:not([disabled])::part(base) {
color: #{utils.contrast-color(primary, 600)};

&:hover {
Expand Down Expand Up @@ -136,13 +136,13 @@
igc-button[variant='fab']:not([disabled])::part(base),
igc-link-button[variant='fab']:not([disabled])::part(base),
igc-button[variant='fab'][disabled]::part(base),
igc-link-button[variant='raised'][disabled]::part(base) {
igc-link-button[variant='contained'][disabled]::part(base) {
border-radius: calc(var(--igc-border-radius) * 100);
}

igc-button[variant='raised']::part(base),
igc-button[variant='contained']::part(base),
igc-button[variant='fab']::part(base),
igc-link-button[variant='raised']::part(base),
igc-link-button[variant='contained']::part(base),
igc-link-button[variant='fab']::part(base) {
box-shadow: var(--igc-elevation-0);
}
Expand All @@ -158,9 +158,9 @@
}

igc-button[variant='fab'][disabled]::part(base),
igc-button[variant='raised'][disabled]::part(base),
igc-button[variant='contained'][disabled]::part(base),
igc-link-button[variant='fab'][disabled]::part(base),
igc-link-button[variant='raised'][disabled]::part(base) {
igc-link-button[variant='contained'][disabled]::part(base) {
background: #{utils.color(gray, 100)};
color: #{utils.color(gray, 400)};
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/button/button.material.scss
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ span[part='suffix'] {
}
}

.raised {
.contained {
background: color(secondary, 500);
color: contrast-color(secondary, 500);
box-shadow: var(--igc-elevation-2);
Expand Down Expand Up @@ -128,7 +128,7 @@ span[part='suffix'] {
}

.fab {
@extend .raised;
@extend .contained;
border-radius: calc(var(--igc-border-radius) * 12);
box-shadow: var(--igc-elevation-6);

Expand Down
12 changes: 6 additions & 6 deletions src/components/button/button.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,12 @@ describe('Button component', () => {
});

it('sets variant property successfully', async () => {
el.variant = 'raised';
expect(el.variant).to.equal('raised');
el.variant = 'contained';
expect(el.variant).to.equal('contained');
await elementUpdated(el);

expect(el).shadowDom.to.equal(
`<button class="${classValue(`large raised`)}"/>`,
`<button class="${classValue(`large contained`)}"/>`,
DIFF_OPTIONS
);

Expand Down Expand Up @@ -192,7 +192,7 @@ describe('Button component', () => {
});

describe('applies the correct CSS class to the base element for variant', () => {
const variants = ['flat', 'raised', 'outlined', 'fab'];
const variants = ['flat', 'contained', 'outlined', 'fab'];

variants.forEach((variant) => {
it(variant, async () => {
Expand Down Expand Up @@ -228,10 +228,10 @@ describe('Button component', () => {

it('applies all button specific properties to the wrapped base element', async () => {
el = await createButtonComponent(
`<igc-button type="submit" variant="raised" size="medium">Submit<igc-button>`
`<igc-button type="submit" variant="contained" size="medium">Submit<igc-button>`
);
expect(el).shadowDom.to.equal(
`<button class="${classValue(`medium raised`)}" type="submit" />`,
`<button class="${classValue(`medium contained`)}" type="submit" />`,
DIFF_OPTIONS
);
});
Expand Down
73 changes: 73 additions & 0 deletions src/components/button/icon-button.bootstrap.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
@use '../../styles/utilities' as utils;

@mixin theme() {
igc-icon-button::part(base) {
border-radius: utils.rem(4px);
transition: box-shadow .15s ease-out,
color .15s ease-out,
background .15s ease-out;
}

igc-icon-button:not([disabled])::part(base) {
color: #{utils.color(primary, 500)};

&:hover {
color: #{utils.color(primary, 800)};
}

&:focus,
&:active {
color: #{utils.color(primary, 600)};
background: #{utils.color(gray, 100)};
box-shadow: none;
}
}

igc-icon-button[variant='contained']:not([disabled])::part(base) {
color: #{utils.contrast-color(primary, 600)};
background: #{utils.color(primary, 500)};

&:hover {
background: #{utils.color(primary, 600)};
}

&:focus,
&:active {
background: #{utils.color(primary, 600)};
box-shadow: 0 0 0 utils.rem(3px) utils.color(primary, 200);
}
}

igc-icon-button[variant='outlined']:not([disabled])::part(base) {
box-shadow: 0 0 0 utils.rem(1px) utils.color(primary, 500);

&:hover {
color: #{utils.contrast-color(primary, 600)};
background: #{utils.color(primary, 600)};
}

&:focus,
&:active {
color: #{utils.contrast-color(primary, 600)};
background: #{utils.color(primary, 600)};
box-shadow: 0 0 0 utils.rem(3px) utils.color(primary, 200);
}
}

igc-icon-button[disabled] {
&::part(base) {
color: #{utils.color(primary, 100)};
background: transparent;
}

&[variant='contained']::part(base) {
background: #{utils.color(primary, 100)};
color: #{utils.color(primary, 300)};
}

&[variant='outlined']::part(base) {
color: #{utils.color(primary, 100)};
box-shadow: 0 0 0 utils.rem(1px) utils.color(primary, 100);
}
}
}
80 changes: 80 additions & 0 deletions src/components/button/icon-button.fluent.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
@use '../../styles/utilities' as utils;

@mixin theme() {
igc-icon-button::part(base) {
background: transparent;
border-radius: utils.rem(1px);
transition: color .15s ease-out, background .15s ease-out;
box-shadow: none;

&::after {
position: absolute;
content: '';
pointer-events: none;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: calc(100% - 4px);
}
}

igc-icon-button:not([disabled])::part(base) {
color: utils.color(gray, 900);

&:hover {
color: utils.color(primary, 500);
}

&:focus-visible {
color: utils.color(gray, 900);
}

&:focus-visible::after {
box-shadow: 0 0 0 utils.rem(1px) utils.color(gray, 900);
}
}

igc-icon-button[variant='contained']:not([disabled])::part(base) {
color: utils.contrast-color(primary, 600);
background: utils.color(primary, 500);

&:hover {
background: utils.color(primary, 600);
}

&:focus-visible::after {
box-shadow: 0 0 0 utils.rem(1px) utils.contrast-color(primary, 600);
}
}

igc-icon-button[variant='outlined']:not([disabled])::part(base) {
color: utils.color(gray, 900);
box-shadow: 0 0 0 1px utils.color(gray, 700);

&:focus {
background: transparent;
}

&:hover,
&:focus:hover {
background: utils.color(gray, 100);
}

&:focus:active {
background: utils.color(gray, 200);
}
}

igc-icon-button[disabled] {
&::part(base) {
color: utils.color(gray, 400);
background: transparent;
}

&[variant='contained']::part(base),
&[variant='outlined']::part(base) {
color: utils.color(gray, 500);
background: utils.color(gray, 100);
}
}
}
Loading

0 comments on commit 8ed4205

Please sign in to comment.