From 21655841983813a970a3cc857115882703d20d81 Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 14 Nov 2023 16:01:09 +0200 Subject: [PATCH 01/21] feat(icon-button): implement component --- .../lib/core/styles/components/_index.scss | 1 + .../icon-button/_icon-button-component.scss | 32 ++ .../icon-button/_icon-button-theme.scss | 340 ++++++++++++++++++ .../src/lib/core/styles/themes/_core.scss | 2 + .../core/styles/themes/generators/_base.scss | 8 + .../src/lib/directives/button/button-base.ts | 53 +++ .../lib/directives/button/button.directive.ts | 64 +--- .../button/icon-button.directive.ts | 88 +++++ 8 files changed, 533 insertions(+), 55 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-component.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss create mode 100644 projects/igniteui-angular/src/lib/directives/button/button-base.ts create mode 100644 projects/igniteui-angular/src/lib/directives/button/icon-button.directive.ts diff --git a/projects/igniteui-angular/src/lib/core/styles/components/_index.scss b/projects/igniteui-angular/src/lib/core/styles/components/_index.scss index a264fd85c29..a91b2f4a1af 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/_index.scss @@ -27,6 +27,7 @@ @forward 'grid-toolbar/grid-toolbar-theme'; @forward 'highlight/highlight-theme.scss'; @forward 'icon/icon-theme'; +@forward 'icon-button/icon-button-theme'; @forward 'input/input-group-theme'; @forward 'label/label-theme'; @forward 'list/list-theme'; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-component.scss new file mode 100644 index 00000000000..604c310e5d6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-component.scss @@ -0,0 +1,32 @@ +@use '../../base' as *; +@use 'sass:string'; + +/// @access private +/// @author Silvia Ivanova +@mixin component { + @include b(igx-icon-button) { + $this: bem--selector-to-string(&); + @include register-component( + $name: string.slice($this, 2, -1), + $deps: () + ); + + @extend %igx-icon-button-display !optional; + + @include m(flat) { + @extend %igx-icon-button--flat !optional; + } + + @include m(contained) { + @extend %igx-icon-button--contained !optional; + } + + @include m(outlined) { + @extend %igx-icon-button--outlined !optional; + } + + @include m(disabled) { + @extend %igx-button--disabled !optional; + } + } +} diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss new file mode 100644 index 00000000000..655a16d2941 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss @@ -0,0 +1,340 @@ +@use 'sass:map'; +@use 'sass:color'; +@use '../../base' as *; +@use '../../themes/schemas' as *; + +//// +/// @group themes +/// @access public +/// @author Silvia Ivanova +//// + +@function icon-button-theme( + $schema: $light-material-schema, + $elevations: null, + + $background: null, + $foreground: null, + + $hover-background: null, + $hover-foreground: null, + + $focus-background: null, + $focus-foreground: null, + + $active-background: null, + $active-foreground: null, + + $border-radius: null, + $border-color: null, + $focus-border-color: null, + + $disabled-background: null, + $disabled-foreground: null, + $disabled-border-color: null, + + $size: null, +) { + $name: 'igx-icon-button'; + $icon-button-schema: (); + + @if map.has-key($schema, 'icon-button') { + $icon-button-schema: map.get($schema, 'icon-button'); + } @else { + $icon-button-schema: $schema; + } + + $themes: (); + $variant: null; + + @each $_name, $_schema in $icon-button-schema { + @if not($variant) { + $variant: map.get($schema, '_meta', 'theme'); + } + + $themes: map.merge($themes, ( + $_name: extend( digest-schema($_schema), ( + name: $name, + background: $background, + foreground: $foreground, + + hover-background: $hover-background, + hover-foreground: $hover-foreground, + + focus-background: $focus-background, + focus-foreground: $focus-foreground, + + active-background: $active-background, + active-foreground: $active-foreground, + + border-radius: $border-radius, + border-color: $border-color, + focus-border-color: $focus-border-color, + + disabled-background: $disabled-background, + disabled-foreground: $disabled-foreground, + disabled-border-color: $disabled-border-color, + size: $size, + )) + )); + } + + @return ( + name: $name, + variant: $variant, + themes: $themes, + ); +} +/// @param {Map} $theme - The theme used to style the component. +@mixin icon-button($theme) { + $variant: map.get($theme, variant); + $flat-theme: map.get(map.get($theme, 'themes'), 'flat'); + $outlined-theme: map.get(map.get($theme, 'themes'), 'outlined'); + $contained-theme: map.get(map.get($theme, 'themes'), 'contained'); + + @include css-vars($flat-theme); + @include css-vars($outlined-theme); + @include css-vars($contained-theme); + + $time: map.get(( + material: .1s, + fluent: .1s, + bootstrap: .15s, + indigo-design: .15s + ), $variant); + + $button-transition: color $time ease-in-out, + background-color $time ease-in-out, + border-color $time ease-in-out, + box-shadow $time ease-in-out; + + $icon-sizes: map.get(( + material: rem(18px), + fluent: rem(16px), + bootstrap: rem(18px), + indigo-design: rem(18px), + ), $variant); + + $icon-in-button-size: $icon-sizes; + + $items-gap: ( + comfortable: rem(12px), + cosy: rem(8px), + compact: rem(4px) + ); + + $outline-btn-indent: rem(2px); + + %igx-icon-button-display { + @include sizable(); + --component-size: var(--ig-size, var(--ig-size-large)); + + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + user-select: none; + outline-style: none; + -webkit-tap-highlight-color: transparent; + overflow: hidden; + white-space: nowrap; + transition: $button-transition; + min-width: unset; + min-height: unset; + font-size: rem(24px, 24px); + padding: 0; + gap: pad-inline( + map.get($items-gap, 'compact'), + map.get($items-gap, 'cosy'), + map.get($items-gap, 'comfortable') + ); + + igx-icon { + --component-size: var(--ig-size, var(--ig-size-large)); + display: flex; + justify-content: center; + width: var(--igx-icon-size, #{$icon-in-button-size}); + height: var(--igx-icon-size, #{$icon-in-button-size}); + font-size: var(--igx-icon-size, #{$icon-in-button-size}); + } + + @if ($variant == 'fluent') { + &::after { + position: absolute; + content: ''; + pointer-events: none; + top: 2px; + left: 2px; + width: calc(100% - (#{$outline-btn-indent} * 2)); + height: calc(100% - (#{$outline-btn-indent} * 2)); + border-radius: calc(#{var-get($flat-theme, 'border-radius')} - #{$outline-btn-indent * 2}); + } + } + } + + %igx-icon-button--flat { + width: var-get($flat-theme, 'size'); + height: var-get($flat-theme, 'size'); + background: var-get($flat-theme, 'background'); + color: var-get($flat-theme, 'foreground'); + border: rem(1px) solid var-get($flat-theme, 'border-color'); + border-radius: var-get($flat-theme, 'border-radius'); + + &:hover { + background: var-get($flat-theme, 'hover-background'); + color: var-get($flat-theme, 'hover-foreground'); + } + + &:focus, + &:focus-visible { + background: var-get($flat-theme, 'focus-background'); + color: var-get($flat-theme, 'focus-foreground'); + border-color: var-get($flat-theme, 'focus-border-color'); + + @if ($variant == 'fluent') { + border: none; + + &::after { + box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-border-color'); + } + } + } + + &:active { + background: var-get($flat-theme, 'active-background'); + color: var-get($flat-theme, 'active-foreground'); + } + + @if ($variant == 'indigo-design') { + &:focus, + &:focus-visible, + &:active { + border-color: var-get($flat-theme, 'border-color'); + box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'focus-border-color'); + } + } + } + + %igx-icon-button--contained { + width: var-get($contained-theme, 'size'); + height: var-get($contained-theme, 'size'); + background: var-get($contained-theme, 'background'); + color: var-get($contained-theme, 'foreground'); + border: rem(1px) solid var-get($contained-theme, 'border-color'); + border-radius: var-get($contained-theme, 'border-radius'); + + &:hover { + background: var-get($contained-theme, 'hover-background'); + color: var-get($contained-theme, 'hover-foreground'); + } + + &:focus, + &:focus-visible { + background: var-get($contained-theme, 'focus-background'); + color: var-get($contained-theme, 'focus-foreground'); + border-color: var-get($contained-theme, 'focus-border-color'); + + @if ($variant == 'fluent') { + border: none; + + &::after { + box-shadow: 0 0 0 rem(1px) var-get($contained-theme, 'focus-border-color'); + } + } + } + + &:active { + background: var-get($contained-theme, 'active-background'); + color: var-get($contained-theme, 'active-foreground'); + } + + &:focus, + &:focus-visible, + &:active { + @if ($variant == 'bootstrap') { + box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'focus-border-color'); + } + + @if ($variant == 'indigo-design') { + border-color: var-get($contained-theme, 'border-color'); + box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'focus-border-color'); + } + } + } + + %igx-icon-button--outlined { + width: var-get($outlined-theme, 'size'); + height: var-get($outlined-theme, 'size'); + background: var-get($outlined-theme, 'background'); + color: var-get($outlined-theme, 'foreground'); + border: rem(1px) solid var-get($outlined-theme, 'border-color'); + border-radius: var-get($outlined-theme, 'border-radius'); + + @if ($variant == 'indigo-design') { + border-width: rem(2px); + } + + &:hover { + background: var-get($outlined-theme, 'hover-background'); + color: var-get($outlined-theme, 'hover-foreground'); + } + + &:focus, + &:focus-visible { + background: var-get($outlined-theme, 'focus-background'); + color: var-get($outlined-theme, 'focus-foreground'); + border-color: var-get($outlined-theme, 'focus-border-color'); + + @if ($variant == 'fluent') { + &::after { + box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-border-color'); + } + } + } + + &:active { + background: var-get($outlined-theme, 'active-background'); + color: var-get($outlined-theme, 'active-foreground'); + } + + &:focus, + &:focus-visible, + &:active { + @if ($variant == 'bootstrap') { + box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'focus-border-color'); + } + + @if ($variant == 'indigo-design') { + border-color: var-get($outlined-theme, 'border-color'); + box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'focus-border-color'); + } + } + } + + %igx-button--disabled { + background: var-get($flat-theme, 'disabled-background'); + color: var-get($flat-theme, 'disabled-foreground'); + border-color: var-get($flat-theme, 'disabled-border-color'); + pointer-events: none; + box-shadow: none; + + &:focus { + box-shadow: none; + } + } +} + +/// Adds typography styles for the igx-icon-button component. +/// Uses the 'button' category from the typographic scale. +/// @group typography +/// @param {String} $categories [(text: 'button')] - The category from the typographic scale used for type styles. +@mixin icon-button-typography($categories: (text: 'button')) { + $text: map.get($categories, 'text'); + + %igx-icon-button-display { + @include type-style($text) { + text-align: center; + } + } +} diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss index 6e90865659c..fd4a7cf86f1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss @@ -56,6 +56,7 @@ @use '../components/grid-toolbar/grid-toolbar-component' as grid-toolbar; @use '../components/highlight/highlight-component' as highlight; @use '../components/icon/icon-component' as icon; +@use '../components/icon-button/icon-button-component' as icon-button; @use '../components/input/input-group-component' as input-group; @use '../components/label/label-component' as label; @use '../components/list/list-component' as list; @@ -152,6 +153,7 @@ @include pivot-data-selector.component(); @include highlight.component(); @include icon.component(); + @include icon-button.component(); @include input-group.component(); @include label.component(); @include list.component(); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index eac1ea440aa..ef88005ecce 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -459,6 +459,14 @@ @include icon($icon-theme-map); } + @if is-used('igx-icon-button', $exclude) { + $icon-button-theme-map: icon-button-theme( + $schema: $schema, + ); + $icon-button-theme-map: meta.call($theme-handler, $icon-button-theme-map); + @include icon-button($icon-button-theme-map); + } + @if is-used('igx-input-group', $exclude) { $input-group-theme-map: input-group-theme( $schema: $schema, diff --git a/projects/igniteui-angular/src/lib/directives/button/button-base.ts b/projects/igniteui-angular/src/lib/directives/button/button-base.ts new file mode 100644 index 00000000000..bab497c0be7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/directives/button/button-base.ts @@ -0,0 +1,53 @@ +import { Directive, EventEmitter, HostBinding, HostListener, Input, Output, booleanAttribute } from '@angular/core'; +import { DisplayDensityBase } from '../../core/density'; + +@Directive() +export abstract class IgxButtonBaseDirective extends DisplayDensityBase { + /** + * Called when the button is clicked. + */ + @Output() + public buttonClick = new EventEmitter(); + + /** + * Sets/gets the `role` attribute. + * + * @example + * ```typescript + * this.button.role = 'navbutton'; + * let buttonRole = this.button.role; + * ``` + */ + @HostBinding('attr.role') + public role = 'button'; + + /** + * @hidden + * @internal + */ + @HostListener('click', ['$event']) + public onClick(ev: MouseEvent) { + this.buttonClick.emit(ev); + } + + /** + * Enables/disables the button. + * + * @example + * ```html + * + * ``` + */ + @Input({ transform: booleanAttribute }) + @HostBinding('class.igx-button--disabled') + public disabled = false; + + /** + * @hidden + * @internal + */ + @HostBinding('attr.disabled') + public get disabledAttribute() { + return this.disabled ? this.disabled : null; + } +} diff --git a/projects/igniteui-angular/src/lib/directives/button/button.directive.ts b/projects/igniteui-angular/src/lib/directives/button/button.directive.ts index 6f31036e23d..5f6b08a1f90 100644 --- a/projects/igniteui-angular/src/lib/directives/button/button.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/button/button.directive.ts @@ -6,18 +6,18 @@ import { Input, Output, Renderer2, - HostListener, Optional, Inject, booleanAttribute } from '@angular/core'; -import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../../core/density'; +import { DisplayDensityToken, IDisplayDensityOptions } from '../../core/density'; import { mkenum } from '../../core/utils'; import { IBaseEventArgs } from '../../core/utils'; +import { IgxButtonBaseDirective } from './button-base'; const IgxButtonType = mkenum({ Flat: 'flat', - Raised: 'raised', + Contained: 'contained', Outlined: 'outlined', Icon: 'icon', FAB: 'fab' @@ -51,33 +51,15 @@ export type IgxButtonType = typeof IgxButtonType[keyof typeof IgxButtonType]; selector: '[igxButton]', standalone: true }) -export class IgxButtonDirective extends DisplayDensityBase { +export class IgxButtonDirective extends IgxButtonBaseDirective { private static ngAcceptInputType_type: IgxButtonType | ''; - /** - * Called when the button is clicked. - */ - @Output() - public buttonClick = new EventEmitter(); - /** * Called when the button is selected. */ @Output() public buttonSelected = new EventEmitter(); - /** - * Sets/gets the `role` attribute. - * - * @example - * ```typescript - * this.button.role = 'navbutton'; - * let buttonRole = this.button.role; - * ``` - */ - @HostBinding('attr.role') - public role = 'button'; - /** * @hidden * @internal @@ -149,15 +131,6 @@ export class IgxButtonDirective extends DisplayDensityBase { super(_displayDensityOptions, element); } - /** - * @hidden - * @internal - */ - @HostListener('click', ['$event']) - public onClick(ev: MouseEvent) { - this.buttonClick.emit(ev); - } - /** * Returns the underlying DOM element. */ @@ -182,6 +155,7 @@ export class IgxButtonDirective extends DisplayDensityBase { } /** + * @deprecated in version 17.1.0. * Sets the button text color. * * @example @@ -196,6 +170,7 @@ export class IgxButtonDirective extends DisplayDensityBase { } /** + * @deprecated in version 17.1.0. * Sets the background color of the button. * * @example @@ -223,18 +198,6 @@ export class IgxButtonDirective extends DisplayDensityBase { this._renderer.setAttribute(this.nativeElement, 'aria-label', this._label); } - /** - * Enables/disables the button. - * - * @example - * ```html - * - * ``` - */ - @Input({ transform: booleanAttribute }) - @HostBinding('class.igx-button--disabled') - public disabled = false; - /** * @hidden * @internal @@ -248,9 +211,9 @@ export class IgxButtonDirective extends DisplayDensityBase { * @hidden * @internal */ - @HostBinding('class.igx-button--raised') - public get raised(): boolean { - return this._type === IgxButtonType.Raised; + @HostBinding('class.igx-button--contained') + public get contained(): boolean { + return this._type === IgxButtonType.Contained; } /** @@ -289,15 +252,6 @@ export class IgxButtonDirective extends DisplayDensityBase { return this.getComponentSizeStyles(); } - /** - * @hidden - * @internal - */ - @HostBinding('attr.disabled') - public get disabledAttribute() { - return this.disabled ? this.disabled : null; - } - /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/directives/button/icon-button.directive.ts b/projects/igniteui-angular/src/lib/directives/button/icon-button.directive.ts new file mode 100644 index 00000000000..d57fd578a62 --- /dev/null +++ b/projects/igniteui-angular/src/lib/directives/button/icon-button.directive.ts @@ -0,0 +1,88 @@ +import { Directive, HostBinding, Input } from '@angular/core'; +import { IgxButtonBaseDirective } from './button-base'; +import { mkenum } from '../../core/utils'; + +const IgxIconButtonType = mkenum({ + Flat: 'flat', + Contained: 'contained', + Outlined: 'outlined' +}); + +/** + * Determines the Icon Button type. + */ +export type IgxIconButtonType = typeof IgxIconButtonType[keyof typeof IgxIconButtonType]; + +/** + * The IgxIconButtonDirective provides a way to use an icon as a fully functional button. + * + * @example + * ```html + * + * ``` + */ +@Directive({ + selector: '[igxIconButton]', + standalone: true +}) +export class IgxIconButtonDirective extends IgxButtonBaseDirective { + private static ngAcceptInputType_type: IgxIconButtonType | ''; + + /** + * @hidden + * @internal + */ + @HostBinding('class.igx-icon-button') + public _cssClass = 'igx-icon-button'; + + /** + * @hidden + * @internal + */ + private _type: IgxIconButtonType; + + /** + * Sets the type of the icon button. + * + * @example + * ```html + * + * ``` + */ + @Input('igxIconButton') + public set type(type: IgxIconButtonType) { + const t = type ? type : IgxIconButtonType.Contained; + if (this._type !== t) { + this._type = t; + } + } + + /** + * @hidden + * @internal + */ + @HostBinding('class.igx-icon-button--flat') + public get flat(): boolean { + return this._type === IgxIconButtonType.Flat; + } + + /** + * @hidden + * @internal + */ + @HostBinding('class.igx-icon-button--contained') + public get contained(): boolean { + return this._type === IgxIconButtonType.Contained; + } + + /** + * @hidden + * @internal + */ + @HostBinding('class.igx-icon-button--outlined') + public get outlined(): boolean { + return this._type === IgxIconButtonType.Outlined; + } +} From 6a9dd085e4910e0439433ae593d7577fd119f74a Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 14 Nov 2023 16:15:59 +0200 Subject: [PATCH 02/21] refactor(button): rename raised to contained type --- .../components/button/_button-component.scss | 6 +- .../components/button/_button-theme.scss | 187 +++++------------- src/app/button/button.sample.html | 32 +-- src/app/button/button.sample.ts | 4 +- 4 files changed, 70 insertions(+), 159 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss index 4ac887833a4..59cd6c268fc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss @@ -18,9 +18,9 @@ @extend %igx-button--flat !optional; } - // RAISED BUTTON - @include m(raised) { - @extend %igx-button--raised !optional; + // CONTAINED BUTTON + @include m(contained) { + @extend %igx-button--contained !optional; } // OUTLINED BUTTON diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index 09975e09396..d74447e9eaa 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -43,7 +43,7 @@ /// /// @requires $light-material-schema /// -/// @example scss Change the background and text colors in raised buttons +/// @example scss Change the background and text colors in contained buttons /// $my-button-theme: button-theme( /// $foreground: white, /// $background: black @@ -222,15 +222,13 @@ $flat-theme: map.get(map.get($theme, 'themes'), 'flat'); $outlined-theme: map.get(map.get($theme, 'themes'), 'outlined'); - $raised-theme: map.get(map.get($theme, 'themes'), 'raised'); + $contained-theme: map.get(map.get($theme, 'themes'), 'contained'); $fab-theme: map.get(map.get($theme, 'themes'), 'fab'); - $icon-theme: map.get(map.get($theme, 'themes'), 'icon'); @include css-vars($flat-theme); @include css-vars($outlined-theme); - @include css-vars($raised-theme); + @include css-vars($contained-theme); @include css-vars($fab-theme); - @include css-vars($icon-theme); $time: map.get(( material: .1s, @@ -391,32 +389,32 @@ $icon-in-button-size: $icon-sizes; - $raised-shadow: map.get(( - material: var-get($raised-theme, 'resting-shadow'), - fluent: var-get($raised-theme, 'resting-shadow'), + $contained-shadow: map.get(( + material: var-get($contained-theme, 'resting-shadow'), + fluent: var-get($contained-theme, 'resting-shadow'), bootstrap: none, indigo-design: none ), $variant); - $raised-shadow--hover: map.get(( - material: var-get($raised-theme, 'hover-shadow'), - fluent: var-get($raised-theme, 'hover-shadow'), + $contained-shadow--hover: map.get(( + material: var-get($contained-theme, 'hover-shadow'), + fluent: var-get($contained-theme, 'hover-shadow'), bootstrap: none, indigo-design: none ), $variant); - $raised-shadow--focus: map.get(( - material: var-get($raised-theme, 'focus-shadow'), - fluent: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'), - bootstrap: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'), - indigo-design: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color') + $contained-shadow--focus: map.get(( + material: var-get($contained-theme, 'focus-shadow'), + fluent: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), + bootstrap: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), + indigo-design: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color') ), $variant); - $raised-shadow--active: map.get(( - material: var-get($raised-theme, 'active-shadow'), - fluent: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'), - bootstrap: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'), - indigo-design: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color') + $contained-shadow--active: map.get(( + material: var-get($contained-theme, 'active-shadow'), + fluent: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), + bootstrap: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), + indigo-design: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color') ), $variant); $fab-shadow: map.get(( @@ -447,13 +445,6 @@ indigo-design: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color') ), $variant); - $icon-shadow: map.get(( - material: var-get($icon-theme, 'focus-shadow'), - fluent: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color'), - bootstrap: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color'), - indigo-design: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color') - ), $variant); - %igx-button-display { @include sizable(); --component-size: var(--ig-size, var(--ig-size-large)); @@ -667,58 +658,58 @@ } } - %igx-button--raised { - color: var-get($raised-theme, 'foreground'); - background: var-get($raised-theme, 'background'); - box-shadow: $raised-shadow; - border-radius: var-get($raised-theme, 'border-radius'); + %igx-button--contained { + color: var-get($contained-theme, 'foreground'); + background: var-get($contained-theme, 'background'); + box-shadow: $contained-shadow; + border-radius: var-get($contained-theme, 'border-radius'); &:hover { - color: var-get($raised-theme, 'hover-foreground'); - background: var-get($raised-theme, 'hover-background'); - border-color: var-get($raised-theme, 'hover-border-color'); - box-shadow: $raised-shadow--hover; + color: var-get($contained-theme, 'hover-foreground'); + background: var-get($contained-theme, 'hover-background'); + border-color: var-get($contained-theme, 'hover-border-color'); + box-shadow: $contained-shadow--hover; } &:focus { - color: var-get($raised-theme, 'focus-foreground'); - background: var-get($raised-theme, 'focus-background'); - border-color: var-get($raised-theme, 'focus-border-color'); + color: var-get($contained-theme, 'focus-foreground'); + background: var-get($contained-theme, 'focus-background'); + border-color: var-get($contained-theme, 'focus-border-color'); @if $variant == 'material' or $variant == 'fluent' { - box-shadow: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'), $raised-shadow--focus; + box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), $contained-shadow--focus; } @else { - box-shadow: $raised-shadow--focus; + box-shadow: $contained-shadow--focus; } } &:active { - color: var-get($raised-theme, 'active-foreground'); - background: var-get($raised-theme, 'active-background'); - border-color: var-get($raised-theme, 'active-border-color'); + color: var-get($contained-theme, 'active-foreground'); + background: var-get($contained-theme, 'active-background'); + border-color: var-get($contained-theme, 'active-border-color'); @if $variant == 'material' or $variant == 'fluent' { - box-shadow: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'), $raised-shadow--active; + box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), $contained-shadow--active; } @else { - box-shadow: $raised-shadow--active; + box-shadow: $contained-shadow--active; } } &:focus-visible { - background: var-get($raised-theme, 'focus-visible-background'); - color: var-get($raised-theme, 'focus-visible-foreground'); - border-color: var-get($raised-theme, 'focus-visible-border-color'); + background: var-get($contained-theme, 'focus-visible-background'); + color: var-get($contained-theme, 'focus-visible-foreground'); + border-color: var-get($contained-theme, 'focus-visible-border-color'); &:hover { - color: var-get($raised-theme, 'hover-foreground'); - background: var-get($raised-theme, 'hover-background'); - border-color: var-get($raised-theme, 'hover-border-color'); + color: var-get($contained-theme, 'hover-foreground'); + background: var-get($contained-theme, 'hover-background'); + border-color: var-get($contained-theme, 'hover-border-color'); } &:active { - color: var-get($raised-theme, 'active-foreground'); - background: var-get($raised-theme, 'active-background'); - border-color: var-get($raised-theme, 'active-border-color'); + color: var-get($contained-theme, 'active-foreground'); + background: var-get($contained-theme, 'active-background'); + border-color: var-get($contained-theme, 'active-border-color'); } } @@ -809,7 +800,7 @@ @if $variant == 'material' or $variant == 'fluent' { box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), $fab-shadow--focus; } @else { - box-shadow: $raised-shadow--focus; + box-shadow: $contained-shadow--focus; } } @@ -821,7 +812,7 @@ @if $variant == 'material' or $variant == 'fluent' { box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), $fab-shadow--active; } @else { - box-shadow: $raised-shadow--active; + box-shadow: $contained-shadow--active; } } @@ -879,86 +870,6 @@ } } - %igx-button--icon { - width: var-get($icon-theme, 'size'); - height: var-get($icon-theme, 'size'); - min-width: unset; - min-height: unset; - font-size: rem(24px, 24px); - padding: 0; - color: var-get($icon-theme, 'foreground'); - background: var-get($icon-theme, 'background'); - border-radius: var-get($icon-theme, 'border-radius'); - border-color: var-get($icon-theme, 'border-color'); - - @if $variant == 'indigo-design' { - border-width: rem(3px); - } - - &:hover { - @if $variant != 'fluent' { - transition: $button-transition; - } - - color: var-get($icon-theme, 'hover-foreground'); - background: var-get($icon-theme, 'hover-background'); - border-color: var-get($icon-theme, 'hover-border-color'); - } - - &:focus { - color: var-get($icon-theme, 'focus-foreground'); - background: var-get($icon-theme, 'focus-background'); - border-color: var-get($icon-theme, 'focus-border-color'); - - @if $variant == 'fluent' { - &:hover { - color: var-get($icon-theme, 'hover-foreground'); - background: var-get($icon-theme, 'hover-background'); - border-color: var-get($icon-theme, 'hover-border-color'); - } - - &:active { - color: var-get($icon-theme, 'active-foreground'); - background: var-get($icon-theme, 'active-background'); - border-color: var-get($icon-theme, 'active-border-color'); - } - } - } - - &:active { - color: var-get($icon-theme, 'active-foreground'); - background: var-get($icon-theme, 'active-background'); - border-color: var-get($flat-theme, 'active-border-color'); - } - - &:focus-visible { - color: var-get($icon-theme, 'focus-visible-foreground'); - background: var-get($icon-theme, 'focus-visible-background'); - border-color: var-get($icon-theme, 'focus-visible-border-color') ; - - &:hover { - color: var-get($icon-theme, 'hover-foreground'); - background: var-get($icon-theme, 'hover-background'); - border-color: var-get($icon-theme, 'focus-visible-border-color'); - } - - &:active { - color: var-get($icon-theme, 'active-foreground'); - background: var-get($icon-theme, 'active-background'); - border-color: var-get($icon-theme, 'focus-visible-border-color'); - } - } - - &:focus, - &:active { - @if $variant == 'material' or $variant == 'fluent' { - box-shadow: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color'), $icon-shadow; - } @else { - box-shadow: $icon-shadow; - } - } - } - %igx-button--disabled { background: var-get($flat-theme, 'disabled-background'); color: var-get($flat-theme, 'disabled-foreground'); diff --git a/src/app/button/button.sample.html b/src/app/button/button.sample.html index 61e0785962b..d5722adb446 100644 --- a/src/app/button/button.sample.html +++ b/src/app/button/button.sample.html @@ -24,25 +24,25 @@

