From a0c49ee9249bce9306fc52e41887e3f6e4836f01 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 16 May 2024 11:01:08 +0300 Subject: [PATCH 1/2] Themes: Add updated Indigo themes for Navbar, Navdrawer, and Switch (#1196) --- package-lock.json | 8 +++--- package.json | 2 +- .../themes/shared/switch/switch.common.scss | 6 +++++ .../themes/shared/switch/switch.indigo.scss | 25 +++++++++++++------ .../nav-drawer/themes/container.base.scss | 4 +-- .../nav-drawer/themes/header-item.ts | 9 ++++++- .../shared/container/nav-drawer.indigo.scss | 7 ++++++ .../header-item/header-item.indigo.scss | 9 +++++++ .../themes/shared/item/item.indigo.scss | 15 +++++++---- .../themes/shared/navbar.bootstrap.scss | 1 - .../navbar/themes/shared/navbar.common.scss | 1 + .../navbar/themes/shared/navbar.indigo.scss | 25 +++++++++++++++++++ 12 files changed, 91 insertions(+), 21 deletions(-) create mode 100644 src/components/nav-drawer/themes/shared/header-item/header-item.indigo.scss diff --git a/package-lock.json b/package-lock.json index 236156e0f..8c158cb54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,7 +34,7 @@ "globby": "^14.0.1", "husky": "^9.0.11", "ig-typedoc-theme": "^5.0.3", - "igniteui-theming": "^6.2.0", + "igniteui-theming": "^6.3.0", "keep-a-changelog": "^2.5.3", "lint-staged": "^15.2.2", "lit-analyzer": "^2.0.3", @@ -10850,9 +10850,9 @@ "dev": true }, "node_modules/igniteui-theming": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-6.2.0.tgz", - "integrity": "sha512-xdyYo1U1EvyQvl382BHDLpHfICmNdQOlYen9HlASFSJ+SqtpfcahKFFVRe+h8AZ1rIJruMRBeOKRMb3Kz2MG4g==", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-6.3.0.tgz", + "integrity": "sha512-GthUX4cck+X/V1tfciTAVFnj2ukjtsSAwEeF/kRlkwX3VkB/cIgE+W1SIBr05EDl8MnRrkFFEymC35VzJzkDcA==", "dev": true, "peerDependencies": { "sass": "^1.58.1" diff --git a/package.json b/package.json index 37155cf4f..11b57fc8f 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "globby": "^14.0.1", "husky": "^9.0.11", "ig-typedoc-theme": "^5.0.3", - "igniteui-theming": "^6.2.0", + "igniteui-theming": "^6.3.0", "keep-a-changelog": "^2.5.3", "lint-staged": "^15.2.2", "lit-analyzer": "^2.0.3", diff --git a/src/components/checkbox/themes/shared/switch/switch.common.scss b/src/components/checkbox/themes/shared/switch/switch.common.scss index a44f7f407..8b4cca0a9 100644 --- a/src/components/checkbox/themes/shared/switch/switch.common.scss +++ b/src/components/checkbox/themes/shared/switch/switch.common.scss @@ -10,6 +10,12 @@ $theme: $material; transition: all .2s ease-in-out; } +:host(:hover) { + [part~='label'] { + color: var-get($theme, 'label-hover-color'); + } +} + :host([disabled]), :host(:disabled) { [part~='label'] { diff --git a/src/components/checkbox/themes/shared/switch/switch.indigo.scss b/src/components/checkbox/themes/shared/switch/switch.indigo.scss index 57147d6fa..f27374e88 100644 --- a/src/components/checkbox/themes/shared/switch/switch.indigo.scss +++ b/src/components/checkbox/themes/shared/switch/switch.indigo.scss @@ -6,7 +6,7 @@ $checked-color: var-get($theme, 'track-on-color') !default; $border-width: rem(1px); :host { - --size: #{rem(34px)}; + --size: #{rem(32px)}; --thumb-size: #{rem(8px)}; --border-size: #{rem(1px)}; --thumb-offset: #{rem(2px)}; @@ -15,11 +15,22 @@ $border-width: rem(1px); font-weight: 600; } -[part~='base'] { - &:hover { - [part~='control'][part~='checked'] { - border-color: var-get($theme, 'border-on-hover-color'); - } +[part~='label'] { + @include type-style('body-2'); +} + +:host(:hover) { + [part~='control'] { + border-color: var-get($theme, 'border-hover-color'); + } + + [part~='thumb']:not([part~='checked']) { + background: var-get($theme, 'border-hover-color'); + } + + [part~='control'][part~='checked'] { + background: var-get($theme, 'track-on-hover-color'); + border-color: var-get($theme, 'border-on-hover-color'); } } @@ -91,6 +102,6 @@ $border-width: rem(1px); :host([disabled]), :host(:disabled) { [part~='control'][part~='checked'] { - border-color: var-get($theme, 'border-disabled-color'); + border-color: transparent; } } diff --git a/src/components/nav-drawer/themes/container.base.scss b/src/components/nav-drawer/themes/container.base.scss index 0eae06a70..a49555b29 100644 --- a/src/components/nav-drawer/themes/container.base.scss +++ b/src/components/nav-drawer/themes/container.base.scss @@ -24,10 +24,10 @@ } [part~='mini'] { - min-width: var(--menu-mini-width); + width: var(--menu-mini-width); } - [part='main'] { + [part='main'], [part='base'] { width: var(--menu-full-width); } diff --git a/src/components/nav-drawer/themes/header-item.ts b/src/components/nav-drawer/themes/header-item.ts index 59ff72038..c6d61aef0 100644 --- a/src/components/nav-drawer/themes/header-item.ts +++ b/src/components/nav-drawer/themes/header-item.ts @@ -1,19 +1,26 @@ import { css } from 'lit'; - import type { Themes } from '../../../theming/types.js'; + // Shared Styles import { styles as bootstrap } from './shared/header-item/header-item.bootstrap.css.js'; +import { styles as indigo } from './shared/header-item/header-item.indigo.css.js'; const light = { bootstrap: css` ${bootstrap} `, + indigo: css` + ${indigo} + `, }; const dark = { bootstrap: css` ${bootstrap} `, + indigo: css` + ${indigo} + `, }; export const all: Themes = { light, dark }; diff --git a/src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss b/src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss index e162746f9..73b213cc4 100644 --- a/src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss +++ b/src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss @@ -4,7 +4,14 @@ $theme: $indigo; :host { + --menu-full-width: #{rem(240px)}; + --menu-mini-width: #{rem(48px)}; + [part='overlay'] { background: var-get($overlay-indigo, 'background-color'); } + + [part='mini'], [part="main"] { + padding: rem(8px); + } } diff --git a/src/components/nav-drawer/themes/shared/header-item/header-item.indigo.scss b/src/components/nav-drawer/themes/shared/header-item/header-item.indigo.scss new file mode 100644 index 000000000..4900d1479 --- /dev/null +++ b/src/components/nav-drawer/themes/shared/header-item/header-item.indigo.scss @@ -0,0 +1,9 @@ +@use 'styles/utilities' as *; + +:host { + @include type-style('overline'); + + padding: rem(8px) rem(16px); + box-sizing: content-box; + min-height: 16px; +} diff --git a/src/components/nav-drawer/themes/shared/item/item.indigo.scss b/src/components/nav-drawer/themes/shared/item/item.indigo.scss index 77666618e..9e46b9e16 100644 --- a/src/components/nav-drawer/themes/shared/item/item.indigo.scss +++ b/src/components/nav-drawer/themes/shared/item/item.indigo.scss @@ -1,11 +1,16 @@ @use 'styles/utilities' as *; [part~='base'] { - gap: rem(24px); - padding: rem(4px); - margin: rem(15px) rem(8px); + gap: rem(16px); + padding: rem(8px) rem(16px); + margin: 0; + margin-block-end: rem(4px); + + ::slotted(igc-icon) { + --ig-size: 2; + } } -[part='content'] { - padding-inline-start: rem(8px); +[part='base mini'] { + padding: rem(8px); } diff --git a/src/components/navbar/themes/shared/navbar.bootstrap.scss b/src/components/navbar/themes/shared/navbar.bootstrap.scss index e0211db9b..39c71ea29 100644 --- a/src/components/navbar/themes/shared/navbar.bootstrap.scss +++ b/src/components/navbar/themes/shared/navbar.bootstrap.scss @@ -6,7 +6,6 @@ $theme: $bootstrap; :host { box-shadow: var(--ig-elevation-0); padding: 0 rem(8px); - border-bottom: rem(1px) solid var-get($theme, 'border-color'); } [part='base'] { diff --git a/src/components/navbar/themes/shared/navbar.common.scss b/src/components/navbar/themes/shared/navbar.common.scss index 1d27877cb..feb2632f3 100644 --- a/src/components/navbar/themes/shared/navbar.common.scss +++ b/src/components/navbar/themes/shared/navbar.common.scss @@ -6,6 +6,7 @@ $theme: $material; :host { background: var-get($theme, 'background'); color: var-get($theme, 'text-color'); + border-bottom: rem(1px) solid var-get($theme, 'border-color'); box-shadow: var(--ig-elevation-4); } diff --git a/src/components/navbar/themes/shared/navbar.indigo.scss b/src/components/navbar/themes/shared/navbar.indigo.scss index 056fbf081..18d313357 100644 --- a/src/components/navbar/themes/shared/navbar.indigo.scss +++ b/src/components/navbar/themes/shared/navbar.indigo.scss @@ -1,5 +1,30 @@ @use 'styles/utilities' as *; :host { + min-height: rem(56px); box-shadow: var(--ig-elevation-0); + + [name='start']::slotted(*), + [name='end']::slotted(*) { + margin: initial; + } +} + +[part='end'] { + gap: rem(8px); +} + +[part='base'] { + gap: rem(16px); +} + +::slotted(*) { + @include type-style('h5'); +} + +::slotted(igc-icon) { + --size: rem(16px); + + padding: rem(6px); + margin: 0; } From f7cb1ebfca5b994ecf21ec4085cb98b6a30638b0 Mon Sep 17 00:00:00 2001 From: Radoslav Karaivanov Date: Fri, 17 May 2024 09:22:40 +0300 Subject: [PATCH 2/2] fix(storybook): Default textarea story is always recreated (#1207) --- stories/textarea.stories.ts | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/stories/textarea.stories.ts b/stories/textarea.stories.ts index 870102b0b..4b27ee70b 100644 --- a/stories/textarea.stories.ts +++ b/stories/textarea.stories.ts @@ -2,6 +2,7 @@ import { sourceCode } from '@igniteui/material-icons-extended'; import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { registerIconFromText } from '../src/components/icon/icon.registry.js'; import { IgcIconComponent, @@ -261,6 +262,27 @@ type Story = StoryObj; export const Default: Story = { args: { label: 'Your feedback' }, + render: (args) => html` + + `, }; export const ProjectContent: Story = {