From 8a159d42085e4e04f4c58216927f5d98fdf0e964 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Wed, 12 Jun 2024 17:02:01 +0300 Subject: [PATCH 01/19] feat(tooltip): implement indigo design changes (#14359) Co-authored-by: Simeon Simeonoff --- .../tooltip/_tooltip-component.scss | 14 +---- .../components/tooltip/_tooltip-theme.scss | 51 ++++++++++--------- .../lib/core/styles/typography/_indigo.scss | 4 +- .../tooltip/tooltip.directive.spec.ts | 2 +- .../directives/tooltip/tooltip.directive.ts | 2 +- 5 files changed, 35 insertions(+), 38 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-component.scss index e13165860ee..003fd366ba9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-component.scss @@ -10,18 +10,8 @@ @extend %tooltip-display !optional; - @include m(desktop) { - @extend %tooltip-display !optional; - @extend %tooltip--desktop !optional; - } - - @include m(mobile) { - @extend %tooltip-display !optional; - @extend %tooltip--mobile !optional; - } - - @include m(disabled) { - @extend %tooltip--disabled !optional; + @include m(hidden) { + @extend %tooltip--hidden !optional; } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss index cc85412ad10..dacd245468e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss @@ -16,22 +16,24 @@ /// @param {Color} $text-color [null] - The text color of the tooltip. /// /// @param {List} $border-radius [null] - The border radius used for the tooltip component. +/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the tooltip component. /// /// @requires $light-material-schema /// /// @example scss Change the tooltip background /// $my-tooltip-theme: tooltip-theme($background: magenta); /// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-checkbox-theme); +/// @include css-vars($my-tooltip-theme); @function tooltip-theme( $schema: $light-material-schema, $border-radius: null, + $shadow: null, $background: null, $text-color: null ) { $name: 'igx-tooltip'; - $selector: '.igx-tooltip--desktop, .igx-tooptip--mobile'; + $selector: '.igx-tooltip'; $tooltip-schema: (); @if map.has-key($schema, 'tooltip') { @@ -41,6 +43,12 @@ } $theme: digest-schema($tooltip-schema); + $meta: map.get($theme, '_meta'); + + @if not($shadow) { + $elevation: map.get($tooltip-schema, 'elevation'); + $shadow: elevation($elevation); + } @if not($text-color) and $background { $text-color: text-contrast($background); @@ -50,8 +58,12 @@ name: $name, selector: $selector, background: $background, - border-radius: $border-radius, text-color: $text-color, + border-radius: $border-radius, + shadow: $shadow, + _meta: map.merge(if($meta, $meta, ()), ( + variant: map.get($schema, '_meta', 'theme') + )), )); } @@ -60,6 +72,7 @@ /// @param {Map} $theme - The theme used to style the component. @mixin tooltip($theme) { @include css-vars($theme); + $variant: map.get($theme, '_meta', 'variant'); %tooltip-display { display: inline-flex; @@ -68,17 +81,14 @@ background: var-get($theme, 'background'); color: var-get($theme, 'text-color'); border-radius: var-get($theme, 'border-radius'); + box-shadow: map.get($theme, 'shadow'); margin: 0 auto; - } - - %tooltip--desktop { padding: 0 rem(8px); min-height: rem(24px); - } - %tooltip--mobile { - padding: 0 rem(16px); - min-height: rem(32px); + @if $variant == 'indigo-design' { + padding: rem(4px) rem(8px); + } } %tooltip--hidden { @@ -87,25 +97,20 @@ } /// Adds typography styles for the igx-tooltip component. -/// Uses the 'body-2' category from the typographic scale for mobile tooltips and custom typography for desktop tooltips. +/// Uses custom typography. /// @group typography -/// @param {Map} $categories [(text-desktop: null, text-mobile: 'body-2')] - The categories from the typographic scale used for type styles. +/// @param {Map} $categories [(tooltip-text: null] - The categories from the typographic scale used for type styles. @mixin tooltip-typography( - $categories: (text-desktop: null, text-mobile: 'body-2') + $categories: (tooltip-text: null) ) { - $text-desktop: map.get($categories, 'text-desktop'); - $text-mobile: map.get($categories, 'text-mobile'); - - %tooltip--mobile { - @include type-style($text-mobile); - } + $tooltip-text: map.get($categories, 'tooltip-text'); - @if $text-desktop != null { - %tooltip--desktop { - @include type-style($text-desktop); + @if $tooltip-text != null { + %tooltip-display { + @include type-style($tooltip-text); } } @else { - %tooltip--desktop { + %tooltip-display { font-size: rem(10px); font-weight: 600; } 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 f05e641c58b..632e581158f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -107,6 +107,8 @@ )); @include stepper-typography(); @include toast-typography(); - @include tooltip-typography(); + @include tooltip-typography($categories: ( + tooltip-text: 'subtitle-2' + )); @include tree-typography(); } diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts index 1d935105328..b4305593956 100644 --- a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts @@ -9,7 +9,7 @@ import { IgxTooltipDirective } from './tooltip.directive'; import { IgxTooltipTargetDirective } from './tooltip-target.directive'; const HIDDEN_TOOLTIP_CLASS = 'igx-tooltip--hidden'; -const TOOLTIP_CLASS = 'igx-tooltip--desktop'; +const TOOLTIP_CLASS = 'igx-tooltip'; describe('IgxTooltip', () => { configureTestSuite(); diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts index 5ef94c3d49d..7cff12228af 100644 --- a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts @@ -38,7 +38,7 @@ export class IgxTooltipDirective extends IgxToggleDirective { /** * @hidden */ - @HostBinding('class.igx-tooltip--desktop') + @HostBinding('class.igx-tooltip') public override get defaultClass() { return !this.collapsed; } From a60a181160db37e926eabbaed0e934089e480379 Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Thu, 13 Jun 2024 10:06:33 +0300 Subject: [PATCH 02/19] refactor(stepper): update stepper theme to match the latest indigo design from the UI kit (#14369) - fix avatar shape in the sample - fix badge size in the sample --- .../components/stepper/_stepper-theme.scss | 41 ++++++++++++++----- .../lib/core/styles/typography/_indigo.scss | 6 ++- src/app/stepper/stepper.sample.html | 4 +- src/app/stepper/stepper.sample.scss | 1 + 4 files changed, 39 insertions(+), 13 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss index 2954269da7f..2b5b68ed4bb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss @@ -11,6 +11,7 @@ /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. /// +/// @param {Color} $content-foreground [null] - The foreground of the step content. /// @param {Color} $step-background [null] - The background of the step header. /// @param {Color} $step-hover-background [null] - The background of the step header on hover. /// @param {Color} $step-focus-background [null] - The background of the step header on focus. @@ -86,6 +87,8 @@ @function stepper-theme( $schema: $light-material-schema, + $content-foreground: null, + $step-background: null, $step-hover-background: null, $step-focus-background: null, @@ -241,6 +244,8 @@ name: $name, selector: $selector, + content-foreground: $content-foreground, + // Incomplete step-background: $step-background, step-hover-background: $step-hover-background, @@ -338,7 +343,7 @@ material: rem(24px), fluent: rem(8px), bootstrap: rem(24px), - indigo-design: rem(16px) + indigo-design: rem(8px) ), $variant); $step-header-padding-simple: map.get(( @@ -366,7 +371,7 @@ material: rem(1px), fluent: rem(1px), bootstrap: rem(8px), - indigo-design: rem(2px) + indigo-design: rem(1px) ), $variant); $separator-title-top: calc(100% - ((#{$indicator-size} / 2) + #{$step-header-padding} + (#{$separator-size} / 2))); @@ -392,6 +397,7 @@ } %igx-stepper__body { + color: var-get($theme, 'content-foreground'); position: relative; flex-direction: column; flex: 1 1 auto; @@ -525,19 +531,25 @@ background: var-get($theme, 'indicator-background'); box-shadow: 0 0 0 $outline-width var-get($theme, 'indicator-outline'); - @if $variant != 'bootstrap' { + @if $variant == 'bootstrap' { + > igx-icon { + width: var(--igx-icon-size, #{rem(18px)}); + height: var(--igx-icon-size, #{rem(18px)}); + font-size: var(--igx-icon-size, #{rem(18px)}); + } + } @else if $variant == 'indigo-design' { + > igx-icon { + width: var(--igx-icon-size, #{rem(14px)}); + height: var(--igx-icon-size, #{rem(14px)}); + font-size: var(--igx-icon-size, #{rem(14px)}); + } + } @else { > igx-icon { width: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})}); height: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})}); font-size: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})}); color: inherit; } - } @else if $variant == 'bootstrap' { - > igx-icon { - width: var(--igx-icon-size, #{rem(18px)}); - height: var(--igx-icon-size, #{rem(18px)}); - font-size: var(--igx-icon-size, #{rem(18px)}); - } } div > igx-icon, @@ -968,11 +980,20 @@ @mixin stepper-typography( $categories: ( title: 'body-2', - subtitle: 'caption' + subtitle: 'caption', + indicator: 'caption' ) ) { $title: map.get($categories, 'title'); $subtitle: map.get($categories, 'subtitle'); + $indicator: map.get($categories, 'caption'); + + %igx-stepper__step-indicator { + @include type-style($indicator) { + margin-top: 0; + margin-bottom: 0; + } + } %igx-stepper__step-title { @include type-style($title) { 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 632e581158f..e0d3fcd8f48 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -105,7 +105,11 @@ header-hour: 'h5', selected-time: 'h6' )); - @include stepper-typography(); + @include stepper-typography($categories: ( + title: 'body-2', + subtitle: 'caption', + indicator: 'button' + )); @include toast-typography(); @include tooltip-typography($categories: ( tooltip-text: 'subtitle-2' diff --git a/src/app/stepper/stepper.sample.html b/src/app/stepper/stepper.sample.html index 1b22da92146..afbb71557a6 100644 --- a/src/app/stepper/stepper.sample.html +++ b/src/app/stepper/stepper.sample.html @@ -88,8 +88,8 @@ [completed]="form2.form.valid && stepper.linear">
- - + +
User Details diff --git a/src/app/stepper/stepper.sample.scss b/src/app/stepper/stepper.sample.scss index d21544f68ad..3c335264b02 100644 --- a/src/app/stepper/stepper.sample.scss +++ b/src/app/stepper/stepper.sample.scss @@ -25,6 +25,7 @@ igx-badge { width: 16px; height: 16px; min-width: 0; + min-height: 0; } .nav-buttons { From faac9b1fc70da47b0705d36718c9aeb05c4bf4d2 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Thu, 13 Jun 2024 10:07:05 +0300 Subject: [PATCH 03/19] feat(toast): implement indigo design updates (#14354) Co-authored-by: Marin Popov Co-authored-by: Simeon Simeonoff --- .../src/lib/core/styles/components/toast/_toast-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss index c274cfbad37..7459dd0b80b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss @@ -85,7 +85,7 @@ 'material': rem(16px) rem(24px), 'fluent': rem(16px) rem(24px), 'bootstrap': rem(12px), - 'indigo-design': rem(14px) rem(24px) + 'indigo-design': rem(10px) rem(16px) ), $variant); %igx-toast-display { From cd0042d3c5107afbe971ff403a6e629b67efbf75 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 13 Jun 2024 11:06:10 +0300 Subject: [PATCH 04/19] depst(theming): bump to latest beta --- 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 d5dbef3dfae..47ec4475222 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^8.1.0", + "igniteui-theming": "^9.0.0-beta.1", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -12950,9 +12950,9 @@ } }, "node_modules/igniteui-theming": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-8.1.0.tgz", - "integrity": "sha512-dN2amAmVEwzcvYXLLHaA+xuFPnEWRw2pr/spodH4Eq8LFstoMFaJjHu8MUoOalnMy/IDvJg7XtFE73lv3H3SpQ==", + "version": "9.0.0-beta.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-9.0.0-beta.1.tgz", + "integrity": "sha512-DODDOtEyQwa6HZYYLosa5sylzDSl/n/FxDroBwvjKNXLGTiZmVFI9DhqrWbjNDIKKPf/EKBZ72f21DwnoAVIwQ==", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index 5530bcc8577..e9021958b48 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^8.1.0", + "igniteui-theming": "^9.0.0-beta.1", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index 82608586e50..c88d4f4368b 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -74,7 +74,7 @@ "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "uuid": "^9.0.0", - "igniteui-theming": "^8.1.0", + "igniteui-theming": "^9.0.0", "@igniteui/material-icons-extended": "^3.0.0" }, "peerDependencies": { From a77f98ed5e3f4dc9323505f131217acd90cd4240 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 18 Jun 2024 13:09:40 +0300 Subject: [PATCH 05/19] deps(theming): bump to latest beta --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1b7e8275632..6dee202b168 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^9.0.0-beta.1", + "igniteui-theming": "^9.0.0-beta.2", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -12950,9 +12950,9 @@ } }, "node_modules/igniteui-theming": { - "version": "9.0.0-beta.1", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-9.0.0-beta.1.tgz", - "integrity": "sha512-DODDOtEyQwa6HZYYLosa5sylzDSl/n/FxDroBwvjKNXLGTiZmVFI9DhqrWbjNDIKKPf/EKBZ72f21DwnoAVIwQ==", + "version": "9.0.0-beta.2", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-9.0.0-beta.2.tgz", + "integrity": "sha512-iLio7hdnSjRFwLALyFKATI+ibwBQCPxaahVP7ZQ2KcGZsJhRGvrXrwf8nuaqD563joyfd1bHcdZbziIbH2akKA==", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index e9021958b48..df0fe680caf 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^9.0.0-beta.1", + "igniteui-theming": "^9.0.0-beta.2", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", From 85e5edb84bd021e2f8ac0211f7e272803ad71b20 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 18 Jun 2024 13:40:21 +0300 Subject: [PATCH 06/19] chore(stepper):fix lint waring --- .../src/lib/core/styles/components/stepper/_stepper-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss index 2b5b68ed4bb..8754f58b94a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss @@ -986,7 +986,7 @@ ) { $title: map.get($categories, 'title'); $subtitle: map.get($categories, 'subtitle'); - $indicator: map.get($categories, 'caption'); + $indicator: map.get($categories, 'indicator'); %igx-stepper__step-indicator { @include type-style($indicator) { From 88c024c5b773a78adce43c792a3c81a087f9bdc1 Mon Sep 17 00:00:00 2001 From: sivanova Date: Thu, 20 Jun 2024 16:54:58 +0300 Subject: [PATCH 07/19] fix(toast): sizing issues --- .../styles/components/toast/_toast-theme.scss | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss index 7459dd0b80b..c8a3092507f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss @@ -82,8 +82,8 @@ $margin: rem(42px) auto; $padding: map.get(( - 'material': rem(16px) rem(24px), - 'fluent': rem(16px) rem(24px), + 'material': rem(10px) rem(16px), + 'fluent': rem(8px) rem(12px), 'bootstrap': rem(12px), 'indigo-design': rem(10px) rem(16px) ), $variant); @@ -92,15 +92,24 @@ display: inline-flex; justify-content: center; align-items: center; - margin: $margin; + // !important is needed to override the typography styles + margin: $margin !important; padding: $padding; min-width: $width; color: var-get($theme, 'text-color'); background: var-get($theme, 'background'); - border: rem(1px) solid var-get($theme, 'border-color'); border-radius: var-get($theme, 'border-radius'); box-shadow: map.get($theme, 'shadow'); backdrop-filter: blur(10px); + + &:after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + border-radius: inherit; + box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color'); + } } } From 7e31c222a70e842e5102cfc03aa79ddc745dbd78 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Thu, 20 Jun 2024 16:58:17 +0300 Subject: [PATCH 08/19] Update _toast-theme.scss --- .../src/lib/core/styles/components/toast/_toast-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss index c8a3092507f..f9202bc2b55 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss @@ -102,7 +102,7 @@ box-shadow: map.get($theme, 'shadow'); backdrop-filter: blur(10px); - &:after { + &::after { content: ''; position: absolute; width: 100%; From 5f307614d0291e3ec31fb017dd7bf724b6dd7877 Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 25 Jun 2024 14:08:53 +0300 Subject: [PATCH 09/19] deps(theming): bump to latest beta --- package-lock.json | 8 ++++---- package.json | 2 +- src/styles/_variables.scss | 8 ++++---- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6dee202b168..b349b976544 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^9.0.0-beta.2", + "igniteui-theming": "^9.0.0-beta.3", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -12950,9 +12950,9 @@ } }, "node_modules/igniteui-theming": { - "version": "9.0.0-beta.2", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-9.0.0-beta.2.tgz", - "integrity": "sha512-iLio7hdnSjRFwLALyFKATI+ibwBQCPxaahVP7ZQ2KcGZsJhRGvrXrwf8nuaqD563joyfd1bHcdZbziIbH2akKA==", + "version": "9.0.0-beta.3", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-9.0.0-beta.3.tgz", + "integrity": "sha512-pCv6DzpdU7Ul24N3+J3n0T7UbkJOiT8TV+itYeHpzAYAVdAFg+MM4HD+vbKusax3Mx8G6NNLyVXLirhHRD+X+Q==", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index df0fe680caf..dd496fd06bd 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^9.0.0-beta.2", + "igniteui-theming": "^9.0.0-beta.3", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 29980f37eaf..8d4f7c2dc9a 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,10 +1,10 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *; -$palette: $light-material-palette; -$schema: $light-material-schema; -$typeface: $material-typeface; -$type-scale: $material-type-scale; +$palette: $light-indigo-palette; +$schema: $light-indigo-schema; +$typeface: $indigo-typeface; +$type-scale: $indigo-type-scale; $variant: map.get($schema, '_meta', 'variant'); :root { From 28656e4b13cfd9bcc7c8ffd1d7405819d9788dae Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 25 Jun 2024 15:00:26 +0300 Subject: [PATCH 10/19] build(deps): bump igniteui-theming to latest beta --- 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 b349b976544..c1d1e2cc2ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^9.0.0-beta.3", + "igniteui-theming": "^10.0.0-beta.2", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -12950,9 +12950,9 @@ } }, "node_modules/igniteui-theming": { - "version": "9.0.0-beta.3", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-9.0.0-beta.3.tgz", - "integrity": "sha512-pCv6DzpdU7Ul24N3+J3n0T7UbkJOiT8TV+itYeHpzAYAVdAFg+MM4HD+vbKusax3Mx8G6NNLyVXLirhHRD+X+Q==", + "version": "10.0.0-beta.2", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.0.0-beta.2.tgz", + "integrity": "sha512-uc8MgYcoMT+2zpmi2Dv38brFOtt4K5B9SZk4HO0QuOP04cN8ACtZAovkBC9B5V4NbBzpw6kSmQt7e1Dd2dzdfw==", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index dd496fd06bd..4054673aa21 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^9.0.0-beta.3", + "igniteui-theming": "^10.0.0-beta.2", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index c88d4f4368b..38d7a4fdf35 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -74,7 +74,7 @@ "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "uuid": "^9.0.0", - "igniteui-theming": "^9.0.0", + "igniteui-theming": "^10.0.0", "@igniteui/material-icons-extended": "^3.0.0" }, "peerDependencies": { From e91da0c83a5364c611fd4801ad0d05454eeabb8e Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 26 Jun 2024 10:38:29 +0300 Subject: [PATCH 11/19] build(deps): bump to latest igniteui-theming beta --- package-lock.json | 8 ++++---- package.json | 2 +- src/styles/_variables.scss | 8 ++++---- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index c1d1e2cc2ea..61c544b8498 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^10.0.0-beta.2", + "igniteui-theming": "^10.0.0-beta.3", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -12950,9 +12950,9 @@ } }, "node_modules/igniteui-theming": { - "version": "10.0.0-beta.2", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.0.0-beta.2.tgz", - "integrity": "sha512-uc8MgYcoMT+2zpmi2Dv38brFOtt4K5B9SZk4HO0QuOP04cN8ACtZAovkBC9B5V4NbBzpw6kSmQt7e1Dd2dzdfw==", + "version": "10.0.0-beta.3", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.0.0-beta.3.tgz", + "integrity": "sha512-wu7WXYdEWczPF2RYxuSJASsR+LHcsOTZQXwRBDMCB2SCWmOq3Rq992gXbRvxzbjz9q2+YCbVgcGXLvIUOeUmgw==", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index 4054673aa21..0cbf2f7b0da 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^10.0.0-beta.2", + "igniteui-theming": "^10.0.0-beta.3", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 8d4f7c2dc9a..29980f37eaf 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,10 +1,10 @@ @use 'sass:map'; @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *; -$palette: $light-indigo-palette; -$schema: $light-indigo-schema; -$typeface: $indigo-typeface; -$type-scale: $indigo-type-scale; +$palette: $light-material-palette; +$schema: $light-material-schema; +$typeface: $material-typeface; +$type-scale: $material-type-scale; $variant: map.get($schema, '_meta', 'variant'); :root { From f9f93292b7ea25e469e7fec43d23e2c3895efdb8 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 26 Jun 2024 16:43:08 +0300 Subject: [PATCH 12/19] fix(stepper): fix typography and sizing issues --- .../components/stepper/_stepper-theme.scss | 31 ++++++++++++++++--- .../lib/core/styles/typography/_indigo.scss | 3 +- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss index 8754f58b94a..cd95076833e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss @@ -353,7 +353,6 @@ indigo-design: rem(8px) ), $variant); - $step-body-padding: rem(16px); $title-gap: rem(8px); $indicator-gap: rem(4px); $indicator-padding: rem(2px); @@ -571,6 +570,12 @@ } %igx-stepper__step-title { + @if $variant == 'indigo-design' { + /* stylelint-disable scss/at-extend-no-missing-placeholder */ + @extend .ig-typography__subtitle-2; + /* stylelint-enable scss/at-extend-no-missing-placeholder */ + } + color: var-get($theme, 'current-title-color'); } @@ -655,7 +660,7 @@ %igx-stepper__step-content-wrapper, %igx-stepper__body-content { - padding: $step-body-padding; + padding: rem(16px); } %igx-stepper__body-content--active { @@ -666,7 +671,7 @@ %igx-stepper__step-content-wrapper { margin-inline-start: $v-line-indent; position: relative; - min-height: rem(32px); + min-height: if($variant == 'indigo-design', rem(24px), rem(32px)); &::before { content: ''; @@ -679,6 +684,14 @@ } } + @if $variant == 'indigo-design' { + [aria-selected='false'] { + %igx-stepper__step-content-wrapper { + padding: 0 rem(16px); + } + } + } + %igx-stepper__step-title-wrapper { white-space: nowrap; text-overflow: ellipsis; @@ -981,12 +994,14 @@ $categories: ( title: 'body-2', subtitle: 'caption', - indicator: 'caption' + indicator: 'caption', + body-content: 'body-2' ) ) { $title: map.get($categories, 'title'); $subtitle: map.get($categories, 'subtitle'); $indicator: map.get($categories, 'indicator'); + $body-content: map.get($categories, 'body-content'); %igx-stepper__step-indicator { @include type-style($indicator) { @@ -1014,4 +1029,12 @@ font-weight: 600; } } + + %igx-stepper__step-content-wrapper, + %igx-stepper__body-content { + @include type-style($body-content) { + margin-top: 0; + margin-bottom: 0; + } + } } 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 894000bf81d..865cf665766 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -113,7 +113,8 @@ @include stepper-typography($categories: ( title: 'body-2', subtitle: 'caption', - indicator: 'button' + indicator: 'button', + body-content: 'body-2' )); @include toast-typography(); @include tooltip-typography($categories: ( From 8a5c0b363ea3cdf48f21dcc2ea20400636684b1a Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 26 Jun 2024 16:43:33 +0300 Subject: [PATCH 13/19] build(deps): bump igniteui-theming to latest beta --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 61c544b8498..ef50740bb61 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^10.0.0-beta.3", + "igniteui-theming": "^10.0.0-beta.4", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -12950,9 +12950,9 @@ } }, "node_modules/igniteui-theming": { - "version": "10.0.0-beta.3", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.0.0-beta.3.tgz", - "integrity": "sha512-wu7WXYdEWczPF2RYxuSJASsR+LHcsOTZQXwRBDMCB2SCWmOq3Rq992gXbRvxzbjz9q2+YCbVgcGXLvIUOeUmgw==", + "version": "10.0.0-beta.4", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.0.0-beta.4.tgz", + "integrity": "sha512-tOCI/ufmFCUpymjJJU9kFpSD/4nA5pWlUNB3N3zRKvOLfVk6EbiVZmuVaij6qpA89RSKabyOdzbpRUiEKuMKSg==", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index 0cbf2f7b0da..1b3a8151fb0 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^10.0.0-beta.3", + "igniteui-theming": "^10.0.0-beta.4", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", From 7a7c8f9dbae1986e38b857d7356c035f46c67642 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 27 Jun 2024 13:08:04 +0300 Subject: [PATCH 14/19] fix(stepper): fix vertical stepper body padding --- .../core/styles/components/stepper/_stepper-theme.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss index cd95076833e..e7fe7c92ea4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss @@ -685,9 +685,17 @@ } @if $variant == 'indigo-design' { + [aria-selected='true'] { + %igx-stepper__step-content-wrapper { + padding-block: rem(16px); + padding-inline-start: $v-line-indent; + padding-inline-end: rem(16px); + } + } + [aria-selected='false'] { %igx-stepper__step-content-wrapper { - padding: 0 rem(16px); + padding-block: 0; } } } From 8ba31b85bf3aec8360d74f662ab8ccc4b227e791 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 1 Jul 2024 09:40:12 +0300 Subject: [PATCH 15/19] fix(stepper): update min-width of the indigo separator --- .../src/lib/core/styles/components/stepper/_stepper-theme.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss index e7fe7c92ea4..0bf96d86a3a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss @@ -835,7 +835,7 @@ &::before { content: ''; width: auto; - min-width: rem(10px); + min-width: if($variant == 'indigo-design', rem(40px), rem(10px)); height: $separator-size; flex: 1; position: relative; @@ -846,7 +846,6 @@ &:first-of-type { flex-grow: 0; - min-width: 0; &::before { display: none; From 388bc674439428f341135cf004cde89783b24df2 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 1 Jul 2024 09:41:12 +0300 Subject: [PATCH 16/19] fix(stepper): revert min width 0 --- .../src/lib/core/styles/components/stepper/_stepper-theme.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss index 0bf96d86a3a..62c5dc901f3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss @@ -846,6 +846,7 @@ &:first-of-type { flex-grow: 0; + min-width: 0; &::before { display: none; From 45a8dc2f129e9a32259a8d974e2bd3f41ac1188f Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 1 Jul 2024 09:42:48 +0300 Subject: [PATCH 17/19] fix(stepper): fix first step min-width --- .../src/lib/core/styles/components/stepper/_stepper-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss index 62c5dc901f3..2cfbc654b81 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss @@ -846,7 +846,7 @@ &:first-of-type { flex-grow: 0; - min-width: 0; + min-width: fit-content; &::before { display: none; From 1a7d53cfc10cbbf2bdfd15119b932a575c3bf8f4 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 3 Jul 2024 10:22:26 +0300 Subject: [PATCH 18/19] build(deps): bump igniteui-webcomponents to version 4.11.0 --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index ef50740bb61..889d0d1337c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -70,7 +70,7 @@ "ig-typedoc-theme": "^5.0.3", "igniteui-dockmanager": "^1.14.2", "igniteui-sassdoc-theme": "^1.2.3", - "igniteui-webcomponents": "^4.7.0", + "igniteui-webcomponents": "^4.11.0", "jasmine": "^5.1.0", "jasmine-core": "~5.1.2", "karma": "^6.4.2", @@ -12966,9 +12966,9 @@ } }, "node_modules/igniteui-webcomponents": { - "version": "4.9.0", - "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-4.9.0.tgz", - "integrity": "sha512-K/L8kaCMo1D1UG/jrEw1BhWrLRY4XlcMGXUosnllZ83yO0pTFeqXx7pGpcUMZU6u2YkCHNTymt9XYjXzNVVtHg==", + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-4.11.0.tgz", + "integrity": "sha512-fgE4Lzc2OSUsAuPbhuoHw30s/NrdUrf9b8TprvtY8Yu+/2uAoBlz40lDhdSPQ+wpNHk0x62fVW32cQyroq3qZw==", "dev": true, "dependencies": { "@floating-ui/dom": "^1.6.0", diff --git a/package.json b/package.json index 1b3a8151fb0..1d945a784b7 100644 --- a/package.json +++ b/package.json @@ -117,7 +117,7 @@ "ig-typedoc-theme": "^5.0.3", "igniteui-dockmanager": "^1.14.2", "igniteui-sassdoc-theme": "^1.2.3", - "igniteui-webcomponents": "^4.7.0", + "igniteui-webcomponents": "^4.11.0", "jasmine": "^5.1.0", "jasmine-core": "~5.1.2", "karma": "^6.4.2", From e87a3a1a073298d9e05724addcd7467244cc407d Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 3 Jul 2024 15:33:20 +0300 Subject: [PATCH 19/19] build(deps): bump igniteui-theming to version 10.0 --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index b8815b59eba..5c42b75b278 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^10.0.0-beta.4", + "igniteui-theming": "^10.0.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -12881,9 +12881,9 @@ } }, "node_modules/igniteui-theming": { - "version": "10.0.0-beta.4", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.0.0-beta.4.tgz", - "integrity": "sha512-tOCI/ufmFCUpymjJJU9kFpSD/4nA5pWlUNB3N3zRKvOLfVk6EbiVZmuVaij6qpA89RSKabyOdzbpRUiEKuMKSg==", + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.0.0.tgz", + "integrity": "sha512-76usU65w0amIGDAmwrxfrPKz1W0Bzfe+24/q5fxyKCyKWzbLxCUyNHdfHY//tHBEKQF5Y3uSTFbY872J4cXxpw==", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index 02ce33c0466..1b5cdd131ec 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^10.0.0-beta.4", + "igniteui-theming": "^10.0.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0",