Flat Buttons

-

Raised Buttons

+

Contained Buttons

- +
- +
- +
- +
- +
- +
@@ -111,32 +111,32 @@

Floating Action Buttons

Icon Buttons

-
-
-
-
-
-
@@ -170,12 +170,12 @@

Buttons based on Display Density

- +
-
diff --git a/src/app/button/button.sample.ts b/src/app/button/button.sample.ts index da6ab5f45c3..127b5f09f27 100644 --- a/src/app/button/button.sample.ts +++ b/src/app/button/button.sample.ts @@ -1,5 +1,5 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import { DisplayDensity, IgxButtonDirective, IgxButtonGroupComponent, IgxIconComponent } from 'igniteui-angular'; +import { DisplayDensity, IgxButtonDirective, IgxButtonGroupComponent, IgxIconButtonDirective, IgxIconComponent } from 'igniteui-angular'; @Component({ selector: 'app-button-sample', @@ -7,7 +7,7 @@ import { DisplayDensity, IgxButtonDirective, IgxButtonGroupComponent, IgxIconCom templateUrl: 'button.sample.html', encapsulation: ViewEncapsulation.None, standalone: true, - imports: [IgxButtonDirective, IgxIconComponent, IgxButtonGroupComponent] + imports: [IgxButtonDirective, IgxIconComponent, IgxButtonGroupComponent, IgxIconButtonDirective] }) export class ButtonSampleComponent implements OnInit { public density: DisplayDensity = 'comfortable'; From 168aebe2715c966eb7d1a43e054ddbd448a85877 Mon Sep 17 00:00:00 2001 From: sivanova Date: Wed, 15 Nov 2023 09:44:48 +0200 Subject: [PATCH 03/21] feat(icon-button): typography and NgModule --- .../src/lib/core/styles/typography/_bootstrap.scss | 2 ++ .../src/lib/core/styles/typography/_fluent.scss | 2 ++ .../src/lib/core/styles/typography/_indigo.scss | 2 ++ .../src/lib/core/styles/typography/_material.scss | 2 ++ .../src/lib/directives/button/icon-button.module.ts | 12 ++++++++++++ projects/igniteui-angular/src/public_api.ts | 2 ++ 6 files changed, 22 insertions(+) create mode 100644 projects/igniteui-angular/src/lib/directives/button/icon-button.module.ts diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index 3903733d659..29c08474add 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -13,6 +13,7 @@ @use '../components/drop-down/drop-down-theme' as *; @use '../components/expansion-panel/expansion-panel-theme' as *; @use '../components/grid/excel-filtering-theme' as *; +@use '../components/icon-button/icon-button-theme' as *; @use '../components/input/input-group-theme' as *; @use '../components/list/list-theme' as *; @use '../components/navbar/navbar-theme' as *; @@ -69,6 +70,7 @@ body: 'body-1' )); @include excel-filtering-typography(); + @include icon-button-typography(); @include input-group-typography($categories: ( helper-text: 'body-2', input-text: 'body-1' diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index a779f2e4dc3..c366bee4133 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -12,6 +12,7 @@ @use '../components/drop-down/drop-down-theme' as *; @use '../components/expansion-panel/expansion-panel-theme' as *; @use '../components/grid/excel-filtering-theme' as *; +@use '../components/icon-button/icon-button-theme' as *; @use '../components/input/input-group-theme' as *; @use '../components/list/list-theme' as *; @use '../components/navbar/navbar-theme' as *; @@ -57,6 +58,7 @@ body: 'caption' )); @include excel-filtering-typography(); + @include icon-button-typography(); @include input-group-typography($categories: ( helper-text: 'caption', input-text: 'body-2' diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index 0b03f1dfbda..cdf309fd5fc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -12,6 +12,7 @@ @use '../components/drop-down/drop-down-theme' as *; @use '../components/expansion-panel/expansion-panel-theme' as *; @use '../components/grid/excel-filtering-theme' as *; +@use '../components/icon-button/icon-button-theme' as *; @use '../components/input/input-group-theme' as *; @use '../components/list/list-theme' as *; @use '../components/navbar/navbar-theme' as *; @@ -48,6 +49,7 @@ body: 'body-1' )); @include excel-filtering-typography(); + @include icon-button-typography(); @include input-group-typography($categories: ( helper-text: 'caption', input-text: 'body-1' diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index 2cae77fbb7e..76f482be5a1 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -12,6 +12,7 @@ @use '../components/drop-down/drop-down-theme' as *; @use '../components/expansion-panel/expansion-panel-theme' as *; @use '../components/grid/excel-filtering-theme' as *; +@use '../components/icon-button/icon-button-theme' as *; @use '../components/input/input-group-theme' as *; @use '../components/list/list-theme' as *; @use '../components/navbar/navbar-theme' as *; @@ -42,6 +43,7 @@ @include drop-down-typography(); @include expansion-panel-typography(); @include excel-filtering-typography(); + @include icon-button-typography(); @include input-group-typography(); @include list-typography(); @include navbar-typography(); diff --git a/projects/igniteui-angular/src/lib/directives/button/icon-button.module.ts b/projects/igniteui-angular/src/lib/directives/button/icon-button.module.ts new file mode 100644 index 00000000000..14f354f0aa5 --- /dev/null +++ b/projects/igniteui-angular/src/lib/directives/button/icon-button.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { IgxIconButtonDirective } from './icon-button.directive'; + +/** + * @hidden + * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components + */ +@NgModule({ + imports: [IgxIconButtonDirective], + exports: [IgxIconButtonDirective] +}) +export class IgxIconButtonModule {} diff --git a/projects/igniteui-angular/src/public_api.ts b/projects/igniteui-angular/src/public_api.ts index 8d806987eef..f7ab3bc85b2 100644 --- a/projects/igniteui-angular/src/public_api.ts +++ b/projects/igniteui-angular/src/public_api.ts @@ -20,6 +20,7 @@ export * from './lib/directives/filter/filter.directive'; export * from './lib/directives/focus/focus.directive'; export * from './lib/directives/focus-trap/focus-trap.directive'; export * from './lib/directives/for-of/for_of.directive'; +export * from './lib/directives/button/icon-button.directive'; export * from './lib/directives/layout/layout.directive'; export * from './lib/directives/mask/mask.directive'; export * from './lib/directives/radio/public_api'; @@ -154,6 +155,7 @@ export * from './lib/directives/focus/focus.module'; export * from './lib/directives/focus-trap/focus-trap.module'; export * from './lib/directives/for-of/for_of.module'; export * from './lib/directives/form-control/form-control.module'; +export * from './lib/directives/button/icon-button.module'; export * from './lib/directives/layout/layout.module'; export * from './lib/directives/mask/mask.module'; export * from './lib/directives/radio/radio-group.module'; From 7f45586bb7e22fef2b903cc75c6ba90131b0b3f6 Mon Sep 17 00:00:00 2001 From: sivanova Date: Wed, 15 Nov 2023 16:28:10 +0200 Subject: [PATCH 04/21] test(icon button): test functionality & update button tests --- .../button/button.directive.spec.ts | 45 +++------ .../button/icon-button.directive.spec.ts | 91 +++++++++++++++++++ src/app/button/button.sample.html | 10 +- src/app/button/button.sample.ts | 15 ++- 4 files changed, 122 insertions(+), 39 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/directives/button/icon-button.directive.spec.ts diff --git a/projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts index fbc5dd355e1..bd8608539f4 100644 --- a/projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts @@ -18,10 +18,9 @@ describe('IgxButton', () => { const baseClass = BUTTON_COMFORTABLE; const classes = { flat: `${baseClass}--flat`, - raised: `${baseClass}--raised`, + contained: `${baseClass}--contained`, outlined: `${baseClass}--outlined`, fab: `${baseClass}--fab`, - icon: `${baseClass}--icon` }; beforeAll(waitForAsync(() => { @@ -50,7 +49,7 @@ describe('IgxButton', () => { const button = fixture.debugElement.query(By.css('span')).nativeElement; expect(button).toBeTruthy(); - expect(button.classList.contains('igx-button--raised')).toBe(true); + expect(button.classList.contains('igx-button--contained')).toBe(true); expect(button.classList.contains('igx-button--disabled')).toBe(true); fixture.componentInstance.disabled = false; @@ -75,42 +74,36 @@ describe('IgxButton', () => { // Get flat button const flatButton = fixture.componentInstance.flatButton; const flatButtonDOM = fixture.debugElement.query(By.css('.flatBtn')); - // Get raised button - const raisedButton = fixture.componentInstance.raisedButton; - const raisedButtonDOM = fixture.debugElement.query(By.css('.raisedBtn')); + // Get contained button + const containedButton = fixture.componentInstance.containedButton; + const containedButtonDOM = fixture.debugElement.query(By.css('.containedBtn')); // Get outlined button const outlinedButton = fixture.componentInstance.outlinedButton; const outlinedButtonDOM = fixture.debugElement.query(By.css('.outlinedBtn')); // Get fab button const fabButton = fixture.componentInstance.fabButton; const fabButtonDOM = fixture.debugElement.query(By.css('.fabBtn')); - // Get icon button - const iconButton = fixture.componentInstance.iconButton; - const iconButtonDOM = fixture.debugElement.query(By.css('.iconBtn')); verifyDisplayDensity(flatButton, flatButtonDOM, DisplayDensity.comfortable); - verifyDisplayDensity(raisedButton, raisedButtonDOM, DisplayDensity.comfortable); + verifyDisplayDensity(containedButton, containedButtonDOM, DisplayDensity.comfortable); verifyDisplayDensity(outlinedButton, outlinedButtonDOM, DisplayDensity.comfortable); verifyDisplayDensity(fabButton, fabButtonDOM, DisplayDensity.comfortable); - verifyDisplayDensity(iconButton, iconButtonDOM, DisplayDensity.comfortable); fixture.componentInstance.density = DisplayDensity.compact; fixture.detectChanges(); verifyDisplayDensity(flatButton, flatButtonDOM, DisplayDensity.compact); - verifyDisplayDensity(raisedButton, raisedButtonDOM, DisplayDensity.compact); + verifyDisplayDensity(containedButton, containedButtonDOM, DisplayDensity.compact); verifyDisplayDensity(outlinedButton, outlinedButtonDOM, DisplayDensity.compact); verifyDisplayDensity(fabButton, fabButtonDOM, DisplayDensity.compact); - verifyDisplayDensity(iconButton, iconButtonDOM, DisplayDensity.compact); fixture.componentInstance.density = DisplayDensity.cosy; fixture.detectChanges(); verifyDisplayDensity(flatButton, flatButtonDOM, DisplayDensity.cosy); - verifyDisplayDensity(raisedButton, raisedButtonDOM, DisplayDensity.cosy); + verifyDisplayDensity(containedButton, containedButtonDOM, DisplayDensity.cosy); verifyDisplayDensity(outlinedButton, outlinedButtonDOM, DisplayDensity.cosy); verifyDisplayDensity(fabButton, fabButtonDOM, DisplayDensity.cosy); - verifyDisplayDensity(iconButton, iconButtonDOM, DisplayDensity.cosy); }); it('Should set the correct CSS class on the element using the "type" input', () => { @@ -121,10 +114,10 @@ describe('IgxButton', () => { expect(theButtonNativeEl.classList.length).toEqual(2); expect(theButtonNativeEl.classList).toContain(classes.flat); - theButton.type = 'raised'; + theButton.type = 'contained'; fixture.detectChanges(); expect(theButtonNativeEl.classList.length).toEqual(2); - expect(theButtonNativeEl.classList).toContain(classes.raised); + expect(theButtonNativeEl.classList).toContain(classes.contained); theButton.type = 'outlined'; fixture.detectChanges(); @@ -136,11 +129,6 @@ describe('IgxButton', () => { expect(theButtonNativeEl.classList.length).toEqual(2); expect(theButtonNativeEl.classList).toContain(classes.fab); - theButton.type = 'icon'; - fixture.detectChanges(); - expect(theButtonNativeEl.classList.length).toEqual(2); - expect(theButtonNativeEl.classList).toContain(classes.icon); - theButton.type = 'flat'; fixture.detectChanges(); expect(theButtonNativeEl.classList.length).toEqual(2); @@ -161,7 +149,7 @@ class InitButtonComponent { } @Component({ - template: `Test`, @@ -177,14 +165,11 @@ class ButtonWithAttribsComponent { @Component({ template: ` - + - `, standalone: true, imports: [IgxButtonDirective, IgxIconComponent] @@ -192,14 +177,12 @@ class ButtonWithAttribsComponent { class ButtonsWithDisplayDensityComponent { @ViewChild('flat', { read: IgxButtonDirective, static: true }) public flatButton: IgxButtonDirective; - @ViewChild('raised', { read: IgxButtonDirective, static: true }) - public raisedButton: IgxButtonDirective; + @ViewChild('contained', { read: IgxButtonDirective, static: true }) + public containedButton: IgxButtonDirective; @ViewChild('outlined', { read: IgxButtonDirective, static: true }) public outlinedButton: IgxButtonDirective; @ViewChild('fab', { read: IgxButtonDirective, static: true }) public fabButton: IgxButtonDirective; - @ViewChild('icon', { read: IgxButtonDirective, static: true }) - public iconButton: IgxButtonDirective; public density: DisplayDensity = DisplayDensity.comfortable; } diff --git a/projects/igniteui-angular/src/lib/directives/button/icon-button.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/button/icon-button.directive.spec.ts new file mode 100644 index 00000000000..9d9960b04db --- /dev/null +++ b/projects/igniteui-angular/src/lib/directives/button/icon-button.directive.spec.ts @@ -0,0 +1,91 @@ +import { TestBed, waitForAsync } from '@angular/core/testing'; +import { configureTestSuite } from '../../test-utils/configure-suite'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { Component, ViewChild } from '@angular/core'; +import { IgxIconButtonDirective } from './icon-button.directive'; +import { IgxRippleDirective } from '../ripple/ripple.directive'; +import { By } from '@angular/platform-browser'; +import { IgxIconComponent } from '../../icon/icon.component'; + +describe('IgxIconButton', () => { + configureTestSuite(); + + const baseClass = 'igx-icon-button'; + const classes = { + flat: `${baseClass}--flat`, + contained: `${baseClass}--contained`, + outlined: `${baseClass}--outlined`, + }; + + beforeAll(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [ + NoopAnimationsModule, + IconButtonComponent + ] + }).compileComponents(); + })); + + it('Should properly initialize an icon button', () => { + const fixture = TestBed.createComponent(IconButtonComponent); + fixture.detectChanges(); + + expect(fixture.debugElement.query(By.css('button.igx-icon-button--contained'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('igx-icon.material-icons'))).toBeTruthy(); + }); + + it('Should properly disabled/enable an icon button', () => { + const fixture = TestBed.createComponent(IconButtonComponent); + fixture.detectChanges(); + + const button = fixture.componentInstance.button; + expect(button.nativeElement.classList.contains('igx-button--disabled')).toBe(false); + + button.disabled = true; + fixture.detectChanges(); + + expect(button.nativeElement.classList.contains('igx-button--disabled')).toBe(true); + + button.disabled = false; + fixture.detectChanges(); + + expect(button.nativeElement.classList.contains('igx-button--disabled')).toBe(false); + }); + + it('Should properly set the correct CSS class on the element using the type input', () => { + const fixture = TestBed.createComponent(IconButtonComponent); + fixture.detectChanges(); + + const button = fixture.componentInstance.button; + const buttonNativeEl = button.nativeElement; + expect(buttonNativeEl.classList.length).toEqual(2); + expect(buttonNativeEl.classList).toContain(classes.contained); + + button.type = 'flat'; + fixture.detectChanges(); + expect(buttonNativeEl.classList.length).toEqual(2); + expect(buttonNativeEl.classList).toContain(classes.flat); + + button.type = 'outlined'; + fixture.detectChanges(); + expect(buttonNativeEl.classList.length).toEqual(2); + expect(buttonNativeEl.classList).toContain(classes.outlined); + + button.type = 'contained'; + fixture.detectChanges(); + expect(buttonNativeEl.classList.length).toEqual(2); + expect(buttonNativeEl.classList).toContain(classes.contained); + }); +}); + +@Component({ + template: ``, + standalone: true, + imports: [IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] +}) +class IconButtonComponent { + @ViewChild(IgxIconButtonDirective, { read: IgxIconButtonDirective, static: true }) + public button: IgxIconButtonDirective; +} diff --git a/src/app/button/button.sample.html b/src/app/button/button.sample.html index d5722adb446..1ae89e9d18f 100644 --- a/src/app/button/button.sample.html +++ b/src/app/button/button.sample.html @@ -112,22 +112,22 @@

Icon Buttons

-
-
diff --git a/src/app/button/button.sample.ts b/src/app/button/button.sample.ts index 127b5f09f27..cff8d35c13b 100644 --- a/src/app/button/button.sample.ts +++ b/src/app/button/button.sample.ts @@ -1,5 +1,6 @@ -import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import { DisplayDensity, IgxButtonDirective, IgxButtonGroupComponent, IgxIconButtonDirective, IgxIconComponent } from 'igniteui-angular'; +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { Router } from '@angular/router'; +import { DisplayDensity, IgxButtonDirective, IgxButtonGroupComponent, IgxIconButtonDirective, IgxIconComponent, IgxIconService, IgxRippleDirective } from 'igniteui-angular'; @Component({ selector: 'app-button-sample', @@ -7,13 +8,21 @@ import { DisplayDensity, IgxButtonDirective, IgxButtonGroupComponent, IgxIconBut templateUrl: 'button.sample.html', encapsulation: ViewEncapsulation.None, standalone: true, - imports: [IgxButtonDirective, IgxIconComponent, IgxButtonGroupComponent, IgxIconButtonDirective] + imports: [IgxButtonDirective, IgxIconComponent, IgxButtonGroupComponent, IgxIconButtonDirective, IgxRippleDirective] }) export class ButtonSampleComponent implements OnInit { + @ViewChild('inactive', { read: IgxIconButtonDirective, static: true }) + public inactiveBtn: IgxIconButtonDirective; + public density: DisplayDensity = 'comfortable'; public displayDensities; + constructor(private _iconService: IgxIconService, public router: Router) {} + public ngOnInit(): void { + this.inactiveBtn.disabled = true; + this._iconService.addSvgIcon('copy', '/assets/svg/filtering/copy.svg', '', true); + this.displayDensities = [ { label: 'comfortable', selected: this.density === 'comfortable', togglable: true }, { label: 'cosy', selected: this.density === 'cosy', togglable: true }, From 3ccb4fbe522d957ac2bf9cec21c6421f68b7f9f8 Mon Sep 17 00:00:00 2001 From: sivanova Date: Thu, 16 Nov 2023 14:17:03 +0200 Subject: [PATCH 05/21] feat(icon-button): add migrations --- .../migrations/migration-collection.json | 5 + .../migrations/update-17_1_0/index.spec.ts | 110 ++++++++++++++++++ .../migrations/update-17_1_0/index.ts | 64 ++++++++++ 3 files changed, 179 insertions(+) create mode 100644 projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts create mode 100644 projects/igniteui-angular/migrations/update-17_1_0/index.ts diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json index af14c6eb16a..b5542287a41 100644 --- a/projects/igniteui-angular/migrations/migration-collection.json +++ b/projects/igniteui-angular/migrations/migration-collection.json @@ -160,6 +160,11 @@ "version": "17.0.0", "description": "Updates Ignite UI for Angular from v16.1.x to v17.0.0", "factory": "./update-17_0_0" + }, + "migration-33": { + "version": "17.1.0", + "description": "Updates Ignite UI for Angular from v17.0.x to v17.1.0", + "factory": "./update-17_1_0" } } } diff --git a/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts b/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts new file mode 100644 index 00000000000..327583aeb24 --- /dev/null +++ b/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts @@ -0,0 +1,110 @@ +import * as path from 'path'; + +import { EmptyTree } from '@angular-devkit/schematics'; +import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'; + +const version = '17.1.0'; + +fdescribe(`Update to ${version}`, () => { + let appTree: UnitTestTree; + const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json')); + + const configJson = { + projects: { + testProj: { + root: '/', + sourceRoot: '/testSrc' + } + }, + schematics: { + '@schematics/angular:component': { + prefix: 'appPrefix' + } + } + }; + + beforeEach(() => { + appTree = new UnitTestTree(new EmptyTree()); + appTree.create('/angular.json', JSON.stringify(configJson)); + }); + + const migrationName = 'migration-33'; + + it('should rename raised to contained type in all components with igxButton="raised"', async () => { + appTree.create(`/testSrc/appPrefix/component/test.component.html`, + ` + + + Go Back + + ` + ); + + const tree = await schematicRunner.runSchematic(migrationName, {}, appTree); + + expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual( + ` + + + Go Back + + ` + ); + }); + + it('should not rename outlined and flat type buttons', async () => { + appTree.create(`/testSrc/appPrefix/component/test.component.html`, + ` + + + ` + ); + + const tree = await schematicRunner.runSchematic(migrationName, {}, appTree); + + expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual( + ` + + + ` + ); + }); + + it('should replace buttons of icon type with icon buttons of flat type ', async () => { + appTree.create(`/testSrc/appPrefix/component/test.component.html`, + ` + + + favorite + + ` + ); + + const tree = await schematicRunner.runSchematic(migrationName, {}, appTree); + + expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual( + ` + + + favorite + + ` + ); + }); +}); diff --git a/projects/igniteui-angular/migrations/update-17_1_0/index.ts b/projects/igniteui-angular/migrations/update-17_1_0/index.ts new file mode 100644 index 00000000000..7d3d0a68b4b --- /dev/null +++ b/projects/igniteui-angular/migrations/update-17_1_0/index.ts @@ -0,0 +1,64 @@ +import { + Rule, + SchematicContext, + Tree +} from '@angular-devkit/schematics'; +import { UpdateChanges } from '../common/UpdateChanges'; +import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile } from '../common/util'; +import { nativeImport } from '../common/import-helper.js'; +import { Element } from '@angular/compiler'; + +const version = '17.1.0'; + +export default (): Rule => async (host: Tree, context: SchematicContext) => { + context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); + const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler'); + const update = new UpdateChanges(__dirname, host, context); + const changes = new Map(); + const tags = ['button', 'span', 'a'] + const type = ['igxButton']; + + const applyChanges = () => { + for (const [path, change] of changes.entries()) { + let buffer = host.read(path).toString(); + + change.sort((c, c1) => c.position - c1.position) + .reverse() + .forEach(c => buffer = c.apply(buffer)); + + host.overwrite(path, buffer); + } + }; + + const addChange = (path: string, change: FileChange) => { + if (changes.has(path)) { + changes.get(path).push(change); + } else { + changes.set(path, [change]); + } + }; + + for (const path of update.templateFiles) { + const components = findElementNodes(parseFile(new HtmlParser(), host, path), tags); + components + .filter(node => hasAttribute(node as Element, type)) + .map(node => getSourceOffset(node as Element)) + .forEach(offset => { + const { startTag, file, node } = offset; + const { name, value } = getAttribute(node, type)[0]; + const repTxt = file.content.substring(startTag.start, startTag.end - 1); + const btn = `${name}="${value}"`; + const iconBtn = `igxIconButton="flat"` + if (value === 'raised') { + const renameType = repTxt.replace(`raised`, `contained`); + addChange(file.url, new FileChange(startTag.start, renameType, repTxt, 'replace')); + } else if (value === 'icon') { + const removePropTxt = repTxt.replace(btn, iconBtn); + addChange(file.url, new FileChange(startTag.start, removePropTxt, repTxt, 'replace')); + } + }); + } + + applyChanges(); + update.applyChanges(); +}; \ No newline at end of file From 5f4936e51214c4f34fc79ef57a585462bef005c4 Mon Sep 17 00:00:00 2001 From: sivanova Date: Thu, 16 Nov 2023 15:13:10 +0200 Subject: [PATCH 06/21] docs(*): update changelog --- CHANGELOG.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8da12ab97c8..40350795fde 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,15 @@ All notable changes for each version of this project will be documented in this file. +## 17.1.0 +### New Features +- New directive - `igxIconButton` directive that provides a way to use an icon as a fully functional button has been added. The new `igxIconButton` comes in three types - flat, outlined and contained (default). All `igxButton`'s with type `icon` will be automatically migrated to the new `igxIconButton`'s with `ng update`. + +### General +- `igxButton`: + - **Breaking Change** The `raised` type of the `igxButton` directive has been renamed to `contained`. Automatic migrations are available and will be applied on `ng update`. + - The `igxButtonColor` and `igxButtonBackground` input properties have been deprecated and will be removed in a future version. + ## 17.0.0 ### General - `IgxCard` From 4674571e7979120e5968bcbf7b9fdba8854ba63a Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 21 Nov 2023 01:45:44 +0200 Subject: [PATCH 07/21] fix(icon-button): remove icon button module --- .../migrations/update-17_1_0/index.spec.ts | 6 ++ .../migrations/update-17_1_0/index.ts | 2 +- .../icon-button/_icon-button-theme.scss | 64 ++++++++++++++++--- .../directives/button/icon-button.module.ts | 12 ---- projects/igniteui-angular/src/public_api.ts | 1 - 5 files changed, 62 insertions(+), 23 deletions(-) delete mode 100644 projects/igniteui-angular/src/lib/directives/button/icon-button.module.ts diff --git a/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts b/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts index 327583aeb24..70d90f01fe5 100644 --- a/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts +++ b/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts @@ -39,6 +39,9 @@ fdescribe(`Update to ${version}`, () => { Go Back +
+ Button +
` ); @@ -52,6 +55,9 @@ fdescribe(`Update to ${version}`, () => { Go Back +
+ Button +
` ); }); diff --git a/projects/igniteui-angular/migrations/update-17_1_0/index.ts b/projects/igniteui-angular/migrations/update-17_1_0/index.ts index 7d3d0a68b4b..206171683be 100644 --- a/projects/igniteui-angular/migrations/update-17_1_0/index.ts +++ b/projects/igniteui-angular/migrations/update-17_1_0/index.ts @@ -15,7 +15,7 @@ export default (): Rule => async (host: Tree, context: SchematicContext) => { const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler'); const update = new UpdateChanges(__dirname, host, context); const changes = new Map(); - const tags = ['button', 'span', 'a'] + const tags = ['button', 'span', 'a', 'div'] const type = ['igxButton']; const applyChanges = () => { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss index 655a16d2941..62d86e7cd67 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss @@ -52,6 +52,30 @@ $variant: map.get($schema, '_meta', 'theme'); } + @if not($foreground) and $background { + $foreground: text-contrast($background); + } + + @if not($hover-background) and $background { + @if meta.type-of($background) == 'color' { + $hover-background: color.scale($background, $lightness: 5%); + } + } + + @if not($hover-foreground) and $hover-background { + @if meta.type-of($hover-background) == 'color' { + $hover-foreground: text-contrast($hover-background); + } + } + + @if not($focus-background) and $background { + $focus-background: color.scale($background, $lightness: 5%); + } + + @if not($focus-foreground) and $focus-background { + $focus-foreground: text-contrast($focus-background); + } + $themes: map.merge($themes, ( $_name: extend( digest-schema($_schema), ( name: $name, @@ -166,8 +190,8 @@ pointer-events: none; top: 2px; left: 2px; - width: calc(100% - (#{$outline-btn-indent} * 2)); - height: calc(100% - (#{$outline-btn-indent} * 2)); + width: calc(100% - (#{$outline-btn-indent * 2})); + height: calc(100% - (#{$outline-btn-indent * 2})); border-radius: calc(#{var-get($flat-theme, 'border-radius')} - #{$outline-btn-indent * 2}); } } @@ -191,10 +215,12 @@ background: var-get($flat-theme, 'focus-background'); color: var-get($flat-theme, 'focus-foreground'); border-color: var-get($flat-theme, 'focus-border-color'); + } - @if ($variant == 'fluent') { - border: none; - + @if ($variant == 'fluent') { + border: none; + + &:focus-visible { &::after { box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-border-color'); } @@ -224,6 +250,10 @@ border: rem(1px) solid var-get($contained-theme, 'border-color'); border-radius: var-get($contained-theme, 'border-radius'); + @if ($variant == 'bootstrap') { + border: none; + } + &:hover { background: var-get($contained-theme, 'hover-background'); color: var-get($contained-theme, 'hover-foreground'); @@ -233,11 +263,14 @@ &:focus-visible { background: var-get($contained-theme, 'focus-background'); color: var-get($contained-theme, 'focus-foreground'); - border-color: var-get($contained-theme, 'focus-border-color'); - @if ($variant == 'fluent') { - border: none; + @if ($variant != 'fluent') { + border-color: var-get($contained-theme, 'focus-border-color'); + } + } + &:focus-visible { + @if ($variant == 'fluent') { &::after { box-shadow: 0 0 0 rem(1px) var-get($contained-theme, 'focus-border-color'); } @@ -275,6 +308,11 @@ border-width: rem(2px); } + @if ($variant == 'bootstrap') { + border: none; + box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'border-color'); + } + &:hover { background: var-get($outlined-theme, 'hover-background'); color: var-get($outlined-theme, 'hover-foreground'); @@ -285,7 +323,9 @@ background: var-get($outlined-theme, 'focus-background'); color: var-get($outlined-theme, 'focus-foreground'); border-color: var-get($outlined-theme, 'focus-border-color'); + } + &:focus-visible { @if ($variant == 'fluent') { &::after { box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-border-color'); @@ -293,6 +333,12 @@ } } + &:focus:hover { + @if $variant == 'fluent' or $variant == 'indigo-design' { + background: var-get($outlined-theme, 'hover-background'); + } + } + &:active { background: var-get($outlined-theme, 'active-background'); color: var-get($outlined-theme, 'active-foreground'); @@ -315,7 +361,7 @@ %igx-button--disabled { background: var-get($flat-theme, 'disabled-background'); color: var-get($flat-theme, 'disabled-foreground'); - border-color: var-get($flat-theme, 'disabled-border-color'); + border: rem(1px) solid var-get($flat-theme, 'disabled-border-color'); pointer-events: none; box-shadow: none; diff --git a/projects/igniteui-angular/src/lib/directives/button/icon-button.module.ts b/projects/igniteui-angular/src/lib/directives/button/icon-button.module.ts deleted file mode 100644 index 14f354f0aa5..00000000000 --- a/projects/igniteui-angular/src/lib/directives/button/icon-button.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NgModule } from '@angular/core'; -import { IgxIconButtonDirective } from './icon-button.directive'; - -/** - * @hidden - * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components - */ -@NgModule({ - imports: [IgxIconButtonDirective], - exports: [IgxIconButtonDirective] -}) -export class IgxIconButtonModule {} diff --git a/projects/igniteui-angular/src/public_api.ts b/projects/igniteui-angular/src/public_api.ts index f7ab3bc85b2..607db5eb1af 100644 --- a/projects/igniteui-angular/src/public_api.ts +++ b/projects/igniteui-angular/src/public_api.ts @@ -155,7 +155,6 @@ export * from './lib/directives/focus/focus.module'; export * from './lib/directives/focus-trap/focus-trap.module'; export * from './lib/directives/for-of/for_of.module'; export * from './lib/directives/form-control/form-control.module'; -export * from './lib/directives/button/icon-button.module'; export * from './lib/directives/layout/layout.module'; export * from './lib/directives/mask/mask.module'; export * from './lib/directives/radio/radio-group.module'; From 979aa09480d19e40a345a55c1412275e9d4f3ca3 Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 21 Nov 2023 13:59:40 +0200 Subject: [PATCH 08/21] build(*): update theming package --- package-lock.json | 8 ++++---- package.json | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 86e1fa4e13d..68f02ecce99 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "@types/source-map": "0.5.2", "fflate": "^0.7.3", "hammerjs": "^2.0.8", - "igniteui-theming": "^3.3.0", + "igniteui-theming": "^4.0.0-beta.1", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^6.6.7", @@ -12113,9 +12113,9 @@ } }, "node_modules/igniteui-theming": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-3.3.1.tgz", - "integrity": "sha512-kFQQ2nE9/SorRx1RvGE9kWq6q8tNpzF1GoRd2A+ZRZW67X6H38dXy5MT1ctOqsUlsHFiw3taxlBv9EYjF+VwHw==", + "version": "4.0.0-beta.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-4.0.0-beta.1.tgz", + "integrity": "sha512-S8lQwGlRnNJXUYi6f5tlGw1+s3G5nzaK+KUqvqsaczGAJ8I4tfa0Dj2DJAQCd4p+kmT6DKdVlYvx80vvmwNk9g==", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index b12ace865e8..be30070a085 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "@types/source-map": "0.5.2", "fflate": "^0.7.3", "hammerjs": "^2.0.8", - "igniteui-theming": "^3.3.0", + "igniteui-theming": "^4.0.0-beta.1", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^6.6.7", @@ -132,4 +132,4 @@ "typedoc-plugin-localization": "^3.0.3", "typescript": "5.2.2" } -} \ No newline at end of file +} From f867a8bbd2843ab01262a42d20b054ea2050541f Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 21 Nov 2023 14:47:11 +0200 Subject: [PATCH 09/21] fix(icon-button): missing property --- .../src/lib/directives/button/button-base.ts | 18 ++++++++++++++++-- .../lib/directives/button/button.directive.ts | 13 +++---------- 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/button/button-base.ts b/projects/igniteui-angular/src/lib/directives/button/button-base.ts index bab497c0be7..16e998338cd 100644 --- a/projects/igniteui-angular/src/lib/directives/button/button-base.ts +++ b/projects/igniteui-angular/src/lib/directives/button/button-base.ts @@ -1,5 +1,5 @@ -import { Directive, EventEmitter, HostBinding, HostListener, Input, Output, booleanAttribute } from '@angular/core'; -import { DisplayDensityBase } from '../../core/density'; +import { Directive, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, Optional, Output, booleanAttribute } from '@angular/core'; +import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../../core/density'; @Directive() export abstract class IgxButtonBaseDirective extends DisplayDensityBase { @@ -50,4 +50,18 @@ export abstract class IgxButtonBaseDirective extends DisplayDensityBase { public get disabledAttribute() { return this.disabled ? this.disabled : null; } + + constructor( + public element: ElementRef, + @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions + ) { + super(_displayDensityOptions, element); + } + + /** + * Returns the underlying DOM element. + */ + public get nativeElement() { + return this.element.nativeElement; + } } diff --git a/projects/igniteui-angular/src/lib/directives/button/button.directive.ts b/projects/igniteui-angular/src/lib/directives/button/button.directive.ts index 5f6b08a1f90..9a5d1c60d08 100644 --- a/projects/igniteui-angular/src/lib/directives/button/button.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/button/button.directive.ts @@ -124,18 +124,11 @@ export class IgxButtonDirective extends IgxButtonBaseDirective { } constructor( - public element: ElementRef, + public override element: ElementRef, + @Optional() @Inject(DisplayDensityToken) protected override _displayDensityOptions: IDisplayDensityOptions, private _renderer: Renderer2, - @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions ) { - super(_displayDensityOptions, element); - } - - /** - * Returns the underlying DOM element. - */ - public get nativeElement() { - return this.element.nativeElement; + super(element, _displayDensityOptions); } /** From 79db4fb1f6b046eec6652aa059d870f8acedc1af Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Tue, 21 Nov 2023 14:58:22 +0200 Subject: [PATCH 10/21] Update index.spec.ts --- .../igniteui-angular/migrations/update-17_1_0/index.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts b/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts index 70d90f01fe5..c5af7e551ce 100644 --- a/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts +++ b/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts @@ -5,7 +5,7 @@ import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/te const version = '17.1.0'; -fdescribe(`Update to ${version}`, () => { +describe(`Update to ${version}`, () => { let appTree: UnitTestTree; const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json')); From 9790690426b072c2d13dd057dc1ef12421815da9 Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 21 Nov 2023 15:20:48 +0200 Subject: [PATCH 11/21] refactor(button): rename raised buttons --- .../src/lib/banner/banner.component.spec.ts | 6 +- .../src/lib/banner/banner.component.ts | 4 +- .../buttonGroup/buttongroup.component.spec.ts | 2 +- .../src/lib/combo/combo.common.ts | 2 +- .../src/lib/dialog/dialog.component.spec.ts | 16 ++--- .../src/lib/dialog/dialog.component.ts | 16 ++--- .../src/lib/directives/button/README.md | 2 +- .../src/lib/directives/ripple/README.md | 2 +- .../advanced-filtering-dialog.component.html | 2 +- .../excel-style-custom-dialog.component.html | 2 +- .../excel-style-search.component.html | 2 +- .../src/lib/grids/grid/column.spec.ts | 2 +- .../lib/grids/grid/grid-filtering-ui.spec.ts | 12 ++-- .../src/lib/grids/grid/grid.component.html | 2 +- .../hierarchical-grid.component.html | 2 +- .../grids/tree-grid/tree-grid.component.html | 2 +- .../input-group/input-group.component.html | 2 +- .../src/lib/select/select.component.spec.ts | 2 +- .../src/lib/test-utils/grid-functions.spec.ts | 12 ++-- .../hierarchical-grid-components.spec.ts | 6 +- src/app/autocomplete/autocomplete.sample.html | 2 +- src/app/banner/banner.sample.html | 2 +- src/app/buttonGroup/buttonGroup.sample.html | 4 +- .../calendar-views/calendar-views.sample.html | 2 +- src/app/calendar/calendar.sample.html | 42 ++++++------- src/app/card/card.sample.html | 2 +- src/app/carousel/carousel.sample.html | 12 ++-- src/app/combo/combo.sample.html | 6 +- src/app/date-picker/date-picker.sample.html | 18 +++--- src/app/date-range/date-range.sample.html | 8 +-- src/app/dialog/dialog.sample.html | 18 +++--- src/app/drag-drop/drag-drop.sample.html | 16 ++--- src/app/drop-down/drop-down.sample.html | 2 +- src/app/grid-add-row/grid-add-row.sample.html | 10 ++-- .../grid-auto-size/grid-auto-size.sample.html | 24 ++++---- .../grid-cellEditing.component.html | 22 +++---- .../grid-cellEditing.component.scss | 2 +- .../grid-column-groups.sample.html | 8 +-- .../grid-column-groups.sample.scss | 2 +- .../grid-column-moving.sample.html | 22 +++---- .../grid-column-pinning.sample.html | 28 ++++----- .../grid-column-resizing.sample.html | 8 +-- .../grid-column-selection.sample.html | 14 ++--- .../grid-external-filtering.sample.html | 6 +- .../grid-filtering/grid-filtering.sample.html | 6 +- .../grid-formatting.component.html | 8 +-- src/app/grid-groupby/grid-groupby.sample.html | 34 +++++------ .../grid-master-detail.sample.html | 12 ++-- .../grid-mrl-config.sample.html | 4 +- .../grid-mrl.sample.html | 8 +-- .../grid-percantge-widths.sample.html | 2 +- .../grid-percantge-widths.sample.scss | 2 +- .../grid-performance.sample.html | 4 +- .../grid-remote-paging.sample.html | 2 +- .../grid-remote-paging.sample.scss | 2 +- .../grid-remote-virtualization.sample.html | 8 +-- .../grid-remote-virtualization.sample.scss | 2 +- src/app/grid-row-api/grid-row-api.sample.html | 60 +++++++++---------- .../grid-row-edit-sample.component.html | 20 +++---- .../grid-row-edit-sample.component.scss | 2 +- .../grid-row-pinning.sample.html | 10 ++-- src/app/grid-search/grid-search.sample.html | 6 +- .../grid-selection/grid-selection.sample.html | 4 +- src/app/grid-state/about.component.html | 2 +- src/app/grid-state/grid-state.component.html | 6 +- .../grid-summaries.component.scss | 2 +- .../grid-summaries/grid-summaries.sample.html | 20 +++---- .../grid-toolbar-custom.sample.html | 4 +- .../grid-updates.component.html | 4 +- .../grid-validation.sample.component.html | 12 ++-- .../grid-validation.sample.component.scss | 2 +- .../hierarchical-grid-updating.sample.html | 10 ++-- .../hierarchical-grid-updating.sample.scss | 2 +- .../hierarchical-grid.sample.html | 30 +++++----- .../hierarchical-grid.sample.scss | 2 +- src/app/icon/icon.sample.html | 2 +- src/app/input-group/input-group.sample.html | 6 +- src/app/input/input.sample.html | 4 +- src/app/list-panning/list-panning.sample.html | 2 +- src/app/overlay/overlay-presets.sample.html | 2 +- src/app/overlay/overlay.sample.html | 2 +- .../pivot-grid-noop.sample.html | 6 +- .../pivot-grid-state.sample.html | 2 +- .../query-builder/query-builder.sample.html | 2 +- .../reactive-form-sample.component.html | 2 +- src/app/select/select.sample.html | 10 ++-- src/app/snackbar/snackbar.sample.html | 2 +- src/app/tabs-routing/tabs-routing.sample.html | 8 +-- src/app/toast/toast.sample.html | 14 ++--- src/app/tooltip/tooltip.sample.html | 4 +- .../tree-grid-add-row.sample.html | 6 +- .../tree-grid-flat-data.sample.html | 22 +++---- .../tree-grid-flat-data.sample.scss | 2 +- .../tree-grid-groupby.sample.html | 2 +- .../tree-grid-groupby.sample.scss | 2 +- .../tree-grid-load-on-demand.sample.html | 18 +++--- src/app/tree-grid/tree-grid.sample.html | 18 +++--- src/app/tree/tree.sample.html | 2 +- .../virtual-for.sample.html | 26 ++++---- 99 files changed, 418 insertions(+), 418 deletions(-) diff --git a/projects/igniteui-angular/src/lib/banner/banner.component.spec.ts b/projects/igniteui-angular/src/lib/banner/banner.component.spec.ts index 517fca85eb3..fd2a054ec34 100644 --- a/projects/igniteui-angular/src/lib/banner/banner.component.spec.ts +++ b/projects/igniteui-angular/src/lib/banner/banner.component.spec.ts @@ -506,7 +506,7 @@ export class IgxBannerEmptyComponent { You have lost connection to the internet. - +
@@ -527,8 +527,8 @@ export class IgxBannerOneButtonComponent { error Unfortunately, the credit card did not go through, please try again. - - + +
diff --git a/projects/igniteui-angular/src/lib/banner/banner.component.ts b/projects/igniteui-angular/src/lib/banner/banner.component.ts index a06a221079e..d03734a43c1 100644 --- a/projects/igniteui-angular/src/lib/banner/banner.component.ts +++ b/projects/igniteui-angular/src/lib/banner/banner.component.ts @@ -44,8 +44,8 @@ export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventA * * Our privacy settings have changed. * - * - * + * + * * * * ``` diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts index 2481e61fed6..518a679cd4b 100644 --- a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts +++ b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts @@ -31,7 +31,7 @@ class Button { private icon: string; constructor(obj?: IButton) { - this.type = obj.type || 'raised'; + this.type = obj.type || 'contained'; this.ripple = obj.ripple || 'orange'; this.label = obj.label || 'Button label'; this.selected = obj.selected || false; diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts index c8bac9571e7..94e13eb0745 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.common.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts @@ -633,7 +633,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement * * ... * - * * diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts index e03d5d59b28..19b5a538ba6 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts @@ -201,13 +201,13 @@ describe('Dialog', () => { dialog.open(); expect(dialog.leftButtonLabel).toEqual('left button'); - expect(dialog.leftButtonType).toEqual('raised'); + expect(dialog.leftButtonType).toEqual('contained'); expect(dialog.leftButtonColor).toEqual('black'); expect(dialog.leftButtonBackgroundColor).toEqual('darkblue'); expect(dialog.leftButtonRipple).toEqual('pink'); expect(dialog.rightButtonLabel).toEqual('right button'); - expect(dialog.rightButtonType).toEqual('raised'); + expect(dialog.rightButtonType).toEqual('contained'); expect(dialog.rightButtonColor).toEqual('orange'); expect(dialog.rightButtonBackgroundColor).toEqual('lightblue'); expect(dialog.rightButtonRipple).toEqual('white'); @@ -543,12 +543,12 @@ class AlertComponent {
@@ -567,12 +567,12 @@ class DialogComponent { @@ -591,12 +591,12 @@ class DialogTwoWayDataBindingComponent {
diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts index 89c1dd111bc..d18990d2bd9 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts @@ -150,13 +150,13 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After public leftButtonLabel = ''; /** - * An @Input property to set the left button `type`. The types are `flat`, `raised` and `fab`. + * An @Input property to set the left button `type`. The types are `flat`, `contained` and `fab`. * The `flat` type button is a rectangle and doesn't have a shadow.
- * The `raised` type button is also a rectangle but has a shadow.
+ * The `contained` type button is also a rectangle but has a shadow.
* The `fab` type button is a circle with a shadow.
* The default value is `flat`. * ```html - * + * * ``` */ @Input() @@ -199,9 +199,9 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After public rightButtonLabel = ''; /** - * An @Input property to set the right button `type`. The types are `flat`, `raised` and `fab`. + * An @Input property to set the right button `type`. The types are `flat`, `contained` and `fab`. * The `flat` type button is a rectangle and doesn't have a shadow.
- * The `raised` type button is also a rectangle but has a shadow.
+ * The `contained` type button is also a rectangle but has a shadow.
* The `fab` type button is a circle with a shadow.
* The default value is `flat`. * ```html @@ -506,7 +506,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After * * @memberOf {@link IgxDialogComponent} * ```html - * + * * * ``` */ @@ -528,7 +528,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After * * @memberOf {@link IgxDialogComponent} * ```html - * + * * * ``` */ @@ -543,7 +543,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After * * @memberOf {@link IgxDialogComponent} * ```html - * + * * * ``` */ diff --git a/projects/igniteui-angular/src/lib/directives/button/README.md b/projects/igniteui-angular/src/lib/directives/button/README.md index 1814d3429c9..986f3db6236 100644 --- a/projects/igniteui-angular/src/lib/directives/button/README.md +++ b/projects/igniteui-angular/src/lib/directives/button/README.md @@ -37,7 +37,7 @@ this.button.displayDensity = "compact"; |:----------|:-------------:| | `flat` | The default button type. Uses transparent background and the secondary theme color from the palette color for the text. | | `outlined` | Very similar to the flat button type but with a thin outline around the edges of the button. | -| `raised` | As the name implies, this button type features a subtle shadow. Uses the secondary theme color from the palette for background. | +| `contained` | As the name implies, this button type features a subtle shadow. Uses the secondary theme color from the palette for background. | | `fab` | Floating action button type. Circular with secondary theme color for background. | | `icon` | This is the simplest of button types. Use it whenever you need to use an icon as button. | diff --git a/projects/igniteui-angular/src/lib/directives/ripple/README.md b/projects/igniteui-angular/src/lib/directives/ripple/README.md index 1b2f3604664..0a1f9c34591 100644 --- a/projects/igniteui-angular/src/lib/directives/ripple/README.md +++ b/projects/igniteui-angular/src/lib/directives/ripple/README.md @@ -36,7 +36,7 @@ more complex component. Setting a centered ripple effect with custom color. ```html - + edit ``` diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html index 530932b31fa..d880798cdfa 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html @@ -26,7 +26,7 @@
- diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.html index e58d7e7c3be..37a1599882c 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.html @@ -67,7 +67,7 @@

+ `, standalone: true, diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index c4ecc741681..af223be13eb 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -6675,10 +6675,10 @@ const verifyExcelStyleFilteringDisplayDensity = (fix: ComponentFixture, exp expect(getComponentSize(inputGroup)).toBe(size); expect(getComponentSize(list)).toBe(size); - // Verify display density of all flat and raised buttons in excel stlye dialog. + // Verify display density of all flat and contained buttons in excel stlye dialog. const flatButtons: HTMLElement[] = excelMenu.querySelectorAll('.igx-button--flat'); - const raisedButtons: HTMLElement[] = excelMenu.querySelectorAll('.igx-button--raised'); - const buttons: HTMLElement[] = Array.from(flatButtons).concat(Array.from(raisedButtons)); + const containedButtons: HTMLElement[] = excelMenu.querySelectorAll('.igx-button--contained'); + const buttons: HTMLElement[] = Array.from(flatButtons).concat(Array.from(containedButtons)); buttons.forEach((button) => { expect(getComponentSize(button)).toBe(size); }); @@ -6782,10 +6782,10 @@ const verifyExcelCustomFilterDisplayDensity = (fix: ComponentFixture, expec // Excel style filtering custom filter dialog const customFilterMenu = GridFunctions.getExcelStyleCustomFilteringDialog(fix); - // Verify display density of all flat and raised buttons in custom filter dialog. + // Verify display density of all flat and contained buttons in custom filter dialog. const flatButtons = customFilterMenu.querySelectorAll('.igx-button--flat'); - const raisedButtons = customFilterMenu.querySelectorAll('.igx-button--raised'); - const buttons = Array.from(flatButtons).concat(Array.from(raisedButtons)); + const containedButtons = customFilterMenu.querySelectorAll('.igx-button--contained'); + const buttons = Array.from(flatButtons).concat(Array.from(containedButtons)); buttons.forEach((button) => { expect(getComponentSize(button)).toBe(size); }); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 3468d23d541..4886976e6e3 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -203,7 +203,7 @@ - diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html index 612259f4837..214faf1ba49 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html @@ -165,7 +165,7 @@ - diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html index 10985d7d32e..cf35a84b227 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html @@ -158,7 +158,7 @@ - diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.html b/projects/igniteui-angular/src/lib/input-group/input-group.component.html index e8957f4889b..0eac311ac81 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.html +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.html @@ -21,7 +21,7 @@ +
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts index 952a5634587..60772534a1b 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts @@ -738,8 +738,8 @@ export class GridFunctions { public static getApplyButtonExcelStyleFiltering(fix: ComponentFixture, menu = null, grid = 'igx-grid') { const excelMenu = menu ? menu : GridFunctions.getExcelStyleFilteringComponent(fix, grid); - const raisedButtons = Array.from(excelMenu.querySelectorAll('.igx-button--raised')); - const applyButton: any = raisedButtons.find((rb: any) => rb.innerText === 'apply'); + const containedButtons = Array.from(excelMenu.querySelectorAll('.igx-button--contained')); + const applyButton: any = containedButtons.find((rb: any) => rb.innerText === 'apply'); return applyButton; } @@ -771,8 +771,8 @@ export class GridFunctions { public static getApplyExcelStyleCustomFiltering(fix: ComponentFixture): HTMLElement { const customFilterMenu = GridFunctions.getExcelStyleCustomFilteringDialog(fix); - const raisedButtons = Array.from(customFilterMenu.querySelectorAll('.igx-button--raised')); - const applyButton = raisedButtons.find((rb: any) => rb.innerText === 'apply'); + const containedButtons = Array.from(customFilterMenu.querySelectorAll('.igx-button--contained')); + const applyButton = containedButtons.find((rb: any) => rb.innerText === 'apply'); return applyButton as HTMLElement; } @@ -784,8 +784,8 @@ export class GridFunctions { public static clickClearFilterExcelStyleCustomFiltering(fix: ComponentFixture) { const customFilterMenu = GridFunctions.getExcelStyleCustomFilteringDialog(fix); - const raisedButtons = Array.from(customFilterMenu.querySelectorAll('.igx-button--flat')); - const button: any = raisedButtons.find((rb: any) => rb.innerText === 'Clear filter'); + const containedButtons = Array.from(customFilterMenu.querySelectorAll('.igx-button--flat')); + const button: any = containedButtons.find((rb: any) => rb.innerText === 'Clear filter'); button.click(); fix.detectChanges(); } diff --git a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts index b7b02be8a58..b9a921559d2 100644 --- a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts @@ -352,16 +352,16 @@ export class IgxHierarchicalGridCustomSelectorsComponent implements OnInit { - + - + - + `, diff --git a/src/app/autocomplete/autocomplete.sample.html b/src/app/autocomplete/autocomplete.sample.html index 07df9e04dfd..f17353c4c1f 100644 --- a/src/app/autocomplete/autocomplete.sample.html +++ b/src/app/autocomplete/autocomplete.sample.html @@ -26,7 +26,7 @@ - + Attractions Custom Width diff --git a/src/app/banner/banner.sample.html b/src/app/banner/banner.sample.html index 1ee12941b55..102832ad527 100644 --- a/src/app/banner/banner.sample.html +++ b/src/app/banner/banner.sample.html @@ -17,6 +17,6 @@
YOUR COOKIES SETTINGS
- +
diff --git a/src/app/buttonGroup/buttonGroup.sample.html b/src/app/buttonGroup/buttonGroup.sample.html index 753a8404e86..922491c9571 100644 --- a/src/app/buttonGroup/buttonGroup.sample.html +++ b/src/app/buttonGroup/buttonGroup.sample.html @@ -189,14 +189,14 @@

Programmatic Selection

+
diff --git a/src/app/calendar/calendar.sample.html b/src/app/calendar/calendar.sample.html index d32eb32ddd1..69a6a489236 100644 --- a/src/app/calendar/calendar.sample.html +++ b/src/app/calendar/calendar.sample.html @@ -1,21 +1,21 @@

Default Calendar

- - - - + + + + - +
- - + +
- - - + + + {{calendar.activeDate}}
@@ -36,21 +36,21 @@

Calendar Sample (NO Card wrapper)

Default Calendar

- - - - + + + + - +
- - + +
- - - + + + {{calendar.activeDate}}
@@ -72,7 +72,7 @@

Calendar with Special and Disabled Dates

- +
diff --git a/src/app/card/card.sample.html b/src/app/card/card.sample.html index 4ccd9f2cc90..492981312d3 100644 --- a/src/app/card/card.sample.html +++ b/src/app/card/card.sample.html @@ -346,7 +346,7 @@

Bootstrap card 🤘

- +
diff --git a/src/app/carousel/carousel.sample.html b/src/app/carousel/carousel.sample.html index 29c369bfb41..e7ad477a314 100644 --- a/src/app/carousel/carousel.sample.html +++ b/src/app/carousel/carousel.sample.html @@ -9,17 +9,17 @@

Desktop

loop pause
- + {{ item }} - - - - - + + + + +
diff --git a/src/app/combo/combo.sample.html b/src/app/combo/combo.sample.html index 63e57a55009..522209f51e1 100644 --- a/src/app/combo/combo.sample.html +++ b/src/app/combo/combo.sample.html @@ -54,7 +54,7 @@

Normal and simple combo next to each other

Combo Template Form

- + - + +
diff --git a/src/app/date-picker/date-picker.sample.html b/src/app/date-picker/date-picker.sample.html index f6dea74dcdb..430bdfdbfbd 100644 --- a/src/app/date-picker/date-picker.sample.html +++ b/src/app/date-picker/date-picker.sample.html @@ -13,10 +13,10 @@
- - - - + + + +
@@ -293,7 +293,7 @@

Drag a suspect inside or outside the cage:

Drag and drop elements overlapping grid in shadow dom:

- +
diff --git a/src/app/drop-down/drop-down.sample.html b/src/app/drop-down/drop-down.sample.html index 68fb9e96118..563de85ec05 100644 --- a/src/app/drop-down/drop-down.sample.html +++ b/src/app/drop-down/drop-down.sample.html @@ -91,7 +91,7 @@
Density types - Prefix/suffix
{{ item.field }} -
diff --git a/src/app/grid-add-row/grid-add-row.sample.html b/src/app/grid-add-row/grid-add-row.sample.html index 32b1fcb6462..de7772170f5 100644 --- a/src/app/grid-add-row/grid-add-row.sample.html +++ b/src/app/grid-add-row/grid-add-row.sample.html @@ -38,22 +38,22 @@

Settings

- - + + {{value}} - + - + - +
diff --git a/src/app/grid-auto-size/grid-auto-size.sample.html b/src/app/grid-auto-size/grid-auto-size.sample.html index 03b038900da..e7bd5f8ab58 100644 --- a/src/app/grid-auto-size/grid-auto-size.sample.html +++ b/src/app/grid-auto-size/grid-auto-size.sample.html @@ -5,19 +5,19 @@
- - - - - - - + + + + + + + - - - - - + + + + +
Grid with primary key ProductID - - - - - - - - - + + + + + + + + +

Grid without PK

@@ -67,5 +67,5 @@

Grid without PK

 - - + + diff --git a/src/app/grid-cellEditing/grid-cellEditing.component.scss b/src/app/grid-cellEditing/grid-cellEditing.component.scss index 256031692eb..0a7bdffa0b2 100644 --- a/src/app/grid-cellEditing/grid-cellEditing.component.scss +++ b/src/app/grid-cellEditing/grid-cellEditing.component.scss @@ -2,7 +2,7 @@ button { margin: 0.2rem; } -[igxButton="raised"] { +[igxButton="contained"] { margin: 0.5rem 0.5rem 0.5rem 0; &:nth-child(12) { diff --git a/src/app/grid-column-groups/grid-column-groups.sample.html b/src/app/grid-column-groups/grid-column-groups.sample.html index 70869063609..5ccaa06b4d7 100644 --- a/src/app/grid-column-groups/grid-column-groups.sample.html +++ b/src/app/grid-column-groups/grid-column-groups.sample.html @@ -64,8 +64,8 @@ - - - - + + + + diff --git a/src/app/grid-column-groups/grid-column-groups.sample.scss b/src/app/grid-column-groups/grid-column-groups.sample.scss index 6b160e44045..e9d297798b0 100644 --- a/src/app/grid-column-groups/grid-column-groups.sample.scss +++ b/src/app/grid-column-groups/grid-column-groups.sample.scss @@ -3,7 +3,7 @@ min-height: 125vh } -[igxButton="raised"] { +[igxButton="contained"] { margin: 0.7rem 0.7rem 0; } diff --git a/src/app/grid-column-moving/grid-column-moving.sample.html b/src/app/grid-column-moving/grid-column-moving.sample.html index 43ec45822c4..82a54942afe 100644 --- a/src/app/grid-column-moving/grid-column-moving.sample.html +++ b/src/app/grid-column-moving/grid-column-moving.sample.html @@ -7,15 +7,15 @@

Sample 1

- +
- - + +
Sample 1
- - + + @@ -54,15 +54,15 @@

Sample 1

Drag mode: {{ grid1.selectionService.dragMode }}

- - + + - - - + + +
@@ -94,7 +94,7 @@

Sample 1

Sample 2 - Grid with MCH

- + diff --git a/src/app/grid-column-pinning/grid-column-pinning.sample.html b/src/app/grid-column-pinning/grid-column-pinning.sample.html index a857dd81d64..a91a281c522 100644 --- a/src/app/grid-column-pinning/grid-column-pinning.sample.html +++ b/src/app/grid-column-pinning/grid-column-pinning.sample.html @@ -2,11 +2,11 @@
- - - - - + + + + +
@@ -20,15 +20,15 @@
- - - - - - - - - + + + + + + + + +
Toolbar diff --git a/src/app/grid-column-resizing/grid-column-resizing.sample.html b/src/app/grid-column-resizing/grid-column-resizing.sample.html index 1f9ed7c0328..d7b2a1cdac0 100644 --- a/src/app/grid-column-resizing/grid-column-resizing.sample.html +++ b/src/app/grid-column-resizing/grid-column-resizing.sample.html @@ -9,9 +9,9 @@
- - - - + + + +
diff --git a/src/app/grid-column-selection/grid-column-selection.sample.html b/src/app/grid-column-selection/grid-column-selection.sample.html index fecdaa2a618..a9a9f9f5eef 100644 --- a/src/app/grid-column-selection/grid-column-selection.sample.html +++ b/src/app/grid-column-selection/grid-column-selection.sample.html @@ -2,7 +2,7 @@
- @@ -90,12 +90,12 @@

TEST EXAMPLE

Enable Paging
- - - - - - + + + + + +
diff --git a/src/app/grid-external-filtering/grid-external-filtering.sample.html b/src/app/grid-external-filtering/grid-external-filtering.sample.html index 51974ac4f54..c628ca490a0 100644 --- a/src/app/grid-external-filtering/grid-external-filtering.sample.html +++ b/src/app/grid-external-filtering/grid-external-filtering.sample.html @@ -67,10 +67,10 @@
Allow Advanced Filtering - - + + Apply Changes - +
diff --git a/src/app/grid-filtering/grid-filtering.sample.html b/src/app/grid-filtering/grid-filtering.sample.html index 99fa67685e4..48c8044c3a4 100644 --- a/src/app/grid-filtering/grid-filtering.sample.html +++ b/src/app/grid-filtering/grid-filtering.sample.html @@ -54,10 +54,10 @@

Sample 1

Allow Advanced Filtering - - + + Apply Changes - +

ESF Templates

diff --git a/src/app/grid-formatting/grid-formatting.component.html b/src/app/grid-formatting/grid-formatting.component.html index 9afc7175fe9..c7f222290f7 100644 --- a/src/app/grid-formatting/grid-formatting.component.html +++ b/src/app/grid-formatting/grid-formatting.component.html @@ -1,6 +1,6 @@

Grid with local data

- - + + @@ -29,8 +29,8 @@

Grid with local data

Grid with remote data

- - + + diff --git a/src/app/grid-groupby/grid-groupby.sample.html b/src/app/grid-groupby/grid-groupby.sample.html index 84389870d23..2cae8afbb2b 100644 --- a/src/app/grid-groupby/grid-groupby.sample.html +++ b/src/app/grid-groupby/grid-groupby.sample.html @@ -4,21 +4,21 @@
Toggle Summary Position
- - Sorting mode
- - Show summary on collapse
- -
- @@ -49,24 +49,24 @@
- - - - - - - + + + + + + +
- - - + +
- +
Current Display Density: {{displayDensityOptions.displayDensity}}
- +
diff --git a/src/app/grid-master-detail/grid-master-detail.sample.html b/src/app/grid-master-detail/grid-master-detail.sample.html index 9096e25b7ca..dcd69f4e14b 100644 --- a/src/app/grid-master-detail/grid-master-detail.sample.html +++ b/src/app/grid-master-detail/grid-master-detail.sample.html @@ -1,6 +1,6 @@
- + @@ -35,9 +35,9 @@
Address: {{dataItem.Address}}
- - - - - + + + + +
diff --git a/src/app/grid-multi-row-layout-config/grid-mrl-config.sample.html b/src/app/grid-multi-row-layout-config/grid-mrl-config.sample.html index 1549e8e1a7a..fc0c6e94a29 100644 --- a/src/app/grid-multi-row-layout-config/grid-mrl-config.sample.html +++ b/src/app/grid-multi-row-layout-config/grid-mrl-config.sample.html @@ -67,8 +67,8 @@

Multi-row layout configurator:

- - + +
diff --git a/src/app/grid-multi-row-layout/grid-mrl.sample.html b/src/app/grid-multi-row-layout/grid-mrl.sample.html index 6136ede97f0..558cccf4e51 100644 --- a/src/app/grid-multi-row-layout/grid-mrl.sample.html +++ b/src/app/grid-multi-row-layout/grid-mrl.sample.html @@ -33,9 +33,9 @@ - Hide/Show second group - Pin/Unpin second group - Move second group - Pin/Unpin first group + Hide/Show second group + Pin/Unpin second group + Move second group + Pin/Unpin first group diff --git a/src/app/grid-percentage-columns/grid-percantge-widths.sample.html b/src/app/grid-percentage-columns/grid-percantge-widths.sample.html index b8fc5a3512b..e2c5b99a302 100644 --- a/src/app/grid-percentage-columns/grid-percantge-widths.sample.html +++ b/src/app/grid-percentage-columns/grid-percantge-widths.sample.html @@ -45,7 +45,7 @@

Pipe and locale settings

{{cur}} - + diff --git a/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss b/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss index 3a226d54841..7c04a23abac 100644 --- a/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss +++ b/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss @@ -3,7 +3,7 @@ igx-card { margin-left: 1rem; } -[igxButton="raised"] { +[igxButton="contained"] { text-transform: uppercase; margin: 0.7rem 0 0.3rem; } diff --git a/src/app/grid-performance/grid-performance.sample.html b/src/app/grid-performance/grid-performance.sample.html index 5e8e9d4125e..b6ce8061da4 100644 --- a/src/app/grid-performance/grid-performance.sample.html +++ b/src/app/grid-performance/grid-performance.sample.html @@ -11,8 +11,8 @@

Fixed Size Rows

- + - +
diff --git a/src/app/grid-remote-paging/grid-remote-paging.sample.html b/src/app/grid-remote-paging/grid-remote-paging.sample.html index f0a15474728..be4223a43a0 100644 --- a/src/app/grid-remote-paging/grid-remote-paging.sample.html +++ b/src/app/grid-remote-paging/grid-remote-paging.sample.html @@ -17,7 +17,7 @@

Paging settings

- + {{value}} diff --git a/src/app/grid-remote-paging/grid-remote-paging.sample.scss b/src/app/grid-remote-paging/grid-remote-paging.sample.scss index 03477ab4602..14499b4ecfb 100644 --- a/src/app/grid-remote-paging/grid-remote-paging.sample.scss +++ b/src/app/grid-remote-paging/grid-remote-paging.sample.scss @@ -3,7 +3,7 @@ height: 110vh; } -[igxButton="raised"] { +[igxButton="contained"] { text-transform: uppercase; } diff --git a/src/app/grid-remote-virtualization/grid-remote-virtualization.sample.html b/src/app/grid-remote-virtualization/grid-remote-virtualization.sample.html index ba9902322d4..8919b4722d1 100644 --- a/src/app/grid-remote-virtualization/grid-remote-virtualization.sample.html +++ b/src/app/grid-remote-virtualization/grid-remote-virtualization.sample.html @@ -2,8 +2,8 @@ - - - - + + + +
diff --git a/src/app/grid-remote-virtualization/grid-remote-virtualization.sample.scss b/src/app/grid-remote-virtualization/grid-remote-virtualization.sample.scss index a8850dbe44e..0ef6793e648 100644 --- a/src/app/grid-remote-virtualization/grid-remote-virtualization.sample.scss +++ b/src/app/grid-remote-virtualization/grid-remote-virtualization.sample.scss @@ -3,6 +3,6 @@ height: 110vh; } -[igxButton="raised"] { +[igxButton="contained"] { margin: 1rem 0.5rem; } diff --git a/src/app/grid-row-api/grid-row-api.sample.html b/src/app/grid-row-api/grid-row-api.sample.html index ed8ea76b1a7..0ed667664f5 100644 --- a/src/app/grid-row-api/grid-row-api.sample.html +++ b/src/app/grid-row-api/grid-row-api.sample.html @@ -2,14 +2,14 @@

igxGrid

- - - - - - - - + + + + + + + +
@@ -65,14 +65,14 @@

igxGrid

IgxTreeGrid Hierarchical Data

- - - - - - - - + + + + + + + +
@@ -116,15 +116,15 @@

IgxTreeGrid Hierarchical Data

IgxTreeGrid Flat Data

- +
- - - - - - - + + + + + + +
@@ -166,13 +166,13 @@

IgxTreeGrid Flat Data

igxHierarchicalGrid

- +
- - - - - + + + + +
diff --git a/src/app/grid-row-edit/grid-row-edit-sample.component.html b/src/app/grid-row-edit/grid-row-edit-sample.component.html index b5160332740..587d69019e6 100644 --- a/src/app/grid-row-edit/grid-row-edit-sample.component.html +++ b/src/app/grid-row-edit/grid-row-edit-sample.component.html @@ -55,7 +55,7 @@

Grid with rowEditing and with transactions

- +

Log Grid Edit Events

@@ -142,11 +142,11 @@

Cancel Grid Edit Events

- - - - - + + + + +

Grid without row editing neither transactions

@@ -197,10 +197,10 @@

Grid without row editing and with transactions

- - - - + + + +

Performance grid with transactions and row edit

diff --git a/src/app/grid-row-edit/grid-row-edit-sample.component.scss b/src/app/grid-row-edit/grid-row-edit-sample.component.scss index 05019e01dbe..d83ddb0259b 100644 --- a/src/app/grid-row-edit/grid-row-edit-sample.component.scss +++ b/src/app/grid-row-edit/grid-row-edit-sample.component.scss @@ -53,7 +53,7 @@ color: #2222aa; } -[igxButton="raised"] { +[igxButton="contained"] { margin: 1rem 0.5rem 2rem 0; } diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.html b/src/app/grid-row-pinning/grid-row-pinning.sample.html index d141cdf7396..f0f97fa3e1b 100644 --- a/src/app/grid-row-pinning/grid-row-pinning.sample.html +++ b/src/app/grid-row-pinning/grid-row-pinning.sample.html @@ -1,15 +1,15 @@
- - + +

igxGrid

- + Current: {{displayDensityOptions.displayDensity}}
- - + +
Bottom Row Pinning toggle diff --git a/src/app/grid-search/grid-search.sample.html b/src/app/grid-search/grid-search.sample.html index 3fbc5b8faa1..0e9a8d49f5f 100644 --- a/src/app/grid-search/grid-search.sample.html +++ b/src/app/grid-search/grid-search.sample.html @@ -25,9 +25,9 @@
- - - + + +
diff --git a/src/app/grid-selection/grid-selection.sample.html b/src/app/grid-selection/grid-selection.sample.html index c345e4338c4..610c65be384 100644 --- a/src/app/grid-selection/grid-selection.sample.html +++ b/src/app/grid-selection/grid-selection.sample.html @@ -3,13 +3,13 @@ Hide row selectors - + {{ item }} - + {{ item }} diff --git a/src/app/grid-state/about.component.html b/src/app/grid-state/about.component.html index 9246155c87e..1accfc66591 100644 --- a/src/app/grid-state/about.component.html +++ b/src/app/grid-state/about.component.html @@ -3,5 +3,5 @@ Navigating to the previous page, components will reinitialize as per their initial configuration, therefor the igxGrid will lose its state.
What our GridSaveStateComponent will do is read the state from the window.localStorage object and apply the corresponding state in the AfterViewInit lifecycle.
- Go Back + Go Back
diff --git a/src/app/grid-state/grid-state.component.html b/src/app/grid-state/grid-state.component.html index 631adc9c7a4..56e17ee9576 100644 --- a/src/app/grid-state/grid-state.component.html +++ b/src/app/grid-state/grid-state.component.html @@ -229,13 +229,13 @@
- +
- +
- +
diff --git a/src/app/grid-summaries/grid-summaries.component.scss b/src/app/grid-summaries/grid-summaries.component.scss index 2a0d89058de..8e185d7041e 100644 --- a/src/app/grid-summaries/grid-summaries.component.scss +++ b/src/app/grid-summaries/grid-summaries.component.scss @@ -2,6 +2,6 @@ igx-switch { margin-right: 10px; } -[igxButton="raised"] { +[igxButton="contained"] { margin: 0.5rem; } diff --git a/src/app/grid-summaries/grid-summaries.sample.html b/src/app/grid-summaries/grid-summaries.sample.html index 91f5594d92b..392a1a3754a 100644 --- a/src/app/grid-summaries/grid-summaries.sample.html +++ b/src/app/grid-summaries/grid-summaries.sample.html @@ -89,16 +89,16 @@ hasHidden Row Selection - - - - - - - - - + + + + + + + + +
- +
diff --git a/src/app/grid-toolbar/grid-toolbar-custom.sample.html b/src/app/grid-toolbar/grid-toolbar-custom.sample.html index c4ed683f480..02fb3d5ceb2 100644 --- a/src/app/grid-toolbar/grid-toolbar-custom.sample.html +++ b/src/app/grid-toolbar/grid-toolbar-custom.sample.html @@ -6,11 +6,11 @@

Toolbar

- - diff --git a/src/app/grid-updates-test/grid-updates.component.html b/src/app/grid-updates-test/grid-updates.component.html index 5065a0f823e..88d1290b8fc 100644 --- a/src/app/grid-updates-test/grid-updates.component.html +++ b/src/app/grid-updates-test/grid-updates.component.html @@ -1,5 +1,5 @@ - - + + Grid without transactions - +
@@ -55,11 +55,11 @@

Grid with transactions

- - - - - + + + + +
diff --git a/src/app/grid-validation/grid-validation.sample.component.scss b/src/app/grid-validation/grid-validation.sample.component.scss index b78ee953eea..5b37a9efcf7 100644 --- a/src/app/grid-validation/grid-validation.sample.component.scss +++ b/src/app/grid-validation/grid-validation.sample.component.scss @@ -53,6 +53,6 @@ color: #2222aa; } -[igxButton="raised"] { +[igxButton="contained"] { margin: 0.5rem; } diff --git a/src/app/hierarchical-grid-updating/hierarchical-grid-updating.sample.html b/src/app/hierarchical-grid-updating/hierarchical-grid-updating.sample.html index 0e4de14cbc5..4012c2d5b4a 100644 --- a/src/app/hierarchical-grid-updating/hierarchical-grid-updating.sample.html +++ b/src/app/hierarchical-grid-updating/hierarchical-grid-updating.sample.html @@ -1,8 +1,8 @@ - - - - - + + + + +
diff --git a/src/app/hierarchical-grid-updating/hierarchical-grid-updating.sample.scss b/src/app/hierarchical-grid-updating/hierarchical-grid-updating.sample.scss index ceae0d1d126..5a4fa58b823 100644 --- a/src/app/hierarchical-grid-updating/hierarchical-grid-updating.sample.scss +++ b/src/app/hierarchical-grid-updating/hierarchical-grid-updating.sample.scss @@ -1,3 +1,3 @@ -[igxButton="raised"] { +[igxButton="contained"] { margin: 0.5rem; } diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html index 4956c3d1913..9c0037b270a 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.html +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.html @@ -1,11 +1,11 @@

Sample One

- +
- + Sample One

Sample two

- - - - - - + + + + + +
@@ -137,9 +137,9 @@

Sample two

Sample three (batch editing)

- - - + + +
@@ -167,10 +167,10 @@

Sample three (batch editing)

Sample 4

- - - - + + + +
diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.scss b/src/app/hierarchical-grid/hierarchical-grid.sample.scss index 5b5fb2d0120..493f8cca993 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.scss +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.scss @@ -4,7 +4,7 @@ } } -[igxButton="raised"] { +[igxButton="contained"] { margin: 0.5rem; } diff --git a/src/app/icon/icon.sample.html b/src/app/icon/icon.sample.html index 78a6b9161f1..9eecc58427a 100644 --- a/src/app/icon/icon.sample.html +++ b/src/app/icon/icon.sample.html @@ -93,7 +93,7 @@

Using SVG Icons

Lazy loaded module with cached SVG icons

- +
diff --git a/src/app/input-group/input-group.sample.html b/src/app/input-group/input-group.sample.html index 3efa77e87b0..b1ca15aa1e9 100644 --- a/src/app/input-group/input-group.sample.html +++ b/src/app/input-group/input-group.sample.html @@ -361,11 +361,11 @@
- + - + - +
diff --git a/src/app/input/input.sample.html b/src/app/input/input.sample.html index 3c9db8aa55a..da1eea15aeb 100644 --- a/src/app/input/input.sample.html +++ b/src/app/input/input.sample.html @@ -130,7 +130,7 @@

Checkbox sample

Form Group Switch
- +
@@ -141,6 +141,6 @@

Radio w/ ngModel

Option 1 Option 2 Option 3 - + diff --git a/src/app/list-panning/list-panning.sample.html b/src/app/list-panning/list-panning.sample.html index 7e77904ad75..1840cd8a5bc 100644 --- a/src/app/list-panning/list-panning.sample.html +++ b/src/app/list-panning/list-panning.sample.html @@ -42,6 +42,6 @@

Swipe left or right to perform action

- + diff --git a/src/app/overlay/overlay-presets.sample.html b/src/app/overlay/overlay-presets.sample.html index 701b2a00fe6..50f472488b7 100644 --- a/src/app/overlay/overlay-presets.sample.html +++ b/src/app/overlay/overlay-presets.sample.html @@ -34,7 +34,7 @@
- diff --git a/src/app/overlay/overlay.sample.html b/src/app/overlay/overlay.sample.html index f5f79803da8..c44853e74fe 100644 --- a/src/app/overlay/overlay.sample.html +++ b/src/app/overlay/overlay.sample.html @@ -83,7 +83,7 @@
Outlet
- diff --git a/src/app/pivot-grid-noop/pivot-grid-noop.sample.html b/src/app/pivot-grid-noop/pivot-grid-noop.sample.html index 80da92cbe4f..97dcc8713ab 100644 --- a/src/app/pivot-grid-noop/pivot-grid-noop.sample.html +++ b/src/app/pivot-grid-noop/pivot-grid-noop.sample.html @@ -6,6 +6,6 @@ [pivotConfiguration]="pivotConfigHierarchy" height="500px"> - - - + + + diff --git a/src/app/pivot-grid-state/pivot-grid-state.sample.html b/src/app/pivot-grid-state/pivot-grid-state.sample.html index fd00fe53b52..ad2d3c948d0 100644 --- a/src/app/pivot-grid-state/pivot-grid-state.sample.html +++ b/src/app/pivot-grid-state/pivot-grid-state.sample.html @@ -1,6 +1,6 @@
- +
- +
diff --git a/src/app/reactive-from/reactive-form-sample.component.html b/src/app/reactive-from/reactive-form-sample.component.html index 4667862ccbe..c818ca5a1de 100644 --- a/src/app/reactive-from/reactive-form-sample.component.html +++ b/src/app/reactive-from/reactive-form-sample.component.html @@ -42,7 +42,7 @@

Book your movie ticket

- +
diff --git a/src/app/select/select.sample.html b/src/app/select/select.sample.html index 9579ebb02cf..32d885245af 100644 --- a/src/app/select/select.sample.html +++ b/src/app/select/select.sample.html @@ -9,7 +9,7 @@

Select with ngModel, set items OnInit

- + @@ -48,7 +48,7 @@

Select with ngModel, set items OnInit

Footer content
- +
@@ -152,15 +152,15 @@

Select in a Form

{{ city }} - +

Select - dynamically change required

- - + +
Required diff --git a/src/app/snackbar/snackbar.sample.html b/src/app/snackbar/snackbar.sample.html index a8cf4260c14..359bfc05c1f 100644 --- a/src/app/snackbar/snackbar.sample.html +++ b/src/app/snackbar/snackbar.sample.html @@ -33,7 +33,7 @@

Snackbar w/ action button

Snackbar with positionSettings

- +
Message sent diff --git a/src/app/tabs-routing/tabs-routing.sample.html b/src/app/tabs-routing/tabs-routing.sample.html index 3162073024e..289c6d27cac 100644 --- a/src/app/tabs-routing/tabs-routing.sample.html +++ b/src/app/tabs-routing/tabs-routing.sample.html @@ -3,16 +3,16 @@

Routing sample

- - - - diff --git a/src/app/toast/toast.sample.html b/src/app/toast/toast.sample.html index 2d5e04c379d..e15947c8941 100644 --- a/src/app/toast/toast.sample.html +++ b/src/app/toast/toast.sample.html @@ -3,7 +3,7 @@

Bottom Position

- - + +
diff --git a/src/app/tree-grid-add-row/tree-grid-add-row.sample.html b/src/app/tree-grid-add-row/tree-grid-add-row.sample.html index 194c6de4c87..4542c3cf346 100644 --- a/src/app/tree-grid-add-row/tree-grid-add-row.sample.html +++ b/src/app/tree-grid-add-row/tree-grid-add-row.sample.html @@ -16,7 +16,7 @@
- +
@@ -24,7 +24,7 @@ - +
@@ -32,7 +32,7 @@ - +
diff --git a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html index 1cf69368c99..4521adbf4ad 100644 --- a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html +++ b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html @@ -5,7 +5,7 @@
- + @@ -43,16 +43,16 @@
- - - - - - - - - - + + + + + + + + + +
diff --git a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.scss b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.scss index f8cd996c4db..cc8eb4bc8d1 100644 --- a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.scss +++ b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.scss @@ -29,7 +29,7 @@ igx-buttongroup { margin: 8px 4px; } -[igxButton="raised"] { +[igxButton="contained"] { margin: 1rem auto; width: 10rem; } diff --git a/src/app/tree-grid-groupby/tree-grid-groupby.sample.html b/src/app/tree-grid-groupby/tree-grid-groupby.sample.html index 412165ee0bb..087283e3af9 100644 --- a/src/app/tree-grid-groupby/tree-grid-groupby.sample.html +++ b/src/app/tree-grid-groupby/tree-grid-groupby.sample.html @@ -2,7 +2,7 @@
Hide Grouped Columns - +
Primary/Foreign key
- - - - - - - - - + + + + + + + + +
diff --git a/src/app/tree-grid/tree-grid.sample.html b/src/app/tree-grid/tree-grid.sample.html index 045cdc7c6cc..6557fa9051e 100644 --- a/src/app/tree-grid/tree-grid.sample.html +++ b/src/app/tree-grid/tree-grid.sample.html @@ -28,20 +28,20 @@ Enable Paging Enable RowEditing
- + {{ item }} - - - - - - - - + + + + + + + +
diff --git a/src/app/tree/tree.sample.html b/src/app/tree/tree.sample.html index 25b96f508e8..bfbedb85a80 100644 --- a/src/app/tree/tree.sample.html +++ b/src/app/tree/tree.sample.html @@ -4,7 +4,7 @@ - +
diff --git a/src/app/virtual-for-directive/virtual-for.sample.html b/src/app/virtual-for-directive/virtual-for.sample.html index b4e7c9b1482..215a8e6ae79 100644 --- a/src/app/virtual-for-directive/virtual-for.sample.html +++ b/src/app/virtual-for-directive/virtual-for.sample.html @@ -18,16 +18,16 @@

Vertical Virtualization

- + - - - - - - + + + + + +
@@ -52,21 +52,21 @@

Horizontal Virtualization

- + - - + +
- - + +
- + From d5ea6e9e46f4b0f8cbc186b0f5e86dfa9bbb4093 Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 21 Nov 2023 17:41:51 +0200 Subject: [PATCH 12/21] refactor(buttons): replace igxButton=icon with igxIconButton --- .../lib/action-strip/action-strip.component.html | 2 +- .../lib/action-strip/action-strip.component.ts | 2 ++ .../grid-action-button.component.html | 2 +- .../grid-actions/grid-action-button.component.ts | 3 ++- .../igniteui-angular/src/lib/card/card.spec.ts | 10 ++++++---- .../components/button/_button-component.scss | 6 ------ .../styles/components/button/_button-theme.scss | 9 --------- .../lib/directives/button/button.directive.ts | 12 +----------- .../excel-style-header.component.html | 6 +++--- .../excel-style/excel-style-header.component.ts | 3 ++- .../src/lib/paginator/pager.component.html | 8 ++++---- .../src/lib/paginator/paginator.component.ts | 3 ++- .../src/lib/tabs/tabs/tabs.component.html | 4 ++-- src/app/card/card.sample.html | 16 ++++++++-------- src/app/card/card.sample.ts | 5 +++-- .../date-time-editor.sample.html | 4 ++-- .../date-time-editor/date-time-editor.sample.ts | 4 ++-- src/app/grid-finjs/grid-finjs.component.html | 2 +- src/app/grid-finjs/grid-finjs.component.ts | 3 ++- src/app/navbar/navbar.sample.html | 8 ++++---- src/app/navbar/navbar.sample.ts | 4 ++-- src/app/pageHeading/pageHeading.component.ts | 4 ++-- src/app/pageHeading/pageHeading.template.html | 2 +- src/app/pagination/pagination.component.ts | 4 ++-- src/app/pagination/pagination.template.html | 8 ++++---- src/app/tabs/tabs.sample.html | 2 +- src/app/tabs/tabs.sample.ts | 4 ++-- src/app/tooltip/tooltip.sample.html | 4 ++-- src/app/tooltip/tooltip.sample.ts | 3 ++- 29 files changed, 66 insertions(+), 81 deletions(-) diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.html b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.html index f165c084312..a39ef06542a 100644 --- a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.html +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.html @@ -3,7 +3,7 @@ diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.ts index fb7a50d9431..aa07abad4d5 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.ts @@ -3,11 +3,12 @@ import { IgxIconComponent } from '../../icon/icon.component'; import { IgxRippleDirective } from '../../directives/ripple/ripple.directive'; import { IgxButtonDirective } from '../../directives/button/button.directive'; import { NgIf } from '@angular/common'; +import { IgxIconButtonDirective } from '../../directives/button/icon-button.directive'; @Component({ selector: 'igx-grid-action-button', templateUrl: 'grid-action-button.component.html', standalone: true, - imports: [NgIf, IgxButtonDirective, IgxRippleDirective, IgxIconComponent] + imports: [NgIf, IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective] }) export class IgxGridActionButtonComponent { diff --git a/projects/igniteui-angular/src/lib/card/card.spec.ts b/projects/igniteui-angular/src/lib/card/card.spec.ts index fb59afe2b81..9b6f5737b2b 100644 --- a/projects/igniteui-angular/src/lib/card/card.spec.ts +++ b/projects/igniteui-angular/src/lib/card/card.spec.ts @@ -16,6 +16,7 @@ import { import { configureTestSuite } from '../test-utils/configure-suite'; import { IgxButtonDirective } from '../directives/button/button.directive'; import { IgxIconComponent } from '../icon/icon.component'; +import { IgxIconButtonDirective } from '../directives/button/icon-button.directive'; describe('Card', () => { configureTestSuite(); @@ -302,7 +303,7 @@ class CardWithHeaderComponent { } - @@ -318,7 +319,8 @@ class CardWithHeaderComponent { } IgxCardContentDirective, IgxCardActionsComponent, IgxButtonDirective, - IgxIconComponent + IgxIconComponent, + IgxIconButtonDirective ] }) class VerticalCardComponent { @@ -330,13 +332,13 @@ class VerticalCardComponent { - `, standalone: true, - imports: [IgxCardComponent, IgxCardActionsComponent, IgxButtonDirective, IgxIconComponent] + imports: [IgxCardComponent, IgxCardActionsComponent, IgxButtonDirective, IgxIconComponent, IgxIconButtonDirective] }) class HorizontalCardComponent { @ViewChild(IgxCardComponent, { static: true }) public card: IgxCardComponent; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss index 59cd6c268fc..fb6812e6865 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss @@ -34,12 +34,6 @@ @extend %igx-button--fab !optional; } - // ICON BUTTON - @include m(icon) { - @extend %igx-button--round !optional; - @extend %igx-button--icon !optional; - } - // DISABLED BUTTON @include m(disabled) { @extend %igx-button--disabled !optional; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss index d74447e9eaa..8fb7381b287 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss @@ -247,15 +247,6 @@ $button-floating-width: rem(56px); $button-floating-height: $button-floating-width; - $button-icon-width: map.get(( - material: rem(36px, 16px), - fluent: rem(32px, 16px), - bootstrap: rem(36px, 16px), - indigo-design: rem(36px, 16px), - ), $variant); - - $button-icon-height: $button-icon-width; - $button-padding-material-inline: ( comfortable: rem(16px, 16px), cosy: rem(16px, 16px), diff --git a/projects/igniteui-angular/src/lib/directives/button/button.directive.ts b/projects/igniteui-angular/src/lib/directives/button/button.directive.ts index 9a5d1c60d08..7ffc65ec829 100644 --- a/projects/igniteui-angular/src/lib/directives/button/button.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/button/button.directive.ts @@ -19,7 +19,6 @@ const IgxButtonType = mkenum({ Flat: 'flat', Contained: 'contained', Outlined: 'outlined', - Icon: 'icon', FAB: 'fab' }); @@ -136,7 +135,7 @@ export class IgxButtonDirective extends IgxButtonBaseDirective { * * @example * ```html - * + * * ``` */ @Input('igxButton') @@ -218,15 +217,6 @@ export class IgxButtonDirective extends IgxButtonBaseDirective { return this._type === IgxButtonType.Outlined; } - /** - * @hidden - * @internal - */ - @HostBinding('class.igx-button--icon') - public get icon(): boolean { - return this._type === IgxButtonType.Icon; - } - /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html index 9ae915fd589..d21ce40e095 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html @@ -4,7 +4,7 @@

{{ esf.column.header || esf.column.field }}

@@ -13,7 +13,7 @@
- diff --git a/src/app/card/card.sample.html b/src/app/card/card.sample.html index 492981312d3..19666602f59 100644 --- a/src/app/card/card.sample.html +++ b/src/app/card/card.sample.html @@ -28,10 +28,10 @@
{{ cards[8].subtitle }}
- - + @@ -129,7 +129,7 @@

{{ cards[0].subtitle }}

- + {{icon}} @@ -164,7 +164,7 @@
{{ cards[2].subtitle }}
- + {{icon}} @@ -190,7 +190,7 @@
{{ cards[6].subtitle }}
- + {{icon}} @@ -210,7 +210,7 @@
{{ cards[6].subtitle }}
- + {{icon}} @@ -232,7 +232,7 @@
{{cards[7].subtitle}}
- @@ -244,7 +244,7 @@
{{cards[7].subtitle}}
- diff --git a/src/app/card/card.sample.ts b/src/app/card/card.sample.ts index af3b7fad11c..6077d521024 100644 --- a/src/app/card/card.sample.ts +++ b/src/app/card/card.sample.ts @@ -1,7 +1,7 @@ import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { NgFor } from '@angular/common'; import { FormsModule } from '@angular/forms'; -import { IgxAvatarComponent, IgxButtonDirective, IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxChipComponent, IgxDividerDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxIconComponent, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective, IgxRippleDirective, IgxSliderComponent } from 'igniteui-angular'; +import { IgxAvatarComponent, IgxButtonDirective, IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxChipComponent, IgxDividerDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxIconButtonDirective, IgxIconComponent, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective, IgxRippleDirective, IgxSliderComponent } from 'igniteui-angular'; export interface ICard { title: string; @@ -82,7 +82,8 @@ const detailsFactory = (params: any): Idetails => ({ IgxListLineTitleDirective, IgxAvatarComponent, IgxCardHeaderTitleDirective, - IgxCardHeaderSubtitleDirective + IgxCardHeaderSubtitleDirective, + IgxIconButtonDirective ] }) export class CardSampleComponent { diff --git a/src/app/date-time-editor/date-time-editor.sample.html b/src/app/date-time-editor/date-time-editor.sample.html index 6bd64bb8c90..765f5b26b04 100644 --- a/src/app/date-time-editor/date-time-editor.sample.html +++ b/src/app/date-time-editor/date-time-editor.sample.html @@ -14,12 +14,12 @@
DateTime editor in a form
igxInput (valueChange)="valueChange($event)" (validationFailed)="onValidationFailed($event)" [igxDateTimeEditor]="'dd/MM/yyyy hh:mm'" [minValue]="minDate" [maxValue]="maxDate" required /> - - diff --git a/src/app/date-time-editor/date-time-editor.sample.ts b/src/app/date-time-editor/date-time-editor.sample.ts index 925b77c4812..5f20e7cdcdc 100644 --- a/src/app/date-time-editor/date-time-editor.sample.ts +++ b/src/app/date-time-editor/date-time-editor.sample.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { IgxButtonDirective, IgxDateTimeEditorDirective, IgxDateTimeEditorEventArgs, IgxIconComponent, IgxInputDirective, IgxInputGroupComponent, IgxRippleDirective, IgxSuffixDirective } from 'igniteui-angular'; +import { IgxButtonDirective, IgxDateTimeEditorDirective, IgxDateTimeEditorEventArgs, IgxIconButtonDirective, IgxIconComponent, IgxInputDirective, IgxInputGroupComponent, IgxRippleDirective, IgxSuffixDirective } from 'igniteui-angular'; @Component({ selector: 'app-date-time-editor', templateUrl: './date-time-editor.sample.html', styleUrls: ['./date-time-editor.sample.css'], standalone: true, - imports: [IgxInputGroupComponent, IgxInputDirective, IgxDateTimeEditorDirective, FormsModule, IgxSuffixDirective, IgxRippleDirective, IgxButtonDirective, IgxIconComponent] + imports: [IgxInputGroupComponent, IgxInputDirective, IgxDateTimeEditorDirective, FormsModule, IgxSuffixDirective, IgxRippleDirective, IgxButtonDirective, IgxIconComponent, IgxIconButtonDirective] }) export class DateTimeEditorSampleComponent { public date = new Date(2020, 2, 23); diff --git a/src/app/grid-finjs/grid-finjs.component.html b/src/app/grid-finjs/grid-finjs.component.html index f47b2e5cf54..81fc1fa6d9e 100644 --- a/src/app/grid-finjs/grid-finjs.component.html +++ b/src/app/grid-finjs/grid-finjs.component.html @@ -63,7 +63,7 @@ - diff --git a/src/app/grid-finjs/grid-finjs.component.ts b/src/app/grid-finjs/grid-finjs.component.ts index 6a1afb59c3e..184620d6aa5 100644 --- a/src/app/grid-finjs/grid-finjs.component.ts +++ b/src/app/grid-finjs/grid-finjs.component.ts @@ -14,6 +14,7 @@ import { IGroupingExpression, IgxFocusDirective, IgxGridComponent, + IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, SortingDirection @@ -46,7 +47,7 @@ const GROUPING_EXPRESSIONS: IGroupingExpression[] = [{ styleUrls: ['./grid-finjs.component.scss'], templateUrl: './grid-finjs.component.html', standalone: true, - imports: [NgIf, FormsModule, NgFor, CurrencyPipe, IGX_GRID_DIRECTIVES, IGX_SELECT_DIRECTIVES, IgxFocusDirective, IgxIconComponent, IgxRippleDirective] + imports: [NgIf, FormsModule, NgFor, CurrencyPipe, IGX_GRID_DIRECTIVES, IGX_SELECT_DIRECTIVES, IgxFocusDirective, IgxIconComponent, IgxRippleDirective, IgxIconButtonDirective] }) export class GridFinJSComponent { @ViewChild('grid1', { static: true }) public grid: IgxGridComponent; diff --git a/src/app/navbar/navbar.sample.html b/src/app/navbar/navbar.sample.html index 7ee29288ec5..92f496ad3f2 100644 --- a/src/app/navbar/navbar.sample.html +++ b/src/app/navbar/navbar.sample.html @@ -62,13 +62,13 @@

With icon buttons

- - - - + + +
diff --git a/src/app/navbar/navbar.sample.ts b/src/app/navbar/navbar.sample.ts index 5040ea89c66..b623833e27a 100644 --- a/src/app/navbar/navbar.sample.ts +++ b/src/app/navbar/navbar.sample.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Location } from '@angular/common'; -import { IGX_NAVBAR_DIRECTIVES, IgxButtonDirective, IgxIconComponent } from 'igniteui-angular'; +import { IGX_NAVBAR_DIRECTIVES, IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent } from 'igniteui-angular'; const CURRENT_VIEW = 'Ignite UI for Angular Samples'; @@ -11,7 +11,7 @@ const CURRENT_VIEW = 'Ignite UI for Angular Samples'; styleUrls: ['navbar.sample.scss'], templateUrl: 'navbar.sample.html', standalone: true, - imports: [IGX_NAVBAR_DIRECTIVES, IgxIconComponent, IgxButtonDirective] + imports: [IGX_NAVBAR_DIRECTIVES, IgxIconComponent, IgxButtonDirective, IgxIconButtonDirective] }) export class NavbarSampleComponent implements OnInit { public currentView: string; diff --git a/src/app/pageHeading/pageHeading.component.ts b/src/app/pageHeading/pageHeading.component.ts index 7e57d3f27cf..316b48e0056 100644 --- a/src/app/pageHeading/pageHeading.component.ts +++ b/src/app/pageHeading/pageHeading.component.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core'; -import { IgxButtonDirective, IgxIconComponent, IgxRippleDirective, IgxToggleActionDirective } from 'igniteui-angular'; +import { IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, IgxToggleActionDirective } from 'igniteui-angular'; @Component({ @@ -7,7 +7,7 @@ import { IgxButtonDirective, IgxIconComponent, IgxRippleDirective, IgxToggleActi styleUrls: ['./pageHeading.styles.scss'], templateUrl: './pageHeading.template.html', standalone: true, - imports: [IgxButtonDirective, IgxRippleDirective, IgxToggleActionDirective, IgxIconComponent] + imports: [IgxButtonDirective, IgxRippleDirective, IgxToggleActionDirective, IgxIconComponent, IgxIconButtonDirective] }) export class PageHeaderComponent { @Input() diff --git a/src/app/pageHeading/pageHeading.template.html b/src/app/pageHeading/pageHeading.template.html index 0eb3fc6eda3..5d5df185647 100644 --- a/src/app/pageHeading/pageHeading.template.html +++ b/src/app/pageHeading/pageHeading.template.html @@ -1,5 +1,5 @@
- - - - diff --git a/src/app/tabs/tabs.sample.html b/src/app/tabs/tabs.sample.html index 27801e28b59..3c65bdb7217 100644 --- a/src/app/tabs/tabs.sample.html +++ b/src/app/tabs/tabs.sample.html @@ -248,7 +248,7 @@

Add/Remove Tabs with prefix and suffix

person {{contact.text}} @@ -176,17 +176,27 @@
-
- - + + + + + + + +
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts index 4a4f9bb296f..a3394a95660 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts @@ -45,6 +45,7 @@ import { IgxPrefixDirective } from '../../../directives/prefix/prefix.directive' import { IgxInputGroupComponent } from '../../../input-group/input-group.component'; import { IgxIconComponent } from '../../../icon/icon.component'; import { NgFor, NgIf, NgTemplateOutlet, NgClass } from '@angular/common'; +import { IgxIconButtonDirective } from '../../../directives/button/icon-button.directive'; /** * @hidden @@ -54,7 +55,7 @@ import { NgFor, NgIf, NgTemplateOutlet, NgClass } from '@angular/common'; selector: 'igx-grid-filtering-row', templateUrl: './grid-filtering-row.component.html', standalone: true, - imports: [NgFor, IgxDropDownComponent, IgxDropDownItemComponent, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxDropDownItemNavigationDirective, IgxInputDirective, NgIf, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, NgTemplateOutlet, IgxButtonDirective, NgClass, IgxRippleDirective] + imports: [NgFor, IgxDropDownComponent, IgxDropDownItemComponent, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxDropDownItemNavigationDirective, IgxInputDirective, NgIf, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, NgTemplateOutlet, IgxButtonDirective, NgClass, IgxRippleDirective, IgxIconButtonDirective] }) export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { @Input() @@ -113,6 +114,10 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { return this.column.grid.displayDensity === DisplayDensity.comfortable ? DisplayDensity.cosy : this.column.grid.displayDensity; } + protected getIconBtnSize() { + return this.column.grid.displayDensity === DisplayDensity.compact ? 1 : 2; + } + @HostBinding('class.igx-grid__filtering-row') public defaultCSSClass = true; diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html index 68aac770405..bd69d0d4773 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html @@ -58,7 +58,7 @@ [disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary"/> - diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html index 1a7debb91e0..231a6b32463 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html @@ -30,7 +30,7 @@ /> - diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts index 72d5a2b67ea..1269e219045 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts @@ -61,6 +61,18 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit { @Input() public displayDensity: DisplayDensity; + protected getIconBtnSize() { + switch (this.displayDensity) { + case DisplayDensity.compact: + return 'var(--ig-size, var(--ig-size-small))'; + case DisplayDensity.cosy: + return 'var(--ig-size, var(--ig-size-medium))'; + case DisplayDensity.comfortable: + default: + return 'var(--ig-size, var(--ig-size-large))'; + } + } + @Output() public expressionRemoved = new EventEmitter(); diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.html b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.html index dbd9b566257..51c44cf96ae 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.html +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.html @@ -361,16 +361,16 @@
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.ts index bc494d1dde1..09051d9f8d9 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.ts @@ -15,6 +15,7 @@ import { IgxSelectItemComponent } from '../../../select/select-item.component'; import { IgxIconComponent } from '../../../icon/icon.component'; import { IgxPrefixDirective } from '../../../directives/prefix/prefix.directive'; import { IgxSelectComponent } from '../../../select/select.component'; +import { IgxIconButtonDirective } from '../../../directives/button/icon-button.directive'; /** * @hidden @@ -23,7 +24,7 @@ import { IgxSelectComponent } from '../../../select/select.component'; selector: 'igx-excel-style-date-expression', templateUrl: './excel-style-date-expression.component.html', standalone: true, - imports: [IgxSelectComponent, IgxPrefixDirective, NgIf, IgxIconComponent, NgFor, IgxSelectItemComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective] + imports: [IgxSelectComponent, IgxPrefixDirective, NgIf, IgxIconComponent, NgFor, IgxSelectItemComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective] }) export class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultExpressionComponent { @ViewChild('input', { read: IgxInputDirective, static: false }) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html index 231a6b32463..ebf8f0991e5 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html @@ -30,7 +30,7 @@ /> - diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts index 1269e219045..c468ce71c0b 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts @@ -27,6 +27,7 @@ import { IgxSelectItemComponent } from '../../../select/select-item.component'; import { IgxIconComponent } from '../../../icon/icon.component'; import { NgIf, NgFor } from '@angular/common'; import { IgxPrefixDirective } from '../../../directives/prefix/prefix.directive'; +import { IgxIconButtonDirective } from '../../../directives/button/icon-button.directive'; /** * @hidden @@ -43,7 +44,7 @@ export interface ILogicOperatorChangedArgs extends IBaseEventArgs { selector: 'igx-excel-style-default-expression', templateUrl: './excel-style-default-expression.component.html', standalone: true, - imports: [IgxSelectComponent, IgxPrefixDirective, NgIf, IgxIconComponent, NgFor, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective] + imports: [IgxSelectComponent, IgxPrefixDirective, NgIf, IgxIconComponent, NgFor, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective] }) export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit { @Input() @@ -61,18 +62,6 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit { @Input() public displayDensity: DisplayDensity; - protected getIconBtnSize() { - switch (this.displayDensity) { - case DisplayDensity.compact: - return 'var(--ig-size, var(--ig-size-small))'; - case DisplayDensity.cosy: - return 'var(--ig-size, var(--ig-size-medium))'; - case DisplayDensity.comfortable: - default: - return 'var(--ig-size, var(--ig-size-large))'; - } - } - @Output() public expressionRemoved = new EventEmitter(); From 0d1e495ffc9f460c9bf72189d156b69b35b8f51a Mon Sep 17 00:00:00 2001 From: sivanova Date: Mon, 27 Nov 2023 14:23:47 +0200 Subject: [PATCH 19/21] fix(tests): icon button default size --- .../src/lib/grids/grid/grid.component.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index 69ce064f8aa..d33a099807b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts @@ -2377,7 +2377,7 @@ describe('IgxGrid Component Tests #grid', () => { - grid.footer.nativeElement.offsetHeight - (grid.isHorizontalScrollHidden ? 0 : grid.scrollSize); expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(expectedHeight); - expect(parseInt(window.getComputedStyle(paging.nativeElement).height, 10)).toBe(36); + expect(parseInt(window.getComputedStyle(paging.nativeElement).height, 10)).toBe(30); }); it('IgxTabs: should initialize a grid with correct height when height = 100%', async () => { @@ -2395,7 +2395,7 @@ describe('IgxGrid Component Tests #grid', () => { const paging = fix.debugElement.query(By.css('igx-page-nav')); expect(headers.length).toBe(4); expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(204); - expect(parseInt(window.getComputedStyle(paging.nativeElement).height, 10)).toBe(36); + expect(parseInt(window.getComputedStyle(paging.nativeElement).height, 10)).toBe(30); }); it('IgxTabs: should initialize a grid with correct height height = 100% when parent has height', async () => { From db2d06ad30cb0cbaf20619a549748aaf9a40b77d Mon Sep 17 00:00:00 2001 From: sivanova Date: Wed, 29 Nov 2023 12:59:16 +0200 Subject: [PATCH 20/21] fix(icon-button): transition & theming package version --- package-lock.json | 8 +++--- package.json | 2 +- .../icon-button/_icon-button-theme.scss | 25 +++++++++---------- 3 files changed, 17 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8e1c7ebacf7..bc108d4a6d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "express": "^4.18.2", "fflate": "^0.7.3", "hammerjs": "^2.0.8", - "igniteui-theming": "^4.0.0-beta.1", + "igniteui-theming": "^4.0.0-beta.2", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^6.6.7", @@ -12737,9 +12737,9 @@ } }, "node_modules/igniteui-theming": { - "version": "4.0.0-beta.1", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-4.0.0-beta.1.tgz", - "integrity": "sha512-S8lQwGlRnNJXUYi6f5tlGw1+s3G5nzaK+KUqvqsaczGAJ8I4tfa0Dj2DJAQCd4p+kmT6DKdVlYvx80vvmwNk9g==", + "version": "4.0.0-beta.2", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-4.0.0-beta.2.tgz", + "integrity": "sha512-vZJfUBouwS9fIFxQuLt+bam7+0fJzG13H9T9WXM5tQ2xnInHCy+/rZt+Vg3nWdlr5HHZ2P7ofbsYrWLgGbTJtA==", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index a212563b227..bcf282acdb4 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "express": "^4.18.2", "fflate": "^0.7.3", "hammerjs": "^2.0.8", - "igniteui-theming": "^4.0.0-beta.1", + "igniteui-theming": "^4.0.0-beta.2", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^6.6.7", diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss index 2508ee9bc8f..b13793deac9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss @@ -120,18 +120,6 @@ @include css-vars($outlined-theme); @include css-vars($contained-theme); - $time: map.get(( - material: 0s, - fluent: .15s, - bootstrap: .15s, - indigo-design: .15s - ), $variant); - - $button-transition: color $time ease-in-out, - background-color $time ease-in-out, - border-color $time ease-in-out, - box-shadow $time ease-in-out; - $icon-in-button-size: rem(18px); $items-gap: ( @@ -155,7 +143,8 @@ -webkit-tap-highlight-color: transparent; overflow: hidden; white-space: nowrap; - transition: $button-transition; + transition: box-shadow .2s ease-in, background .15s ease-out; + transition-delay: .05s; min-width: unset; min-height: unset; font-size: rem(24px, 24px); @@ -176,6 +165,8 @@ } @if ($variant == 'fluent') { + transition: color .15s ease-out, background .15s ease-out; + &::after { position: absolute; content: ''; @@ -187,6 +178,14 @@ border-radius: calc(#{var-get($flat-theme, 'border-radius')} - #{$outline-btn-indent * 2}); } } + + @if ($variant == 'bootstrap') { + transition: box-shadow .15s ease-out, color .15s ease-out, background .15s ease-out; + } + + @if ($variant == 'indigo-design') { + transition: color .15s ease-in-out, box-shadow .15s ease-in-out, background .15s ease-in-out; + } } %igx-icon-button--flat { From f376705118e408b041cceffbbf7b426655053727 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 29 Nov 2023 15:30:13 +0200 Subject: [PATCH 21/21] deps(theming): bump to version 4.0.0 --- package-lock.json | 8 ++++---- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index bc108d4a6d4..da785b25f71 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "express": "^4.18.2", "fflate": "^0.7.3", "hammerjs": "^2.0.8", - "igniteui-theming": "^4.0.0-beta.2", + "igniteui-theming": "^4.0.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^6.6.7", @@ -12737,9 +12737,9 @@ } }, "node_modules/igniteui-theming": { - "version": "4.0.0-beta.2", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-4.0.0-beta.2.tgz", - "integrity": "sha512-vZJfUBouwS9fIFxQuLt+bam7+0fJzG13H9T9WXM5tQ2xnInHCy+/rZt+Vg3nWdlr5HHZ2P7ofbsYrWLgGbTJtA==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-4.0.0.tgz", + "integrity": "sha512-XumbW89ag90F07no4jNi8KsK+bke/RR7FaUIc6OCSPtqN8OG+nsClURME5HTlTRfFvBxGDbtWzc6kyQn9Eu7/A==", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index bcf282acdb4..3930b7b2e2c 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "express": "^4.18.2", "fflate": "^0.7.3", "hammerjs": "^2.0.8", - "igniteui-theming": "^4.0.0-beta.2", + "igniteui-theming": "^4.0.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^6.6.7", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index d0acb747f5e..ebfdf960793 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -76,7 +76,7 @@ "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "uuid": "^9.0.0", - "igniteui-theming": "^3.3.3", + "igniteui-theming": "^4.0.0", "@igniteui/material-icons-extended": "^3.0.0" }, "peerDependencies": {