From e153fb4d38ebf9e793f95b63bdd32743cbae9484 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Fri, 18 Sep 2026 16:50:05 +0300 Subject: [PATCH 1/3] feat(checkbox): update samples content --- .../configs/CheckboxConfigGenerator.ts | 15 +- .../checkbox/checkbox-bootstrap-theme.scss | 31 ++++ .../checkbox-overview.component.html | 23 +++ .../checkbox-overview.component.scss | 143 ++++++++++++++++ .../checkbox-overview.component.ts | 53 ++++++ .../checkbox-sample-1.component.html | 3 - .../checkbox-sample-1.component.scss | 4 - .../checkbox-sample-1.component.ts | 10 -- .../checkbox-sample-2.component.html | 6 - .../checkbox-sample-2.component.scss | 9 - .../checkbox-sample-2.component.ts | 17 -- .../checkbox-sample-3.component.html | 13 -- .../checkbox-sample-3.component.scss | 13 -- .../checkbox-sample-3.component.ts | 47 ----- .../checkbox-states.component.html | 27 +++ .../checkbox-states.component.scss | 45 +++++ .../checkbox-states.component.ts | 10 ++ .../checkbox-styling.component.html | 32 +++- .../checkbox-styling.component.scss | 162 ++++++++++++++---- .../checkbox-styling.component.ts | 50 +++++- .../checkbox-tailwind-styling.component.html | 25 ++- .../checkbox-tailwind-styling.component.scss | 115 +++++++++++++ .../checkbox-tailwind-styling.component.ts | 57 +++++- .../data-entries/data-entries-routes-data.ts | 5 +- src/app/data-entries/data-entries.routes.ts | 22 +-- 25 files changed, 740 insertions(+), 197 deletions(-) create mode 100644 src/app/data-entries/checkbox/checkbox-bootstrap-theme.scss create mode 100644 src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.html create mode 100644 src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss create mode 100644 src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.ts delete mode 100644 src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.html delete mode 100644 src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.scss delete mode 100644 src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.ts delete mode 100644 src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.html delete mode 100644 src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.scss delete mode 100644 src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.ts delete mode 100644 src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.html delete mode 100644 src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.scss delete mode 100644 src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.ts create mode 100644 src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.html create mode 100644 src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.scss create mode 100644 src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.ts diff --git a/live-editing/configs/CheckboxConfigGenerator.ts b/live-editing/configs/CheckboxConfigGenerator.ts index 1e1722c264..54a9935632 100644 --- a/live-editing/configs/CheckboxConfigGenerator.ts +++ b/live-editing/configs/CheckboxConfigGenerator.ts @@ -7,29 +7,30 @@ export class CheckboxConfigGenerator implements IConfigGenerator { public generateConfigs(): Config[] { const configs = new Array(); - // checkbox sample 2 + // checkbox overview configs.push(new Config({ - component: 'CheckboxSample1Component', + component: 'CheckboxOverviewComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/checkbox/" })); - // checkbox sample 2 + // checkbox states configs.push(new Config({ - component: 'CheckboxSample2Component', + component: 'CheckboxStatesComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/checkbox/" })); + // checkbox styling configs.push(new Config({ - component: 'CheckboxSample3Component', + component: 'CheckboxStylingComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/checkbox/" })); - // checkbox styling + // checkbox tailwind styling configs.push(new Config({ - component: 'CheckboxStylingComponent', + component: 'CheckboxTailwindStylingComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/checkbox/" })); diff --git a/src/app/data-entries/checkbox/checkbox-bootstrap-theme.scss b/src/app/data-entries/checkbox/checkbox-bootstrap-theme.scss new file mode 100644 index 0000000000..d7428c9c0b --- /dev/null +++ b/src/app/data-entries/checkbox/checkbox-bootstrap-theme.scss @@ -0,0 +1,31 @@ +@use "sass:map"; +@use "igniteui-angular/theming" as *; + +$palette: $light-bootstrap-palette; +$schema: $light-bootstrap-schema; +@mixin bootstrap-checkbox { + :host ::ng-deep igx-checkbox { + @include tokens(checkbox-theme($schema: map.get($schema, checkbox))); + + --size: #{rem(16px)}; + --fill-color: var(--ig-primary-500); + --fill-color-hover: var(--ig-primary-600); + + &:hover, + &:focus-within { + background: transparent; + } + + .igx-checkbox__label, + .igx-checkbox__label:hover, + .igx-checkbox__label:focus { + background: transparent; + } + + .igx-checkbox__composite-wrapper, + .igx-checkbox__ripple { + background: transparent; + box-shadow: none; + } + } +} diff --git a/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.html b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.html new file mode 100644 index 0000000000..0cbca8c1c2 --- /dev/null +++ b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.html @@ -0,0 +1,23 @@ +
+ + @for (group of groups; track group.title) { + + {{ group.title }} + + @for (item of group.items; track item.label) { + + + {{ item.label }} + + + + } + } + + + +
diff --git a/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss new file mode 100644 index 0000000000..2c7be929af --- /dev/null +++ b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss @@ -0,0 +1,143 @@ +@use "../checkbox-bootstrap-theme" as checkbox-theme; + +@include checkbox-theme.bootstrap-checkbox; + +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.shopping-list { + position: relative; + display: flex; + flex-direction: column; + gap: 0.5rem; + width: 24.5rem; + height: 25.5rem; + padding: 1rem; + overflow: hidden; + font-family: "Aktiv Grotesk", sans-serif; + border-radius: 0.25rem; + background: var(--ig-surface-100); + box-shadow: 0 0.0625rem 0.25rem rgb(0 0 0 / 16%); +} + +.list { + background: transparent; + border: none; + overflow: hidden; +} + +.group-header { + padding: 0; + background: transparent; + font-family: var(--ig-body-1-font-family); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: none; +} + +.group-header:first-child { + transform: translateY(-0.25rem); +} + +.shopping-item + .group-header { + margin-top: 1rem; +} + +.shopping-item + .shopping-item { + margin-top: 0.25rem; +} + +.group-header:not(:first-child) + .shopping-item { + margin-top: 0.25rem; +} + +.group-title { + color: var(--ig-primary-500); + font-family: system-ui, -apple-system, "Segoe UI", sans-serif; + font-size: 1rem; + font-weight: 400; + line-height: 1.5rem; + letter-spacing: 0; +} + +.shopping-item { + height: 2.25rem; + min-height: 2.25rem; + gap: 0.25rem; + padding: 0 0.25rem 0 0; + background: transparent; + border-bottom: none; +} + +.shopping-item:hover, +.shopping-item:focus-within { + background: transparent; + box-shadow: none; +} + +:host ::ng-deep .shopping-item .igx-list-item__content, +:host ::ng-deep .shopping-item .igx-list-item__content:hover, +:host ::ng-deep .shopping-item .igx-list-item__content:focus-within { + height: 2.25rem; + min-height: 2.25rem; + background: transparent; + box-shadow: none; +} + +.shopping-item-checked, +.shopping-item-checked:hover, +.shopping-item-checked:focus-within { + background: var(--ig-primary-50); + box-shadow: none; +} + +:host ::ng-deep .shopping-item-checked .igx-list-item__content, +:host ::ng-deep .shopping-item-checked:hover .igx-list-item__content, +:host ::ng-deep .shopping-item-checked:focus-within .igx-list-item__content { + height: 2.25rem; + min-height: 2.25rem; + background: var(--ig-primary-50); +} + +:host ::ng-deep .shopping-item .igx-checkbox__label { + font-family: system-ui, -apple-system, "Segoe UI", sans-serif; + font-size: 1rem; + font-weight: 400; + line-height: 1.5rem; + letter-spacing: 0; + transform: translateX(-0.25rem); +} + +.shopping-item igx-checkbox { + --tick-color: var(--ig-gray-50); + --fill-color: var(--ig-primary-500); + --fill-color-hover: var(--ig-primary-600); + --empty-color: var(--ig-gray-300); + --empty-color-hover: var(--ig-gray-300); + transform: translateX(-0.5rem); +} + +.item-menu { + margin-inline-start: auto; + color: var(--ig-gray-500); + transform: translateX(1.25rem); +} + +.item-menu igx-icon { + font-size: 1.5rem; +} + +.add-item { + position: absolute; + inset-inline-end: 1.25rem; + inset-block-end: 1rem; + background-color: var(--ig-primary-500); + color: var(--ig-gray-50); +} diff --git a/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.ts b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.ts new file mode 100644 index 0000000000..75287da672 --- /dev/null +++ b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.ts @@ -0,0 +1,53 @@ +import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective } from 'igniteui-angular/list'; + +interface ShoppingItem { + label: string; + checked: boolean; +} + +interface ShoppingGroup { + title: string; + items: ShoppingItem[]; +} + +@Component({ + selector: 'app-checkbox-overview', + styleUrls: ['./checkbox-overview.component.scss'], + templateUrl: './checkbox-overview.component.html', + imports: [ + FormsModule, + IgxCheckboxComponent, + IgxListComponent, + IgxListItemComponent, + IgxListThumbnailDirective, + IgxListActionDirective, + IgxIconButtonDirective, + IgxButtonDirective, + IgxIconComponent + ] +}) +export class CheckboxOverviewComponent { + public groups: ShoppingGroup[] = [ + { + title: 'Grocery store', + items: [ + { label: 'Bread', checked: false }, + { label: 'Milk 4l', checked: false }, + { label: 'Eggs 1 pack', checked: true } + ] + }, + { + title: 'Fruit and vegetable shop', + items: [ + { label: 'Strawberries', checked: false }, + { label: 'Lemons', checked: false }, + { label: 'Single Line Item', checked: true } + ] + } + ]; +} diff --git a/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.html b/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.html deleted file mode 100644 index 37ea059ef6..0000000000 --- a/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.html +++ /dev/null @@ -1,3 +0,0 @@ - - Simple checkbox - diff --git a/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.scss b/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.scss deleted file mode 100644 index 3de9aa4997..0000000000 --- a/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.scss +++ /dev/null @@ -1,4 +0,0 @@ -:host { - display: flex; - padding: 16px; -} diff --git a/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.ts b/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.ts deleted file mode 100644 index 57bc770cbe..0000000000 --- a/src/app/data-entries/checkbox/checkbox-sample-1/checkbox-sample-1.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; - -@Component({ - selector: 'app-checkbox-sample-1', - styleUrls: ['./checkbox-sample-1.component.scss'], - templateUrl: './checkbox-sample-1.component.html', - imports: [IgxCheckboxComponent] -}) -export class CheckboxSample1Component { } diff --git a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.html b/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.html deleted file mode 100644 index c0a2fbe075..0000000000 --- a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.html +++ /dev/null @@ -1,6 +0,0 @@ -@for (task of tasks; track task) { - - {{ task.description }} - -} - diff --git a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.scss b/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.scss deleted file mode 100644 index 01aef9d947..0000000000 --- a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.scss +++ /dev/null @@ -1,9 +0,0 @@ -:host { - display: flex; - flex-flow: column nowrap; - padding: 16px; -} - -igx-checkbox { - margin-top: 16px; -} diff --git a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.ts b/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.ts deleted file mode 100644 index 780fbd7013..0000000000 --- a/src/app/data-entries/checkbox/checkbox-sample-2/checkbox-sample-2.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; - -import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; - -@Component({ - selector: 'app-checkbox-sample-2', - styleUrls: ['./checkbox-sample-2.component.scss'], - templateUrl: './checkbox-sample-2.component.html', - imports: [IgxCheckboxComponent] -}) -export class CheckboxSample2Component { - public tasks = [ - { done: true, description: 'Research' }, - { done: true, description: 'Implement' }, - { done: false, description: 'Test' } - ]; -} diff --git a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.html b/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.html deleted file mode 100644 index e9bc179833..0000000000 --- a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.html +++ /dev/null @@ -1,13 +0,0 @@ - - All done - -@for (task of tasks; track task) { - - {{ task.description }} - -} diff --git a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.scss b/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.scss deleted file mode 100644 index 16c5cb6b06..0000000000 --- a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -:host { - display: flex; - flex-flow: column nowrap; - padding: 16px; -} - -igx-checkbox { - margin-top: 16px; -} - -igx-checkbox.tasks { - padding-left: 10px; -} diff --git a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.ts b/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.ts deleted file mode 100644 index 0ebf0cb53e..0000000000 --- a/src/app/data-entries/checkbox/checkbox-sample-3/checkbox-sample-3.component.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; -import { FormsModule } from '@angular/forms'; - - -@Component({ - selector: 'app-checkbox-sample-3', - styleUrls: ['./checkbox-sample-3.component.scss'], - templateUrl: './checkbox-sample-3.component.html', - imports: [IgxCheckboxComponent, FormsModule] -}) -export class CheckboxSample3Component { - public tasks = [ - { done: true, description: 'Research' }, - { done: true, description: 'Implement' }, - { done: false, description: 'Test' } - ]; - - public get masterCheckbox() { - return this.tasks.reduce( - (acc, curr, idx, arr) => { - acc.checked = acc.checked && curr.done; - acc.done = curr.done ? acc.done + 1 : acc.done; - acc.indeterminate = acc.done === arr.length ? false : !!acc.done; - - return acc; - }, - { - checked: true, - done: 0, - indeterminate: false - } - ); - } - - public toggleAll() { - if (this.masterCheckbox.checked) { - for (const task of this.tasks) { - task.done = false; - } - } else { - for (const task of this.tasks) { - task.done = true; - } - } - } -} diff --git a/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.html b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.html new file mode 100644 index 0000000000..ae3890ced0 --- /dev/null +++ b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.html @@ -0,0 +1,27 @@ + +
+
+ Indeterminate + +
+
+ On + +
+
+ Off + +
+
+ Disabled + +
+
+ Invalid + +
+
+ Required + +
+
diff --git a/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.scss b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.scss new file mode 100644 index 0000000000..54e5d6fe11 --- /dev/null +++ b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.scss @@ -0,0 +1,45 @@ +@use "../checkbox-bootstrap-theme" as checkbox-theme; + +@include checkbox-theme.bootstrap-checkbox; + +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.states { + display: flex; + align-items: flex-end; + gap: 4.5rem; +} + +.state { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; +} + +.state igx-checkbox { + display: block; + width: 1rem; + height: 1rem; +} + +.state igx-checkbox ::ng-deep .igx-checkbox__composite-wrapper { + width: 1rem; + height: 1rem; + padding: 0; +} + +.state-label { + font-family: "Aktiv Grotesk", sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 24px; + letter-spacing: 0.1px; + color: var(--ig-gray-600); +} diff --git a/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.ts b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.ts new file mode 100644 index 0000000000..6f99af6476 --- /dev/null +++ b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; + +@Component({ + selector: 'app-checkbox-states', + styleUrls: ['./checkbox-states.component.scss'], + templateUrl: './checkbox-states.component.html', + imports: [IgxCheckboxComponent] +}) +export class CheckboxStatesComponent { } diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html index 67b225595e..b749729fb4 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html @@ -1,3 +1,29 @@ - - Styled checkbox - +
+

Team members

+ + + Select all + + + + @for (member of members; track member.email) { + + + {{ member.name }} + {{ member.email }} + + + } + + + +
diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss index 656193ef8d..56513de1de 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss @@ -1,39 +1,127 @@ -@use "sass:map"; -@use "igniteui-angular/theming" as *; +@use "../checkbox-bootstrap-theme" as checkbox-theme; + +@include checkbox-theme.bootstrap-checkbox; :host { - --ig-font-family: Arial, Helvetica, sans-serif; - --ig-subtitle-1-font-size: #{rem(14px)}; - - display: block; - padding: rem(18px) 0 0 rem(18px); -} - -// CSS variables approach -.igx-checkbox { - --tick-color: black; - --tick-color-hover: black; - --tick-width: 4; - --fill-color: orange; - --fill-color-hover: oklch(from var(--fill-color) calc(l * 0.9) c h); - --label-color: black; - --empty-color: orange; - --border-width: #{rem(3px)}; - --border-radius: #{rem(3px)}; -} - -// Sass theme approach -// $custom-checkbox-theme: checkbox-theme( -// $tick-color: black, -// $tick-color-hover: black, -// $tick-width: 4, -// $fill-color: orange, -// $fill-color-hover: oklch(from var(--fill-color) calc(l * 0.9) c h), -// $label-color: black, -// $empty-color: orange, -// $border-radius: rem(3px), -// ); -// -// :host ::ng-deep { -// @include tokens($custom-checkbox-theme); -// } + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.team-card { + display: flex; + flex-direction: column; + gap: 0.25rem; + width: 24.3125rem; + padding: 1rem; + border-radius: 0.5rem; + background: var(--ig-surface-500); + box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 12%); +} + +.team-title { + margin: 0 0 0.5rem; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 10px; + font-weight: 400; + line-height: 16px; + letter-spacing: 1.5px; + text-transform: uppercase; +} + +.select-all { + --label-color: var(--ig-primary-500); + --tick-color: var(--ig-gray-50); + --fill-color: var(--ig-primary-500); + --fill-color-hover: var(--ig-primary-600); + + width: 100%; + justify-content: space-between; + padding: 0.5rem; + border-radius: 0.25rem; + font-family: system-ui, -apple-system, "Segoe UI", sans-serif; + font-size: 1rem; +} + +.select-all ::ng-deep .igx-checkbox__label, +.select-all ::ng-deep .igx-checkbox__label:hover, +.select-all ::ng-deep .igx-checkbox__label:focus { + color: var(--ig-primary-500); +} + +.select-all ::ng-deep .igx-checkbox__composite-wrapper { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + padding: 0; +} + +.members { + background: transparent; + border: none; + overflow: hidden; +} + +.member { + gap: 0.75rem; + border-radius: 0.25rem; + background: transparent; + border-bottom: none; +} + +.member:hover, +.member:focus-within { + background: transparent; + box-shadow: none; +} + +.member:hover ::ng-deep .igx-list-item__content, +.member:focus-within ::ng-deep .igx-list-item__content { + background: transparent; + box-shadow: none; +} + +.member-selected, +.member-selected:hover, +.member-selected:focus-within { + background: var(--ig-primary-50); +} + +.member-selected ::ng-deep .igx-list-item__content, +.member-selected:hover ::ng-deep .igx-list-item__content, +.member-selected:focus-within ::ng-deep .igx-list-item__content { + background: var(--ig-primary-50); +} + +.member-check { + --tick-color: var(--ig-gray-50); + --fill-color: var(--ig-primary-500); + --fill-color-hover: var(--ig-primary-600); +} + +.member igx-avatar { + --ig-size: var(--ig-size-small); +} + +.member-name { + font-size: 0.875rem; + font-weight: 600; +} + +.member-email { + color: var(--ig-gray-600); + font-size: 0.75rem; +} + +.continue-button { + margin-top: 1rem; + align-self: flex-end; + background: var(--ig-primary-500); + color: var(--ig-gray-50); + font-family: system-ui, -apple-system, "Segoe UI", sans-serif; + font-weight: 400; + text-transform: none; +} diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts index 34adc68489..66733afb39 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts @@ -1,13 +1,51 @@ import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; -import { THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListThumbnailDirective } from 'igniteui-angular/list'; + +interface TeamMember { + name: string; + email: string; + avatar: string; + selected: boolean; +} @Component({ - selector: 'app-checkbox-styling', - styleUrls: ['./checkbox-styling.component.scss'], - templateUrl: './checkbox-styling.component.html', - providers: [{ provide: THEME_TOKEN, useFactory: () => new ThemeToken('fluent') }], - imports: [IgxCheckboxComponent] + selector: 'app-checkbox-styling', + styleUrls: ['./checkbox-styling.component.scss'], + templateUrl: './checkbox-styling.component.html', + imports: [ + FormsModule, + IgxCheckboxComponent, + IgxAvatarComponent, + IgxListComponent, + IgxListItemComponent, + IgxListThumbnailDirective, + IgxListLineTitleDirective, + IgxListLineSubTitleDirective, + IgxListActionDirective, + IgxButtonDirective + ] }) export class CheckboxStylingComponent { + public members: TeamMember[] = [ + { name: 'Emily Potter', email: 'emily@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png', selected: false }, + { name: 'Alex Lima', email: 'alex@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-05.png', selected: true }, + { name: 'Mateo García', email: 'mateo@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png', selected: false }, + { name: 'Kate Roberts', email: 'kate@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png', selected: false } + ]; + + public get allSelected(): boolean { + return this.members.every((member) => member.selected); + } + + public get someSelected(): boolean { + return this.members.some((member) => member.selected); + } + + public toggleAll(checked: boolean): void { + this.members.forEach((member) => member.selected = checked); + } } diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html index d427737911..e501e899eb 100644 --- a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html +++ b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html @@ -1,3 +1,22 @@ - - Styled checkbox - +
+ + @for (section of sections; track section.title) { + + + + {{ section.title }} + + + +
+ @for (option of section.options; track option.label) { + + {{ option.label }} + + } +
+ + + } + +
diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss index e69de29bb2..42ef9283f9 100644 --- a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss +++ b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss @@ -0,0 +1,115 @@ +@use "../checkbox-bootstrap-theme" as checkbox-theme; + +@include checkbox-theme.bootstrap-checkbox; + +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.filter-panel { + box-sizing: border-box; + width: 218px; + font-family: "Aktiv Grotesk", sans-serif; + background: var(--ig-surface-100); +} + +igx-accordion { + display: flex; + flex-direction: column; + transform: translateY(-1rem); + padding: 8px 0 0; +} + +igx-expansion-panel { + border: 0; + border-radius: 0; + background: transparent; + border-bottom: 1px solid var(--ig-gray-200); +} + +igx-expansion-panel:last-of-type { + border-bottom: 0; +} + +igx-expansion-panel:last-of-type .section-options { + padding-bottom: 0; + margin-bottom: 0; +} + +igx-expansion-panel-header { + --header-background: transparent; + --header-focus-background: transparent; + --header-icon-color: var(--ig-gray-800); + --header-title-color: var(--ig-primary-800); + padding-left: 0; +} + +igx-expansion-panel-header ::ng-deep .igx-expansion-panel__title-wrapper { + margin-left: -0.5rem; +} + +igx-expansion-panel-body { + --body-color: var(--ig-gray-800); + + padding: 0; + background: transparent; +} + +.panel-title { + color: var(--ig-primary-800); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 1rem; + font-weight: 700; + line-height: 1.25rem; +} + +.section-options { + gap: 0; + margin: -0.5rem 0 -1rem; + padding: 0 0 1rem 1rem; +} + +.filter-option { + --size: 20px; + --tick-color: var(--ig-gray-50); + --empty-color: var(--ig-gray-400); + --fill-color: var(--ig-primary-500); + --empty-color-hover: var(--ig-primary-600); + --border-radius: 0.125rem; + --label-color: var(--ig-gray-800); + --ig-subtitle-1-font-family: "Aktiv Grotesk", sans-serif; + --ig-subtitle-1-font-size: 0.875rem; + --ig-subtitle-1-font-weight: 500; + --ig-subtitle-1-line-height: 1.5rem; + --ig-subtitle-1-letter-spacing: 0.1px; + + font-family: "Aktiv Grotesk", sans-serif; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.5rem; + letter-spacing: 0.1px; +} + +.filter-option::part(label) { + color: var(--ig-gray-800); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.5rem; + letter-spacing: 0.1px; + margin-left: -2px; +} + +.filter-option ::ng-deep .igx-checkbox__label { + color: var(--ig-gray-800); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.5rem; + letter-spacing: 0.1px; + margin-left: -2px; +} diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts index e492210351..4a25a93ccf 100644 --- a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts +++ b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts @@ -1,10 +1,63 @@ import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { IgxAccordionComponent } from 'igniteui-angular/accordion'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; + +interface FilterOption { + label: string; + checked: boolean; +} + +interface FilterSection { + title: string; + collapsed: boolean; + options: FilterOption[]; +} @Component({ selector: 'app-checkbox-tailwind-styling', styleUrls: ['./checkbox-tailwind-styling.component.scss'], templateUrl: './checkbox-tailwind-styling.component.html', - imports: [IgxCheckboxComponent] + imports: [ + FormsModule, + IgxCheckboxComponent, + IgxAccordionComponent, + IgxExpansionPanelComponent, + IgxExpansionPanelHeaderComponent, + IgxExpansionPanelTitleDirective, + IgxExpansionPanelBodyComponent + ] }) -export class CheckboxTailwindStylingComponent { } +export class CheckboxTailwindStylingComponent { + public sections: FilterSection[] = [ + { + title: 'Brand', + collapsed: false, + options: [ + { label: 'Nike', checked: true }, + { label: 'Roxy', checked: false }, + { label: 'Guess', checked: false } + ] + }, + { + title: 'Color', + collapsed: false, + options: [ + { label: 'Black', checked: false }, + { label: 'White', checked: true }, + { label: 'Gray', checked: false } + ] + }, + { + title: 'Size', + collapsed: false, + options: [ + { label: 'Small', checked: false }, + { label: 'Medium', checked: true }, + { label: 'Large', checked: false }, + { label: 'Extra large', checked: false } + ] + } + ]; +} diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts index c12dffbf41..e19f7e38bb 100644 --- a/src/app/data-entries/data-entries-routes-data.ts +++ b/src/app/data-entries/data-entries-routes-data.ts @@ -24,9 +24,8 @@ export const dataEntriesRoutesData = { "button-download": { displayName: "Download Button", parentName: "Button" }, "button-styling": { displayName: "Button Style", parentName: "Button" }, "button-tailwind-styling": { displayName: "Button Tailwind Style", parentName: "Button" }, - "checkbox-sample-1": { displayName: "Simple Checkbox", parentName: "Checkbox" }, - "checkbox-sample-2": { displayName: "Multiple Checkboxes", parentName: "Checkbox" }, - "checkbox-sample-3": { displayName: "Indeterminate Checkbox", parentName: "Checkbox" }, + "checkbox-overview": { displayName: "Checkbox Overview", parentName: "Checkbox" }, + "checkbox-states": { displayName: "Checkbox States", parentName: "Checkbox" }, "checkbox-styling": { displayName: "Checkbox Styling", parentName: "Checkbox" }, "checkbox-tailwind-styling": { displayName: "Checkbox Tailwind Styling", parentName: "Checkbox" }, "dropdown-remote": { displayName: "Virtual Dropdown - Remote Data", parentName: "Dropdown" }, diff --git a/src/app/data-entries/data-entries.routes.ts b/src/app/data-entries/data-entries.routes.ts index 8132650c35..0877073505 100644 --- a/src/app/data-entries/data-entries.routes.ts +++ b/src/app/data-entries/data-entries.routes.ts @@ -23,9 +23,8 @@ import { ButtonFabComponent } from './button/button-fab/button-fab.component'; import { ButtonOutlinedComponent } from './button/button-outlined/button-outlined.component'; import { ButtonStylingComponent } from './button/button-styling/button-styling.component'; import { ButtonTailwindStylingComponent } from './button/button-tailwind-styling/button-tailwind-styling.component'; -import { CheckboxSample1Component } from './checkbox/checkbox-sample-1/checkbox-sample-1.component'; -import { CheckboxSample2Component } from './checkbox/checkbox-sample-2/checkbox-sample-2.component'; -import { CheckboxSample3Component } from './checkbox/checkbox-sample-3/checkbox-sample-3.component'; +import { CheckboxOverviewComponent } from './checkbox/checkbox-overview/checkbox-overview.component'; +import { CheckboxStatesComponent } from './checkbox/checkbox-states/checkbox-states.component'; import { CheckboxStylingComponent } from './checkbox/checkbox-styling/checkbox-styling.component'; import { CheckboxTailwindStylingComponent } from './checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component'; import { dataEntriesRoutesData } from './data-entries-routes-data'; @@ -209,19 +208,14 @@ export const DataEntriesRoutes: Routes = [ path: 'button-tailwind-styling' }, { - component: CheckboxSample1Component, - data: dataEntriesRoutesData['checkbox-sample-1'], - path: 'checkbox-sample-1' + component: CheckboxOverviewComponent, + data: dataEntriesRoutesData['checkbox-overview'], + path: 'checkbox-overview' }, { - component: CheckboxSample2Component, - data: dataEntriesRoutesData['checkbox-sample-2'], - path: 'checkbox-sample-2' - }, - { - component: CheckboxSample3Component, - data: dataEntriesRoutesData['checkbox-sample-3'], - path: 'checkbox-sample-3' + component: CheckboxStatesComponent, + data: dataEntriesRoutesData['checkbox-states'], + path: 'checkbox-states' }, { component: CheckboxStylingComponent, From d87267eaf6a38344e146bd1c1891588e676ca330 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 24 Sep 2026 13:29:43 +0300 Subject: [PATCH 2/3] fix(checkbox): update samples styling --- .../checkbox/checkbox-bootstrap-theme.scss | 31 ------------------- .../checkbox-overview.component.scss | 8 ++--- .../checkbox-states.component.scss | 4 --- .../checkbox-styling.component.scss | 4 --- .../checkbox-tailwind-styling.component.scss | 5 +-- 5 files changed, 5 insertions(+), 47 deletions(-) delete mode 100644 src/app/data-entries/checkbox/checkbox-bootstrap-theme.scss diff --git a/src/app/data-entries/checkbox/checkbox-bootstrap-theme.scss b/src/app/data-entries/checkbox/checkbox-bootstrap-theme.scss deleted file mode 100644 index d7428c9c0b..0000000000 --- a/src/app/data-entries/checkbox/checkbox-bootstrap-theme.scss +++ /dev/null @@ -1,31 +0,0 @@ -@use "sass:map"; -@use "igniteui-angular/theming" as *; - -$palette: $light-bootstrap-palette; -$schema: $light-bootstrap-schema; -@mixin bootstrap-checkbox { - :host ::ng-deep igx-checkbox { - @include tokens(checkbox-theme($schema: map.get($schema, checkbox))); - - --size: #{rem(16px)}; - --fill-color: var(--ig-primary-500); - --fill-color-hover: var(--ig-primary-600); - - &:hover, - &:focus-within { - background: transparent; - } - - .igx-checkbox__label, - .igx-checkbox__label:hover, - .igx-checkbox__label:focus { - background: transparent; - } - - .igx-checkbox__composite-wrapper, - .igx-checkbox__ripple { - background: transparent; - box-shadow: none; - } - } -} diff --git a/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss index 2c7be929af..2353160c83 100644 --- a/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss +++ b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss @@ -1,7 +1,3 @@ -@use "../checkbox-bootstrap-theme" as checkbox-theme; - -@include checkbox-theme.bootstrap-checkbox; - :host { display: flex; align-items: center; @@ -54,6 +50,10 @@ margin-top: 0.25rem; } +:host-context([data-ig-theme="indigo"]) .shopping-item + .shopping-item { + margin-top: -0.25rem; +} + .group-header:not(:first-child) + .shopping-item { margin-top: 0.25rem; } diff --git a/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.scss b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.scss index 54e5d6fe11..4584f5d023 100644 --- a/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.scss +++ b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.scss @@ -1,7 +1,3 @@ -@use "../checkbox-bootstrap-theme" as checkbox-theme; - -@include checkbox-theme.bootstrap-checkbox; - :host { display: flex; align-items: center; diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss index 56513de1de..6370072430 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss @@ -1,7 +1,3 @@ -@use "../checkbox-bootstrap-theme" as checkbox-theme; - -@include checkbox-theme.bootstrap-checkbox; - :host { display: flex; align-items: center; diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss index 42ef9283f9..1deb51434d 100644 --- a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss +++ b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss @@ -1,7 +1,3 @@ -@use "../checkbox-bootstrap-theme" as checkbox-theme; - -@include checkbox-theme.bootstrap-checkbox; - :host { display: flex; align-items: center; @@ -78,6 +74,7 @@ igx-expansion-panel-body { --tick-color: var(--ig-gray-50); --empty-color: var(--ig-gray-400); --fill-color: var(--ig-primary-500); + --fill-color-hover: var(--ig-primary-600); --empty-color-hover: var(--ig-primary-600); --border-radius: 0.125rem; --label-color: var(--ig-gray-800); From 638a9061b8456cd6cbfae5dfcedd769ecb8df3e2 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Tue, 29 Sep 2026 13:28:16 +0300 Subject: [PATCH 3/3] fix(checkbox): update samples styling --- .../checkbox-overview.component.scss | 123 ++++++-------- .../checkbox-states.component.scss | 2 + .../checkbox-styling.component.scss | 154 +++++++++++------- .../checkbox-styling.component.ts | 3 +- .../checkbox-tailwind-styling.component.html | 18 +- .../checkbox-tailwind-styling.component.scss | 113 ++----------- .../checkbox-tailwind-styling.component.ts | 3 +- 7 files changed, 180 insertions(+), 236 deletions(-) diff --git a/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss index 2353160c83..08d2d6a02c 100644 --- a/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss +++ b/src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss @@ -10,70 +10,60 @@ position: relative; display: flex; flex-direction: column; - gap: 0.5rem; - width: 24.5rem; - height: 25.5rem; - padding: 1rem; + box-sizing: border-box; + gap: 1rem; + width: 22.5rem; + height: 24.3125rem; + padding: 1rem 0; overflow: hidden; - font-family: "Aktiv Grotesk", sans-serif; border-radius: 0.25rem; background: var(--ig-surface-100); box-shadow: 0 0.0625rem 0.25rem rgb(0 0 0 / 16%); } +/* Bootstrap draws its controls a size bigger than the other themes do, and at + the large size styles.scss asks the page for, the rows stop fitting the + card. Only Bootstrap steps down. */ +@container style(--ig-theme: bootstrap) { + .shopping-list { + --ig-size: var(--ig-size-medium); + } +} + .list { background: transparent; border: none; + gap: 0.25rem; overflow: hidden; } +/* The header keeps the theme's own overline typography; only the inset that + lines it up with the rows below is the design's. */ .group-header { - padding: 0; + padding: 0 1rem; background: transparent; - font-family: var(--ig-body-1-font-family); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: none; -} - -.group-header:first-child { - transform: translateY(-0.25rem); } .shopping-item + .group-header { - margin-top: 1rem; -} - -.shopping-item + .shopping-item { - margin-top: 0.25rem; -} - -:host-context([data-ig-theme="indigo"]) .shopping-item + .shopping-item { - margin-top: -0.25rem; -} - -.group-header:not(:first-child) + .shopping-item { - margin-top: 0.25rem; + margin-top: 0.75rem; } .group-title { - color: var(--ig-primary-500); - font-family: system-ui, -apple-system, "Segoe UI", sans-serif; - font-size: 1rem; - font-weight: 400; - line-height: 1.5rem; - letter-spacing: 0; + color: var(--ig-secondary-500); } .shopping-item { - height: 2.25rem; - min-height: 2.25rem; - gap: 0.25rem; - padding: 0 0.25rem 0 0; background: transparent; border-bottom: none; + --border-color: transparent; + --border-width: 0; +} + +/* The row's own padding and gap sit on the item's content wrapper. */ +.shopping-item ::ng-deep .igx-list-item__content { + padding: 0 1rem; + gap: 0.5rem; + background: transparent; } .shopping-item:hover, @@ -82,52 +72,35 @@ box-shadow: none; } -:host ::ng-deep .shopping-item .igx-list-item__content, -:host ::ng-deep .shopping-item .igx-list-item__content:hover, -:host ::ng-deep .shopping-item .igx-list-item__content:focus-within { - height: 2.25rem; - min-height: 2.25rem; +.shopping-item:hover ::ng-deep .igx-list-item__content, +.shopping-item:focus-within ::ng-deep .igx-list-item__content { background: transparent; box-shadow: none; } -.shopping-item-checked, -.shopping-item-checked:hover, -.shopping-item-checked:focus-within { - background: var(--ig-primary-50); - box-shadow: none; +.shopping-item ::ng-deep .igx-list-item__thumbnail { + margin-inline-start: 0.125rem; } -:host ::ng-deep .shopping-item-checked .igx-list-item__content, -:host ::ng-deep .shopping-item-checked:hover .igx-list-item__content, -:host ::ng-deep .shopping-item-checked:focus-within .igx-list-item__content { - height: 2.25rem; - min-height: 2.25rem; - background: var(--ig-primary-50); +.shopping-item igx-checkbox { + --label-margin: 1.125rem; } -:host ::ng-deep .shopping-item .igx-checkbox__label { - font-family: system-ui, -apple-system, "Segoe UI", sans-serif; - font-size: 1rem; - font-weight: 400; - line-height: 1.5rem; - letter-spacing: 0; - transform: translateX(-0.25rem); +.shopping-item-checked, +.shopping-item-checked:hover, +.shopping-item-checked:focus-within { + background: var(--ig-gray-100); + box-shadow: none; } -.shopping-item igx-checkbox { - --tick-color: var(--ig-gray-50); - --fill-color: var(--ig-primary-500); - --fill-color-hover: var(--ig-primary-600); - --empty-color: var(--ig-gray-300); - --empty-color-hover: var(--ig-gray-300); - transform: translateX(-0.5rem); +.shopping-item-checked ::ng-deep .igx-list-item__content, +.shopping-item-checked:hover ::ng-deep .igx-list-item__content, +.shopping-item-checked:focus-within ::ng-deep .igx-list-item__content { + background: var(--ig-gray-100); } .item-menu { - margin-inline-start: auto; - color: var(--ig-gray-500); - transform: translateX(1.25rem); + color: var(--ig-gray-700); } .item-menu igx-icon { @@ -135,9 +108,9 @@ } .add-item { + --ig-size: var(--ig-size-large); + --ig-fab-button-border-radius: 50%; position: absolute; - inset-inline-end: 1.25rem; + inset-inline-end: 1rem; inset-block-end: 1rem; - background-color: var(--ig-primary-500); - color: var(--ig-gray-50); } diff --git a/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.scss b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.scss index 4584f5d023..e1368ef8d6 100644 --- a/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.scss +++ b/src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.scss @@ -19,10 +19,12 @@ gap: 0.75rem; } +/* the checkboxes are display-only, so they don't offer a pointer */ .state igx-checkbox { display: block; width: 1rem; height: 1rem; + cursor: default; } .state igx-checkbox ::ng-deep .igx-checkbox__composite-wrapper { diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss index 6370072430..e5ec9c7744 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss @@ -1,4 +1,8 @@ -:host { +@use "sass:meta"; +@import url("https://use.typekit.net/bng2zgw.css"); +@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"); + +app-checkbox-styling { display: flex; align-items: center; justify-content: center; @@ -7,52 +11,77 @@ } .team-card { + /* The design's own palette and typeface. They are set here instead of + coming from the theme, so the sample keeps its custom look in every theme. */ + --team-surface: #fff; + --team-primary: #0176ff; + --team-gray-100: #f3f6fa; + --team-gray-200: #e5ebf3; + --team-gray-400: #a9b8cc; + --team-gray-500: #7d91ab; + --team-gray-600: #556c86; + --team-gray-700: #344b65; + --team-gray-900: #00142b; + /* aktiv-grotesk is the kit's family name. */ + --ig-font-family: aktiv-grotesk, sans-serif; + + --ig-checkbox-empty-color: var(--team-gray-400); + --ig-checkbox-empty-color-hover: var(--team-gray-400); + --ig-checkbox-fill-color: var(--team-primary); + --ig-checkbox-fill-color-hover: var(--team-primary); + --ig-checkbox-tick-color: #fff; + --ig-checkbox-tick-color-hover: #fff; + display: flex; flex-direction: column; - gap: 0.25rem; - width: 24.3125rem; - padding: 1rem; - border-radius: 0.5rem; - background: var(--ig-surface-500); - box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 12%); + box-sizing: border-box; + width: 26.3125rem; + padding: 0.5rem 0; + border: 1px solid var(--team-gray-200); + border-radius: 0.75rem; + background: var(--team-surface); + font-family: var(--ig-font-family); } .team-title { - margin: 0 0 0.5rem; - color: var(--ig-gray-600); - font-family: "Aktiv Grotesk", sans-serif; - font-size: 10px; - font-weight: 400; - line-height: 16px; - letter-spacing: 1.5px; - text-transform: uppercase; + display: flex; + align-items: center; + height: 2rem; + margin: 0; + padding: 0 1rem; + color: var(--team-gray-500); + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); } .select-all { - --label-color: var(--ig-primary-500); - --tick-color: var(--ig-gray-50); - --fill-color: var(--ig-primary-500); - --fill-color-hover: var(--ig-primary-600); + --ig-checkbox-empty-color: var(--team-gray-500); + --ig-checkbox-empty-color-hover: var(--team-gray-500); + --ig-checkbox-label-color: var(--team-gray-600); + --ig-checkbox-label-color-hover: var(--team-gray-600); + box-sizing: border-box; width: 100%; justify-content: space-between; - padding: 0.5rem; - border-radius: 0.25rem; - font-family: system-ui, -apple-system, "Segoe UI", sans-serif; - font-size: 1rem; + padding: 0.5rem 1rem; } -.select-all ::ng-deep .igx-checkbox__label, -.select-all ::ng-deep .igx-checkbox__label:hover, -.select-all ::ng-deep .igx-checkbox__label:focus { - color: var(--ig-primary-500); +.select-all .igx-checkbox__label--before { + margin-inline-start: 0; + font-size: 1rem; + font-weight: 600; + line-height: 1.5rem; + letter-spacing: 0.15px; } -.select-all ::ng-deep .igx-checkbox__composite-wrapper { - width: 1rem; - height: 1rem; - margin-right: 0.5rem; - padding: 0; +/* A 24px slot around the 20px box, as in the design. */ +.select-all .igx-checkbox__composite-wrapper, +.member-check .igx-checkbox__composite-wrapper { + margin: 0.125rem; } .members { @@ -62,10 +91,17 @@ } .member { - gap: 0.75rem; - border-radius: 0.25rem; background: transparent; border-bottom: none; + --border-color: transparent; + --border-width: 0; +} + +/* The row's own padding and gap sit on the item's content wrapper. */ +.member .igx-list-item__content { + gap: 1rem; + padding: 0.5rem 1rem; + background: transparent; } .member:hover, @@ -74,8 +110,8 @@ box-shadow: none; } -.member:hover ::ng-deep .igx-list-item__content, -.member:focus-within ::ng-deep .igx-list-item__content { +.member:hover .igx-list-item__content, +.member:focus-within .igx-list-item__content { background: transparent; box-shadow: none; } @@ -83,41 +119,49 @@ .member-selected, .member-selected:hover, .member-selected:focus-within { - background: var(--ig-primary-50); + background: var(--team-gray-100); } -.member-selected ::ng-deep .igx-list-item__content, -.member-selected:hover ::ng-deep .igx-list-item__content, -.member-selected:focus-within ::ng-deep .igx-list-item__content { - background: var(--ig-primary-50); -} - -.member-check { - --tick-color: var(--ig-gray-50); - --fill-color: var(--ig-primary-500); - --fill-color-hover: var(--ig-primary-600); +.member-selected .igx-list-item__content, +.member-selected:hover .igx-list-item__content, +.member-selected:focus-within .igx-list-item__content { + background: var(--team-gray-100); } .member igx-avatar { --ig-size: var(--ig-size-small); } -.member-name { +.member .member-name { + display: block; + color: var(--team-gray-900); font-size: 0.875rem; font-weight: 600; + line-height: 1.125rem; } -.member-email { - color: var(--ig-gray-600); +.member .member-email { + display: block; + color: var(--team-gray-700); font-size: 0.75rem; + line-height: 1rem; + letter-spacing: 0.4px; } .continue-button { - margin-top: 1rem; align-self: flex-end; - background: var(--ig-primary-500); - color: var(--ig-gray-50); - font-family: system-ui, -apple-system, "Segoe UI", sans-serif; - font-weight: 400; + margin: 1rem 1rem 0; + min-width: auto; + width: 5.25rem; + min-height: 1.875rem; + height: 1.875rem; + padding: 0 0.75rem; + border-color: var(--team-primary); + background: var(--team-primary); + color: #fff; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.375rem; + letter-spacing: 0.1px; text-transform: none; } diff --git a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts index 66733afb39..ffb600e5be 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts +++ b/src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; @@ -14,6 +14,7 @@ interface TeamMember { @Component({ selector: 'app-checkbox-styling', + encapsulation: ViewEncapsulation.None, styleUrls: ['./checkbox-styling.component.scss'], templateUrl: './checkbox-styling.component.html', imports: [ diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html index e501e899eb..9d0f5b3fad 100644 --- a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html +++ b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html @@ -1,17 +1,21 @@ -
- +
+ @for (section of sections; track section.title) { - + - {{ section.title }} + {{ section.title }} -
+
@for (option of section.options; track option.label) { - - {{ option.label }} + + {{ option.label }} }
diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss index 1deb51434d..ce444be31c 100644 --- a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss +++ b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.scss @@ -1,4 +1,8 @@ -:host { +@use "sass:meta"; +@import url("https://use.typekit.net/bng2zgw.css"); +@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"); + +app-checkbox-tailwind-styling { display: flex; align-items: center; justify-content: center; @@ -6,107 +10,22 @@ padding: 1rem; } -.filter-panel { - box-sizing: border-box; - width: 218px; - font-family: "Aktiv Grotesk", sans-serif; - background: var(--ig-surface-100); -} - -igx-accordion { - display: flex; - flex-direction: column; - transform: translateY(-1rem); - padding: 8px 0 0; -} - -igx-expansion-panel { - border: 0; - border-radius: 0; - background: transparent; - border-bottom: 1px solid var(--ig-gray-200); -} - -igx-expansion-panel:last-of-type { - border-bottom: 0; -} - -igx-expansion-panel:last-of-type .section-options { - padding-bottom: 0; - margin-bottom: 0; -} - -igx-expansion-panel-header { - --header-background: transparent; - --header-focus-background: transparent; - --header-icon-color: var(--ig-gray-800); - --header-title-color: var(--ig-primary-800); - padding-left: 0; -} - -igx-expansion-panel-header ::ng-deep .igx-expansion-panel__title-wrapper { - margin-left: -0.5rem; +/* The design's 44px header: an 8px inset around the title's 28px box. */ +igx-expansion-panel-header .igx-expansion-panel__header-inner { + padding: 0.5rem 1rem; } +/* The body's own inset is the theme's, so it is set here instead: 6px, which + the option's 10px of padding completes into the header's 16px. */ igx-expansion-panel-body { - --body-color: var(--ig-gray-800); - - padding: 0; - background: transparent; -} - -.panel-title { - color: var(--ig-primary-800); - font-family: "Aktiv Grotesk", sans-serif; - font-size: 1rem; - font-weight: 700; - line-height: 1.25rem; -} - -.section-options { - gap: 0; - margin: -0.5rem 0 -1rem; - padding: 0 0 1rem 1rem; + padding: 0 0.375rem 0.5rem; } +/* A 40px row in every theme. The padding sits on the checkbox itself rather + than on the box, so the padding a theme adds around the box for its ripple + can no longer stretch the row. */ .filter-option { - --size: 20px; - --tick-color: var(--ig-gray-50); - --empty-color: var(--ig-gray-400); - --fill-color: var(--ig-primary-500); - --fill-color-hover: var(--ig-primary-600); - --empty-color-hover: var(--ig-primary-600); - --border-radius: 0.125rem; - --label-color: var(--ig-gray-800); - --ig-subtitle-1-font-family: "Aktiv Grotesk", sans-serif; - --ig-subtitle-1-font-size: 0.875rem; - --ig-subtitle-1-font-weight: 500; - --ig-subtitle-1-line-height: 1.5rem; - --ig-subtitle-1-letter-spacing: 0.1px; - - font-family: "Aktiv Grotesk", sans-serif; - font-size: 0.875rem; - font-weight: 500; - line-height: 1.5rem; - letter-spacing: 0.1px; -} - -.filter-option::part(label) { - color: var(--ig-gray-800); - font-family: "Aktiv Grotesk", sans-serif; - font-size: 0.875rem; - font-weight: 500; - line-height: 1.5rem; - letter-spacing: 0.1px; - margin-left: -2px; -} + --label-margin: 0.75rem; -.filter-option ::ng-deep .igx-checkbox__label { - color: var(--ig-gray-800); - font-family: "Aktiv Grotesk", sans-serif; - font-size: 0.875rem; - font-weight: 500; - line-height: 1.5rem; - letter-spacing: 0.1px; - margin-left: -2px; + padding: 0.5rem 0.625rem; } diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts index 4a25a93ccf..1540c59e11 100644 --- a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts +++ b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IgxAccordionComponent } from 'igniteui-angular/accordion'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; @@ -17,6 +17,7 @@ interface FilterSection { @Component({ selector: 'app-checkbox-tailwind-styling', + encapsulation: ViewEncapsulation.None, styleUrls: ['./checkbox-tailwind-styling.component.scss'], templateUrl: './checkbox-tailwind-styling.component.html', imports: [