feat(checkbox): update samples content

live-editing/configs/CheckboxConfigGenerator.ts

@@ -7,29 +7,30 @@ export class CheckboxConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // 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/"
         }));

src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.html

@@ -0,0 +1,23 @@
+<div class="shopping-list">
+    <igx-list class="list">
+        @for (group of groups; track group.title) {
+            <igx-list-item [isHeader]="true" class="group-header">
+                <span class="group-title">{{ group.title }}</span>
+            </igx-list-item>
+            @for (item of group.items; track item.label) {
+                <igx-list-item class="shopping-item" [class.shopping-item-checked]="item.checked">
+                    <igx-checkbox igxListThumbnail [(ngModel)]="item.checked">
+                        <span>{{ item.label }}</span>
+                    </igx-checkbox>
+                    <button igxListAction type="button" igxIconButton="flat" class="item-menu" [attr.aria-label]="'Options for ' + item.label">
+                        <igx-icon>more_vert</igx-icon>
+                    </button>
+                </igx-list-item>
+            }
+        }
+    </igx-list>
+
+    <button igxButton="fab" type="button" class="add-item" aria-label="Add item">
+        <igx-icon>add</igx-icon>
+    </button>
+</div>

src/app/data-entries/checkbox/checkbox-overview/checkbox-overview.component.scss

@@ -0,0 +1,116 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.shopping-list {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    gap: 1rem;
+    width: 22.5rem;
+    height: 24.3125rem;
+    padding: 1rem 0;
+    overflow: hidden;
+    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 1rem;
+    background: transparent;
+}
+
+.shopping-item + .group-header {
+    margin-top: 0.75rem;
+}
+
+.group-title {
+    color: var(--ig-secondary-500);
+}
+
+.shopping-item {
+    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,
+.shopping-item:focus-within {
+    background: transparent;
+    box-shadow: none;
+}
+
+.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 ::ng-deep .igx-list-item__thumbnail {
+    margin-inline-start: 0.125rem;
+}
+
+.shopping-item igx-checkbox {
+    --label-margin: 1.125rem;
+}
+
+.shopping-item-checked,
+.shopping-item-checked:hover,
+.shopping-item-checked:focus-within {
+    background: var(--ig-gray-100);
+    box-shadow: none;
+}
+
+.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 {
+    color: var(--ig-gray-700);
+}
+
+.item-menu igx-icon {
+    font-size: 1.5rem;
+}
+
+.add-item {
+    --ig-size: var(--ig-size-large);
+    --ig-fab-button-border-radius: 50%;
+    position: absolute;
+    inset-inline-end: 1rem;
+    inset-block-end: 1rem;
+}

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 }
+            ]
+        }
+    ];
+}

src/app/data-entries/checkbox/checkbox-states/checkbox-states.component.html

@@ -0,0 +1,27 @@
+<!-- the checkboxes are display-only, so user interaction is blocked -->
+<div class="states">
+    <div class="state">
+        <span class="state-label">Indeterminate</span>
+        <igx-checkbox [readonly]="true" [indeterminate]="true" aria-label="Indeterminate"></igx-checkbox>
+    </div>
+    <div class="state">
+        <span class="state-label">On</span>
+        <igx-checkbox [readonly]="true" [checked]="true" aria-label="On"></igx-checkbox>
+    </div>
+    <div class="state">
+        <span class="state-label">Off</span>
+        <igx-checkbox [readonly]="true" aria-label="Off"></igx-checkbox>
+    </div>
+    <div class="state">
+        <span class="state-label">Disabled</span>
+        <igx-checkbox [disabled]="true" aria-label="Disabled"></igx-checkbox>
+    </div>
+    <div class="state">
+        <span class="state-label">Invalid</span>
+        <igx-checkbox [readonly]="true" [invalid]="true" aria-label="Invalid"></igx-checkbox>
+    </div>
+    <div class="state">
+        <span class="state-label">Required</span>
+        <igx-checkbox [readonly]="true" [required]="true" aria-label="Required"></igx-checkbox>
+    </div>
+</div>