From d9c4c629c0153a3eed26a68918e4a39d10ddce52 Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 13 Aug 2024 10:34:36 +0300 Subject: [PATCH 1/4] refactor(carousel): update themes according to new design --- .../carousel/_carousel-component.scss | 4 ++ .../components/carousel/_carousel-theme.scss | 71 +++++++++---------- 2 files changed, 37 insertions(+), 38 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss index 6cdc04c3e59..73a1fd48f99 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-component.scss @@ -21,6 +21,10 @@ @extend %igx-carousel-indicators--bottom !optional; } } + + @include b(igx-carousel-label-indicator) { + @extend %igx-carousel-label-indicator !optional; + } } @mixin _igx-carousel-navigation-partial { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss index 699eeeb2060..de8606252d8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss @@ -137,10 +137,6 @@ @include scale-in-center(); @include scale-out-center(); - $carousel-arrow-margin: 0 rem(16px); - $carousel-indicators-margin: rem(16px) 0; - $carousel-indicators-padding: 0; - $carousel-indicator-margin: 0 rem(5px); $indicator-border-style: rem(2px) solid; $variant: map.get($theme, '_meta', 'variant'); @@ -168,24 +164,20 @@ color: var-get($theme, 'button-arrow-color'); background: var-get($theme, 'button-background'); box-shadow: var-get($theme, 'button-shadow'); + border-radius: var-get($theme, 'border-radius'); + border: rem(1px) solid var-get($theme, 'button-border-color'); igx-icon { - --component-size: 3; - } - - @if $not-bootstrap-theme { - border-radius: border-radius(50%); - } @else { - border-radius: var-get($theme, 'border-radius'); + --component-size: 1; } @if $variant == 'indigo-design' { width: rem(28px); height: rem(28px); - border: rem(2px) solid var-get($theme, 'button-border-color'); + border-width: rem(2px); igx-icon { - --component-size: 1; + --component-size: 2; } } } @@ -209,7 +201,7 @@ } %igx-carousel-arrow { - margin: $carousel-arrow-margin; + margin: 0 rem(16px); position: absolute; top: 50%; transform: translateY(-50%); @@ -254,20 +246,24 @@ display: flex; justify-content: center; align-items: center; - margin: $carousel-indicators-margin; - padding: $carousel-indicators-padding; + margin: rem(16px) 0; + padding: rem(4px) rem(6px); + gap: rem(8px); list-style: none; z-index: 10; inset-inline-start: 50%; transform: translateX(-50%); + background: var-get($theme, 'indicator-background'); + box-shadow: var-get($theme, 'button-shadow'); + border-radius: var-get($theme, 'border-radius'); [dir='rtl'] & { transform: translateX(50%); } @if $variant == 'indigo-design' { - gap: rem(10px); - margin-block-start: 0; + gap: rem(4px); + padding: rem(6px); } } @@ -281,20 +277,24 @@ %igx-carousel-indicators-label { align-items: center; - // TODO: this should be wrapped in carousel typogrpahy - font-size: rem(16px); + } + + %igx-carousel-label-indicator { + @include type-style('caption'); + + margin: rem(16px) 0; + min-width: rem(46px); + box-shadow: none; + border-radius: rem(4px); + color: var-get($theme, 'indicator-color'); + background: var-get($theme, 'label-indicator-background'); } %igx-carousel-indicator { display: flex; align-items: center; justify-content: center; - margin: $carousel-indicator-margin; cursor: pointer; - - @if $variant == 'indigo-design' { - margin: 0; - } } %igx-nav-dot { @@ -306,11 +306,9 @@ @if $variant != 'indigo-design' { border: $indicator-border-style; border-color: var-get($theme, 'indicator-border-color'); - box-shadow: elevation(1); - opacity: .7; } @else { - width: rem(20px); - height: rem(20px); + width: rem(16px); + height: rem(16px); } border-radius: border-radius(50%); @@ -335,7 +333,7 @@ } &:hover { - opacity: 1; + border-color: var-get($theme, 'indicator-active-border-color'); @if $variant == 'indigo-design' { &::after { @@ -345,8 +343,8 @@ &::before { position: absolute; content: ''; - width: rem(20px); - height: rem(20px); + width: inherit; + height: inherit; border: rem(2px) solid var-get($theme, 'indicator-hover-dot-color'); inset-inline-start: 0; top: 0; @@ -364,8 +362,8 @@ &::before { position: absolute; content: ''; - width: rem(20px); - height: rem(20px); + width: inherit; + height: inherit; border: rem(2px) solid var-get($theme, 'indicator-active-dot-color'); inset-inline-start: 0; top: 0; @@ -373,8 +371,6 @@ } } - opacity: 1; - &::after { background: var-get($theme, 'indicator-active-dot-color'); @if $variant != 'indigo-design' { @@ -401,8 +397,7 @@ height: inherit; overflow: hidden; outline-style: none; - border-radius: var-get($theme, 'border-radius'); - min-height: rem(300px); + min-height: rem(240px); min-width: rem(300px); } From 4a515155b89ac14b2082e6c65e4fd841fd9430ff Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 13 Aug 2024 11:05:55 +0300 Subject: [PATCH 2/4] deps(theming): bump to beta with changes --- package-lock.json | 9 +++++---- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index aac0b951732..c05ccd1af4e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^10.0.0", + "igniteui-theming": "^12.0.0-beta.1", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -12899,9 +12899,10 @@ } }, "node_modules/igniteui-theming": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.0.0.tgz", - "integrity": "sha512-76usU65w0amIGDAmwrxfrPKz1W0Bzfe+24/q5fxyKCyKWzbLxCUyNHdfHY//tHBEKQF5Y3uSTFbY872J4cXxpw==", + "version": "12.0.0-beta.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-12.0.0-beta.1.tgz", + "integrity": "sha512-0HM9jrcAhv8JJ4nRCL49H/HnzuFQ/P54iXz3vkhimYvhCHUOz+alFs3w6ouguL6SiazNzBMsQrN04O3eSFU6yg==", + "license": "MIT", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index a4f1c71831b..cbbb9c83401 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^10.0.0", + "igniteui-theming": "^12.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 0d2c2e8f604..2494b32e17a 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": "^10.0.0", + "igniteui-theming": "^12.0.0", "@igniteui/material-icons-extended": "^3.0.0" }, "peerDependencies": { From 2461f90ee523abf5694abd803fcb27de48f4e089 Mon Sep 17 00:00:00 2001 From: sivanova Date: Mon, 19 Aug 2024 13:41:00 +0300 Subject: [PATCH 3/4] fix(carousel): theming version and navigation icons --- package-lock.json | 9 ++++----- package.json | 2 +- .../src/lib/carousel/carousel.component.html | 2 +- .../igniteui-angular/src/lib/icon/icon.references.ts | 4 ++-- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index c05ccd1af4e..e43521a01b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^12.0.0-beta.1", + "igniteui-theming": "^12.0.0-beta.2", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -12899,10 +12899,9 @@ } }, "node_modules/igniteui-theming": { - "version": "12.0.0-beta.1", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-12.0.0-beta.1.tgz", - "integrity": "sha512-0HM9jrcAhv8JJ4nRCL49H/HnzuFQ/P54iXz3vkhimYvhCHUOz+alFs3w6ouguL6SiazNzBMsQrN04O3eSFU6yg==", - "license": "MIT", + "version": "12.0.0-beta.2", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-12.0.0-beta.2.tgz", + "integrity": "sha512-pwXZLpxhp2VF76hFQvXQj2+KQpYIvq1hoSWM9f9yg5jwvRqIr3y70cacqQ5fHSGRV3MjuD1llqBygh6fVSTKeg==", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index cbbb9c83401..28d2b9567de 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "@types/source-map": "0.5.2", "express": "^4.19.2", "fflate": "^0.8.1", - "igniteui-theming": "^12.0.0-beta.1", + "igniteui-theming": "^12.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/src/lib/carousel/carousel.component.html b/projects/igniteui-angular/src/lib/carousel/carousel.component.html index b5901cb4f55..ccc21c14266 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.html +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.html @@ -31,7 +31,7 @@ -
+
{{getCarouselLabel}}
diff --git a/projects/igniteui-angular/src/lib/icon/icon.references.ts b/projects/igniteui-angular/src/lib/icon/icon.references.ts index b4d082253b8..08a02f381db 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.references.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.references.ts @@ -90,7 +90,7 @@ const loadIconRefs = () => [ }), addIcon('carousel_prev', { default: { - name: 'arrow_back', + name: 'keyboard_arrow_left', family: 'material', }, indigo: { @@ -100,7 +100,7 @@ const loadIconRefs = () => [ }), addIcon('carousel_next', { default: { - name: 'arrow_forward', + name: 'keyboard_arrow_right', family: 'material', }, indigo: { From d51d907f1025bc0e4def0a422142b5503e21beef Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 19 Sep 2024 09:44:53 +0300 Subject: [PATCH 4/4] deps(theming): bump to latest beta --- package-lock.json | 9 +++++---- package.json | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index ffcb2900ffa..41796de42db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^4.21.0", "fflate": "^0.8.1", - "igniteui-theming": "^12.0.0-beta.2" + "igniteui-theming": "^13.0.0-beta.1", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -13752,9 +13752,10 @@ } }, "node_modules/igniteui-theming": { - "version": "12.0.0-beta.2", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-12.0.0-beta.2.tgz", - "integrity": "sha512-pwXZLpxhp2VF76hFQvXQj2+KQpYIvq1hoSWM9f9yg5jwvRqIr3y70cacqQ5fHSGRV3MjuD1llqBygh6fVSTKeg==", + "version": "13.0.0-beta.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-13.0.0-beta.1.tgz", + "integrity": "sha512-hKPUOBTjKdIg5nV5Q3xbTQRKFpNduEIKUWbEsOHAVKx3Dae7zHsqSaPJxDTCKKw+dk7gR77DKtAXmln5FgE5Hg==", + "license": "MIT", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index 18ce7b25b7c..e3c7b798a3f 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "@types/source-map": "0.5.2", "express": "^4.21.0", "fflate": "^0.8.1", - "igniteui-theming": "^12.0.0-beta.2", + "igniteui-theming": "^13.0.0-beta.1", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0",