Merge branch 'master' of https://github.com/IgniteUI/igniteui-webcomp…

…onents into rkaraivanov/calendar-refactor
IgniteUI · May 17, 2024 · 151f12e · 151f12e
2 parents 16500dc + f7cb1eb
commit 151f12e
Show file tree

Hide file tree

Showing 15 changed files with 375 additions and 281 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,18 +1,22 @@
 import type { StorybookConfig } from '@storybook/web-components-vite';
 
 const config: StorybookConfig = {
-  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../stories/**/*.stories.ts'],
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
   ],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
   framework: {
     name: '@storybook/web-components-vite',
     options: {},
   },
   viteFinal: async (config, options) => {
     const { mergeConfig } = await import('vite');
+
     if (options.configType === 'PRODUCTION') {
       return mergeConfig(config, {
         build: {
@@ -28,7 +32,7 @@ const config: StorybookConfig = {
       });
     }
 
-    return config;
+    return mergeConfig(config, {});
   },
 };
 

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -4,9 +4,6 @@
   href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap"
   rel="stylesheet"
 />
-<script>
-  window.global = window;
-</script>
 
 <style>
   body {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "release": "node scripts/gen-changelog.mjs",
     "test": "npm run build && wtr --coverage",
     "test:watch": "npm run build && concurrently -k -r \"npm:watch-scss\" \"npm:watch-ts\" \"wtr --watch\"",
-    "storybook": "npm run build && concurrently -k -r \"npm run cem:watch\" \"npm:watch-scss\" \"npm:watch-meta\" \"storybook dev -p 8000\"",
+    "storybook": "npm run build && concurrently -k -r \"npm run cem:watch\" \"npm:watch-scss\" \"npm:watch-meta\" \"storybook dev -p 8000 --debug\"",
     "storybook:build": "npm run build && storybook build -o ./storybook-static",
     "build:typedoc:export": "node scripts/build-typedoc.js export",
     "build:typedoc:import": "node scripts/build-typedoc.js import",
@@ -62,13 +62,13 @@
     "@custom-elements-manifest/analyzer": "^0.9.6",
     "@igniteui/material-icons-extended": "^3.0.2",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^8.1.0",
-    "@storybook/addon-actions": "^8.1.0",
-    "@storybook/addon-essentials": "^8.1.0",
-    "@storybook/addon-links": "^8.1.0",
+    "@storybook/addon-a11y": "^8.1.1",
+    "@storybook/addon-actions": "^8.1.1",
+    "@storybook/addon-essentials": "^8.1.1",
+    "@storybook/addon-links": "^8.1.1",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/web-components": "^8.1.0",
-    "@storybook/web-components-vite": "^8.1.0",
+    "@storybook/web-components": "^8.1.1",
+    "@storybook/web-components-vite": "^8.1.1",
     "@types/mocha": "^10.0.6",
     "@web/test-runner": "^0.18.2",
     "@web/test-runner-playwright": "^0.11.0",
@@ -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",
@@ -89,8 +89,8 @@
     "rimraf": "^5.0.7",
     "sass": "^1.77.1",
     "sass-embedded": "^1.77.1",
-    "sinon": "^17.0.2",
-    "storybook": "^8.1.0",
+    "sinon": "^18.0.0",
+    "storybook": "^8.1.1",
     "stylelint": "^16.5.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-prettier": "^5.0.0",

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 }
diff --git 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<IgcTextareaArgs>;
 
 export const Default: Story = {
   args: { label: 'Your feedback' },
+  render: (args) => html`
+    <igc-textarea
+      autocapitalize=${ifDefined(args.autocapitalize)}
+      name=${ifDefined(args.name)}
+      label=${args.label}
+      rows=${args.rows}
+      placeholder=${args.placeholder}
+      resize=${args.resize}
+      value=${ifDefined(args.value)}
+      minlength=${ifDefined(args.minLength)}
+      maxlength=${ifDefined(args.maxLength)}
+      wrap=${args.wrap}
+      ?outlined=${args.outlined}
+      ?readonly=${args.readOnly}
+      ?required=${args.required}
+      ?disabled=${args.disabled}
+      ?invalid=${args.invalid}
+      ?validate-only=${args.validateOnly}
+      ?spellcheck=${args.spellcheck}
+    ></igc-textarea>
+  `,
 };
 
 export const ProjectContent: Story = {