From f0de1974a5e00f600ebd3128772ecabd1f08273d Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 6 Oct 2026 10:45:17 +0300 Subject: [PATCH] feat(breadcrumbs): add dropdown sample + add theme-picker to 'state' and 'size' samples --- .../configs/BreadcrumbsConfigGenerator.ts | 6 ++ .../breadcrumbs-dropdown.component.html | 24 ++++++++ .../breadcrumbs-dropdown.component.scss | 57 +++++++++++++++++++ .../breadcrumbs-dropdown.component.ts | 24 ++++++++ .../breadcrumbs-sizes.component.scss | 1 + .../breadcrumbs-states.component.scss | 48 +++++++++++++++- src/app/layouts/layouts-routes-data.ts | 1 + src/app/layouts/layouts.routes.ts | 6 ++ 8 files changed, 164 insertions(+), 3 deletions(-) create mode 100644 src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.html create mode 100644 src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.scss create mode 100644 src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.ts diff --git a/live-editing/configs/BreadcrumbsConfigGenerator.ts b/live-editing/configs/BreadcrumbsConfigGenerator.ts index 4b4214078..b12db721e 100644 --- a/live-editing/configs/BreadcrumbsConfigGenerator.ts +++ b/live-editing/configs/BreadcrumbsConfigGenerator.ts @@ -29,6 +29,12 @@ export class BreadcrumbsConfigGenerator implements IConfigGenerator { shortenComponentPathBy: "/layouts/breadcrumbs/" })); + configs.push(new Config({ + component: 'BreadcrumbsDropdownComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/layouts/breadcrumbs/" + })); + configs.push(new Config({ component: 'BreadcrumbsCustomSeparatorComponent', appConfig: BaseAppConfig, diff --git a/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.html b/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.html new file mode 100644 index 000000000..e3eee9043 --- /dev/null +++ b/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.html @@ -0,0 +1,24 @@ + diff --git a/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.scss b/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.scss new file mode 100644 index 000000000..124713d5c --- /dev/null +++ b/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.scss @@ -0,0 +1,57 @@ +:host { + display: flex; + justify-content: center; + height: 100%; + overflow: auto; +} + +igc-breadcrumbs { + --ig-size: var(--ig-size-medium); +} + +[slot="target"] { + color: var(--text-color); + + &:hover { + color: var(--hover-text-color); + cursor: pointer; + } + + &:focus { + color: var(--focus-text-color); + } +} + +igc-dropdown-item[selected] { + background: var(--background-color); + outline: none; + color: var(--item-text-color); + + igc-icon { + color: var(--item-icon-color); + } + + &:hover { + background: var(--hover-item-background); + color: var(--hover-item-text-color); + + igc-icon { + color: var(--hover-item-icon-color); + } + } +} + +igc-icon { + --ig-size: 2; +} + +@layer base { + a { + color: revert-layer; + } + + * { + padding: revert-layer; + margin: revert-layer; + } +} diff --git a/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.ts b/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.ts new file mode 100644 index 000000000..82aa65b62 --- /dev/null +++ b/src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.ts @@ -0,0 +1,24 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcBreadcrumbComponent, IgcBreadcrumbsComponent, IgcDropdownComponent, IgcDropdownItemComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents'; + +defineComponents(IgcBreadcrumbsComponent, IgcBreadcrumbComponent, IgcDropdownComponent, IgcDropdownItemComponent, IgcIconComponent); + +const threeDotsIcon = + ''; + +const folderIcon = + ''; + +if (typeof window !== 'undefined') { + registerIconFromText('three-dots', threeDotsIcon); + registerIconFromText('folder', folderIcon); +} + +@Component({ + selector: 'app-breadcrumbs-dropdown', + styleUrls: ['./breadcrumbs-dropdown.component.scss'], + templateUrl: './breadcrumbs-dropdown.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) + +export class BreadcrumbsDropdownComponent { } diff --git a/src/app/layouts/breadcrumbs/breadcrumbs-sizes/breadcrumbs-sizes.component.scss b/src/app/layouts/breadcrumbs/breadcrumbs-sizes/breadcrumbs-sizes.component.scss index a3d90d08d..1a78dec48 100644 --- a/src/app/layouts/breadcrumbs/breadcrumbs-sizes/breadcrumbs-sizes.component.scss +++ b/src/app/layouts/breadcrumbs/breadcrumbs-sizes/breadcrumbs-sizes.component.scss @@ -4,6 +4,7 @@ height: 100%; align-items: center; overflow: auto; + font-family: var(--ig-font-family); } .small { diff --git a/src/app/layouts/breadcrumbs/breadcrumbs-states/breadcrumbs-states.component.scss b/src/app/layouts/breadcrumbs/breadcrumbs-states/breadcrumbs-states.component.scss index ad8b1b3ed..c7ae3e26a 100644 --- a/src/app/layouts/breadcrumbs/breadcrumbs-states/breadcrumbs-states.component.scss +++ b/src/app/layouts/breadcrumbs/breadcrumbs-states/breadcrumbs-states.component.scss @@ -5,6 +5,7 @@ max-height: 15rem; padding-block-start: 1rem; overflow: auto; + font-family: var(--ig-font-family); } igc-breadcrumbs { @@ -28,7 +29,6 @@ igc-breadcrumbs { a { color: var(--focus-text-color); - text-decoration: underline var(--focus-underline-color); } } @@ -49,7 +49,6 @@ igc-breadcrumbs { a { color: var(--focus-hover-text-color); - text-decoration: underline var(--focus-hover-underline-color); } } @@ -60,7 +59,6 @@ igc-breadcrumbs { a { color: var(--focus-pressed-text-color); - text-decoration: underline var(--focus-pressed-underline-color); } } @@ -74,6 +72,44 @@ igc-breadcrumbs { } } +[data-igd-theme="material"] { + .state-focused-pressed a, + .state-focused-hover a, + .state-focused a { + text-decoration: underline var(--focus-pressed-underline-color); + } +} + +[data-igd-theme="fluent"] { + .state-focused-pressed::part(label), + .state-focused-hover::part(label), + .state-focused::part(label) { + outline: .0625rem solid var(--focus-border-color); + } +} + +[data-igd-theme="bootstrap"] { + .state-focused-pressed::part(label), + .state-focused-hover::part(label), + .state-focused::part(label) { + outline: .25rem solid var(--focus-border-color); + border-radius: 0.25rem; + } +} + +[data-igd-theme="indigo"] { + .state-focused-pressed::part(label), + .state-focused-hover::part(label), + .state-focused::part(label) { + outline: .1875rem solid var(--focus-border-color); + border-radius: 2rem; + } + + .state-disabled igc-icon { + opacity: 0.2; + } +} + span { color: #7d8a96; font-size: 0.875rem; @@ -100,6 +136,12 @@ igc-breadcrumbs:nth-of-type(n+4) { grid-row: 2; } +@layer base { + a { + color: revert-layer; + } +} + @media (width < 510px) { :host { max-height: unset; diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts index cb49866c6..1b3a1d86d 100644 --- a/src/app/layouts/layouts-routes-data.ts +++ b/src/app/layouts/layouts-routes-data.ts @@ -20,6 +20,7 @@ export const layoutsRoutesData = { 'breadcrumbs-overview': { displayName: 'Breadcrumbs Overview', parentName: 'Breadcrumbs' }, 'breadcrumbs-custom-separator': { displayName: 'Breadcrumbs Custom Separator', parentName: 'Breadcrumbs' }, 'breadcrumbs-prefix-suffix': { displayName: 'Breadcrumbs Prefix and Suffix', parentName: 'Breadcrumbs' }, + 'breadcrumbs-dropdown': { displayName: 'Breadcrumbs Dropdown', parentName: 'Breadcrumbs' }, 'breadcrumbs-styling': { displayName: 'Breadcrumbs Styling', parentName: 'Breadcrumbs' }, 'breadcrumbs-tailwind-styling': { displayName: 'Breadcrumbs Tailwind Styling', parentName: 'Breadcrumbs' }, 'breadcrumbs-wrapping': { displayName: 'Breadcrumbs Wrapping', parentName: 'Breadcrumbs' }, diff --git a/src/app/layouts/layouts.routes.ts b/src/app/layouts/layouts.routes.ts index ff1087244..576d5a7c9 100644 --- a/src/app/layouts/layouts.routes.ts +++ b/src/app/layouts/layouts.routes.ts @@ -9,6 +9,7 @@ import { AvatarTailwindStylingSampleComponent } from './avatar/avatar-tailwind-s import { BreadcrumbsOverviewComponent } from './breadcrumbs/breadcrumbs-overview/breadcrumbs-overview.component'; import { BreadcrumbsCustomSeparatorComponent } from './breadcrumbs/breadcrumbs-custom-separator/breadcrumbs-custom-separator.component'; import { BreadcrumbsPrefixSuffixComponent } from './breadcrumbs/breadcrumbs-prefix-suffix/breadcrumbs-prefix-suffix.component'; +import { BreadcrumbsDropdownComponent } from './breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component'; import { BreadcrumbsStylingComponent } from './breadcrumbs/breadcrumbs-styling/breadcrumbs-styling.component'; import { BreadcrumbsTailwindStylingComponent } from './breadcrumbs/breadcrumbs-tailwind-styling/breadcrumbs-tailwind-styling.component'; import { BreadcrumbsWrappingComponent } from './breadcrumbs/breadcrumbs-wrapping/breadcrumbs-wrapping.component'; @@ -221,6 +222,11 @@ export const LayoutsRoutes: Routes = [ data: layoutsRoutesData['breadcrumbs-prefix-suffix'], path: 'breadcrumbs-prefix-suffix' }, + { + component: BreadcrumbsDropdownComponent, + data: layoutsRoutesData['breadcrumbs-dropdown'], + path: 'breadcrumbs-dropdown' + }, { component: BreadcrumbsStylingComponent, data: layoutsRoutesData['breadcrumbs-styling'],