Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Indigo Themes: Update List, Progress, and Dropdown #1224

Merged
merged 20 commits into from
Jun 12, 2024
Merged
Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
8138425
feat(dropdown): update indigo styles (#1189)
SisIvanova May 30, 2024
9a11cc1
refactor(list): Update the indigo theme to the lates design (#1208)
desig9stein May 30, 2024
62c1b47
feat(progress): update indigo theme styles (#1193)
SisIvanova May 30, 2024
96db1ae
deps(theming): bump to latest beta
simeonoff May 30, 2024
8b93b27
lint(themes): fix list errors
simeonoff May 30, 2024
5b8c401
Merge branch 'master' into simeonoff/indigo-themes
SisIvanova Jun 4, 2024
42e11e7
fix(progress): circular bar size
SisIvanova Jun 4, 2024
b554365
fix(linear-progress): gap between label and track
SisIvanova Jun 4, 2024
6724197
Merge branch 'master' into simeonoff/indigo-themes
SisIvanova Jun 4, 2024
6e41837
Merge branch 'master' into simeonoff/indigo-themes
simeonoff Jun 5, 2024
b3a3ce6
Merge branch 'master' into simeonoff/indigo-themes
simeonoff Jun 7, 2024
92ea5c0
Merge branch 'master' into simeonoff/indigo-themes
simeonoff Jun 10, 2024
3591d33
deps(theming): bump to latest beta
simeonoff Jun 10, 2024
a284703
fix(dropdown): default size
SisIvanova Jun 10, 2024
e7de728
Merge branch 'master' into simeonoff/indigo-themes
simeonoff Jun 11, 2024
deb4d93
refactor(list): fix sizes paddings and gaps
desig9stein Jun 11, 2024
f3930a6
Merge branch 'master' into simeonoff/indigo-themes
simeonoff Jun 12, 2024
2cf43f2
Merge branch 'master' into simeonoff/indigo-themes
simeonoff Jun 12, 2024
9dbeb65
fix(list): remove duplicated styles
desig9stein Jun 12, 2024
995bf85
deps(theming): bump to latest version
simeonoff Jun 12, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
"globby": "^14.0.1",
"husky": "^9.0.11",
"ig-typedoc-theme": "^5.0.3",
"igniteui-theming": "^7.2.0",
"igniteui-theming": "^8.0.0-beta.5",
"keep-a-changelog": "^2.5.3",
"lint-staged": "^15.2.5",
"lit-analyzer": "^2.0.3",
Expand Down
2 changes: 2 additions & 0 deletions src/components/dropdown/dropdown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,8 @@ export default class IgcDropdownComponent extends SizableMixin(
.set(enterKey, this.onEnterKey)
.set(homeKey, this.onHomeKey)
.set(endKey, this.onEndKey);

this.size = 'medium';
}

protected override async firstUpdated() {
Expand Down
7 changes: 7 additions & 0 deletions src/components/dropdown/themes/header.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,21 @@ import { css } from 'lit';
import type { Themes } from '../../../theming/types.js';
// Shared Styles
import { styles as fluent } from './shared/header/dropdown-header.fluent.css.js';
import { styles as indigo } from './shared/header/dropdown-header.indigo.css.js';

const light = {
indigo: css`
${indigo}
`,
fluent: css`
${fluent}
`,
};

const dark = {
indigo: css`
${indigo}
`,
fluent: css`
${fluent}
`,
Expand Down
7 changes: 7 additions & 0 deletions src/components/dropdown/themes/item.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,21 @@ import { css } from 'lit';
import type { Themes } from '../../../theming/types.js';
// Shared Styles
import { styles as fluent } from './shared/item/dropdown-item.fluent.css.js';
import { styles as indigo } from './shared/item/dropdown-item.indigo.css.js';

const light = {
indigo: css`
${indigo}
`,
fluent: css`
${fluent}
`,
};

const dark = {
indigo: css`
${indigo}
`,
fluent: css`
${fluent}
`,
Expand Down
5 changes: 4 additions & 1 deletion src/components/dropdown/themes/shared/dropdown.indigo.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,8 @@ $theme: $indigo;
}

[part='base'] {
box-shadow: var(--ig-elevation-3);
box-shadow: var-get($theme, 'elevation');
padding: rem(3px);
outline: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
outline-offset: rem(-1px);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@use 'styles/utilities' as *;

:host {
padding-inline: pad-inline(rem(8px), rem(12px), rem(12px));
padding-block: pad-inline(rem(4px), rem(6px), rem(8px));
margin-block-end: rem(2px);
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,20 @@ $theme: $material;
:host {
border-radius: var-get($theme, 'item-border-radius');
color: var-get($theme, 'item-text-color');

::slotted(igc-icon) {
color: var-get($theme, 'item-icon-color');
}
}

:host([active]),
:host([active]:hover),
:host(:hover) {
background: var-get($theme, 'hover-item-background');
color: var-get($theme, 'hover-item-text-color');

::slotted(igc-icon) {
color: var-get($theme, 'hover-item-icon-color');
}
}

:host([active]) {
Expand All @@ -22,15 +30,27 @@ $theme: $material;
:host([selected]) {
background: var-get($theme, 'selected-item-background');
color: var-get($theme, 'selected-item-text-color');

::slotted(igc-icon) {
color: var-get($theme, 'selected-item-icon-color');
}
}

:host([selected]:hover),
:host([selected][active]) {
background: var-get($theme, 'selected-hover-item-background');
color: var-get($theme, 'selected-hover-item-text-color');

::slotted(igc-icon) {
color: var-get($theme, 'selected-hover-item-icon-color');
}
}

:host([disabled]) {
background: var-get($theme, 'disabled-item-background');
color: var-get($theme, 'disabled-item-text-color');

::slotted(igc-icon) {
color: var-get($theme, 'disabled-item-text-color');
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
@use 'styles/utilities' as *;
@use '../../light/themes' as *;

$theme: $indigo;

:host {
padding-inline: pad-inline(rem(8px), rem(12px), rem(12px));
padding-block: pad-inline(rem(4px), rem(6px), rem(8px));
margin-block: rem(2px);

--item-icon: #{sizable(rem(14px), rem(16px), rem(16px))};

::slotted(igc-icon) {
--size: var(--item-icon) !important;
}
}

[name='prefix']::slotted(*) {
margin-inline-end: rem(8px);
}

[name='suffix']::slotted(*) {
margin-inline-start: rem(8px);
}

:host(:first-of-type),
:host(:last-of-type) {
margin-block: unset;
}

:host([active]) {
outline: rem(2px) solid var-get($theme, 'focused-item-border-color');
outline-offset: rem(-2px);
}

:host([selected][active]) {
background: var-get($theme, 'selected-item-background');
color: var-get($theme, 'selected-item-text-color');

::slotted(igc-icon) {
color: var-get($theme, 'selected-item-icon-color');
}
}

:host([selected][active]:hover) {
background: var-get($theme, 'selected-hover-item-background');
color: var-get($theme, 'selected-hover-item-text-color');

::slotted(igc-icon) {
color: var-get($theme, 'selected-hover-item-icon-color');
}
}
6 changes: 4 additions & 2 deletions src/components/list/themes/header.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import { styles as bootstrapLight } from './light/header/list-header.bootstrap.c
import { styles as fluentLight } from './light/header/list-header.fluent.css.js';
import { styles as indigoLight } from './light/header/list-header.indigo.css.js';
import { styles as materialLight } from './light/header/list-header.material.css.js';
// Shared Styles
import { styles as indigo } from './shared/header/list-header.indigo.css.js';

const light = {
material: css`
Expand All @@ -24,7 +26,7 @@ const light = {
${fluentLight}
`,
indigo: css`
${indigoLight}
${indigo} ${indigoLight}
`,
};

Expand All @@ -39,7 +41,7 @@ const dark = {
${fluentDark}
`,
indigo: css`
${indigoDark}
${indigo} ${indigoDark}
`,
};

Expand Down
8 changes: 0 additions & 8 deletions src/components/list/themes/item.base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,6 @@
justify-content: center;
}

[name='start']::slotted(*) {
margin-inline-end: pad(rem(16px));
}

[name='end']::slotted(*) {
margin-inline-start: pad(rem(16px));
}

[part='title'] {
@include type-style('subtitle-1');
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
$theme: $bootstrap;

:host {
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
--component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important;

background: var-get($theme, 'background');
border: rem(1px) solid var-get($theme, 'border-color');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@
$theme: $fluent;

:host {
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
--component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important;
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@
$theme: $indigo;

:host {
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
--component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important;
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@
$theme: $material;

:host {
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
--component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important;
}
13 changes: 13 additions & 0 deletions src/components/list/themes/shared/header/list-header.indigo.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@use 'styles/utilities' as *;
@use '../../light/themes' as *;

$theme: $indigo;

:host {
padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
padding-block: pad-block(rem(4px), rem(6px), rem(8px));

::slotted(*) {
min-height: rem(16px);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ $theme: $bootstrap;
border-bottom: none;
}


[part='title'] {
@include type-style('body-1');
}
Expand Down
36 changes: 36 additions & 0 deletions src/components/list/themes/shared/item/list-item.common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,26 @@ $theme: $material;

:host(:hover),
:host(:focus-within) {
::slotted(igc-icon) {
color: var-get($theme, 'item-action-color-hover');
}

[part='title'] {
color: var-get($theme, 'item-text-color-hover');
}

[part='subtitle'] {
color: var-get($theme, 'item-subtitle-color-hover');
}

[part='start'] {
color: var-get($theme, 'item-thumbnail-color-hover');
}

[part='end'] {
color: var-get($theme, 'item-action-color-hover');
}

background: var-get($theme, 'item-background-hover');
}

Expand All @@ -25,3 +45,19 @@ $theme: $material;
[part='subtitle'] {
color: var-get($theme, 'item-subtitle-color');
}

[part='start'] {
color: var-get($theme, 'item-thumbnail-color');
}

[part='end'] {
color: var-get($theme, 'item-action-color');
}

[name='start']::slotted(*) {
margin-inline-end: pad(rem(16px));
}

[name='end']::slotted(*) {
margin-inline-start: pad(rem(16px));
}
30 changes: 30 additions & 0 deletions src/components/list/themes/shared/item/list-item.indigo.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,35 @@
@use 'styles/utilities' as *;

:host {
padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
padding-block: pad-block(rem(4px), rem(6px), rem(8px));
gap: rem(8px);

::slotted(igc-avatar) {
--ig-size: 2;
}
}

[part='title'],
[part='subtitle'] {
@include type-style('body-2');
}

[part='start'],
[part='end'] {
gap: rem(8px);
}

[name='start']::slotted(*) {
margin-inline-end: 0;
}

[name='end']::slotted(*) {
margin-inline-start: 0;
}

[part='header'] {
display: flex;
flex-direction: column;
gap: rem(2px);
}
Loading
Loading