From f5aa79a74d1f37b84d2e21b970dec91787e9c5e8 Mon Sep 17 00:00:00 2001 From: Andrei Fateev Date: Fri, 17 Jul 2026 13:27:18 +0200 Subject: [PATCH 1/3] docs: add code examples for Scheduler, Select, Sidebar Menu --- .../code-example/code-example.component.html | 46 +-- .../code-example/code-example.component.scss | 34 +++ .../code-example.component.spec.ts | 79 +++++ .../code-example/code-example.component.ts | 5 +- .../scheduler-page.component.html | 7 +- .../scheduler-page.component.scss | 5 - .../scheduler-page.component.ts | 9 +- .../scheduler-page/scheduler-page.examples.ts | 29 ++ .../select-page/select-page.component.html | 282 +++++++++++------- .../select-page/select-page.component.scss | 6 - .../select-page/select-page.component.ts | 6 +- .../pages/select-page/select-page.examples.ts | 220 ++++++++++++++ .../sidebar-menu-page.component.html | 18 +- .../sidebar-menu-page.component.scss | 10 +- .../sidebar-menu-page.component.ts | 6 +- .../sidebar-menu-page.examples.ts | 60 ++++ 16 files changed, 669 insertions(+), 153 deletions(-) create mode 100644 projects/composition/src/app/pages/scheduler-page/scheduler-page.examples.ts create mode 100644 projects/composition/src/app/pages/select-page/select-page.examples.ts create mode 100644 projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.examples.ts diff --git a/projects/composition/src/app/components/code-example/code-example.component.html b/projects/composition/src/app/components/code-example/code-example.component.html index e2417ce31..e3070dc2c 100644 --- a/projects/composition/src/app/components/code-example/code-example.component.html +++ b/projects/composition/src/app/components/code-example/code-example.component.html @@ -1,4 +1,6 @@ -
+
@if (label()) {

{{ label() }} @@ -11,18 +13,20 @@

[attr.aria-labelledby]="label() ? instanceId + '-label' : null" [attr.aria-label]="label() ? null : 'Code example'" (keydown)="navigateTabs($event)"> - + @if (!previewOutside()) { + + } @if (htmlCode()) {

+ [attr.id]="previewOutside() ? null : instanceId + '-panel-preview'" + [attr.aria-labelledby]=" + previewOutside() ? null : instanceId + '-tab-preview' + " + [attr.aria-hidden]="previewOutside() ? null : activeTab() !== 'preview'" + [attr.tabindex]="previewOutside() ? null : previewTabIndex()" + [class.code-example__panel--hidden]=" + !previewOutside() && activeTab() !== 'preview' + ">
diff --git a/projects/composition/src/app/components/code-example/code-example.component.scss b/projects/composition/src/app/components/code-example/code-example.component.scss index b3787eb52..e69024fb8 100644 --- a/projects/composition/src/app/components/code-example/code-example.component.scss +++ b/projects/composition/src/app/components/code-example/code-example.component.scss @@ -97,9 +97,43 @@ top: 0.625rem; right: 0.75rem; z-index: 1; + + ::ng-deep button { + background-color: var(--cps-surface-elevated) !important; + } } &__panel--hidden { display: none; } + + &--preview-outside { + display: flex; + flex-direction: column; + + .code-example__card { + display: contents; + } + + .code-example__preview { + order: 1; + padding: 0; + margin-bottom: 1.5rem; + background-color: transparent; + border-radius: 0; + } + + .code-example__tabbar { + order: 2; + border: 0.0625rem solid var(--cps-color-line); + border-radius: 0.4375rem 0.4375rem 0 0; + } + + .code-example__code { + order: 3; + border: 0.0625rem solid var(--cps-color-line); + border-top: none; + border-radius: 0 0 0.4375rem 0.4375rem; + } + } } diff --git a/projects/composition/src/app/components/code-example/code-example.component.spec.ts b/projects/composition/src/app/components/code-example/code-example.component.spec.ts index df8b77430..8c7dc4e56 100644 --- a/projects/composition/src/app/components/code-example/code-example.component.spec.ts +++ b/projects/composition/src/app/components/code-example/code-example.component.spec.ts @@ -250,6 +250,85 @@ describe('CodeExampleComponent', () => { }); }); + describe('previewOutside', () => { + it('does not render a Preview tab', () => { + fixture = TestBed.createComponent(CodeExampleComponent); + component = fixture.componentInstance; + fixture.componentRef.setInput('htmlCode', '
'); + fixture.componentRef.setInput('tsCode', 'const x = 1;'); + fixture.componentRef.setInput('previewOutside', true); + fixture.detectChanges(); + + const tabs = fixture.debugElement.queryAll(By.css('[role="tab"]')); + expect(tabs.length).toBe(2); + expect(tabs[0].nativeElement.textContent.trim()).toBe('HTML'); + expect(tabs[1].nativeElement.textContent.trim()).toBe('TS'); + }); + + it('never hides the preview panel, regardless of the active tab', () => { + fixture = TestBed.createComponent(CodeExampleComponent); + component = fixture.componentInstance; + fixture.componentRef.setInput('htmlCode', '
'); + fixture.componentRef.setInput('tsCode', 'const x = 1;'); + fixture.componentRef.setInput('previewOutside', true); + fixture.detectChanges(); + component.activeTab.set('ts'); + fixture.detectChanges(); + + const previewPanel = fixture.debugElement.query( + By.css('.code-example__preview') + ); + expect(previewPanel).not.toBeNull(); + expect( + previewPanel.nativeElement.classList.contains( + 'code-example__panel--hidden' + ) + ).toBe(false); + expect(previewPanel.nativeElement.getAttribute('aria-hidden')).toBe(null); + }); + + it('does not render tab-related ARIA attributes on the preview panel', () => { + fixture = TestBed.createComponent(CodeExampleComponent); + component = fixture.componentInstance; + fixture.componentRef.setInput('htmlCode', '
'); + fixture.componentRef.setInput('previewOutside', true); + fixture.detectChanges(); + + const previewPanel = fixture.debugElement.query( + By.css('.code-example__preview') + ); + expect(previewPanel.nativeElement.getAttribute('role')).toBe(null); + expect(previewPanel.nativeElement.getAttribute('id')).toBe(null); + expect(previewPanel.nativeElement.getAttribute('aria-labelledby')).toBe( + null + ); + }); + + it('renders the host with the preview-outside modifier class', () => { + fixture = TestBed.createComponent(CodeExampleComponent); + component = fixture.componentInstance; + fixture.componentRef.setInput('htmlCode', '
'); + fixture.componentRef.setInput('previewOutside', true); + fixture.detectChanges(); + + const host = fixture.debugElement.query(By.css('.code-example')); + expect( + host.nativeElement.classList.contains('code-example--preview-outside') + ).toBe(true); + }); + + it('defaults active tab to the first available tab instead of preview', () => { + fixture = TestBed.createComponent(CodeExampleComponent); + component = fixture.componentInstance; + fixture.componentRef.setInput('htmlCode', '
'); + fixture.componentRef.setInput('tsCode', 'const x = 1;'); + fixture.componentRef.setInput('previewOutside', true); + fixture.detectChanges(); + + expect(component.activeTab()).toBe('html'); + }); + }); + describe('tabindex', () => { it('preview tabpanel has tabindex -1 by default (interactive content)', () => { fixture = TestBed.createComponent(CodeExampleComponent); diff --git a/projects/composition/src/app/components/code-example/code-example.component.ts b/projects/composition/src/app/components/code-example/code-example.component.ts index 23f81568d..83ba51787 100644 --- a/projects/composition/src/app/components/code-example/code-example.component.ts +++ b/projects/composition/src/app/components/code-example/code-example.component.ts @@ -32,6 +32,7 @@ export class CodeExampleComponent { tsCode = input(); label = input(''); isPreviewNonInteractive = input(false); + previewOutside = input(false); private sanitizer = inject(DomSanitizer); @@ -55,7 +56,7 @@ export class CodeExampleComponent { ); } - const availableTabs: TabId[] = ['preview']; + const availableTabs: TabId[] = this.previewOutside() ? [] : ['preview']; if (htmlCode) { const htmlResult = hljs.highlight(htmlCode.trim(), { language: 'xml' }); @@ -78,7 +79,7 @@ export class CodeExampleComponent { this.tabs.set(availableTabs); if (!this.tabs().includes(this.activeTab())) { - this.activeTab.set('preview'); + this.activeTab.set(availableTabs[0] ?? 'preview'); } }); } diff --git a/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.html b/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.html index 3d3b1ae7b..fc245b876 100644 --- a/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.html +++ b/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.html @@ -2,7 +2,10 @@ [componentData]="componentData" [services]="serviceData"> -
+ -
+ diff --git a/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.scss b/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.scss index 49eecc429..e69de29bb 100644 --- a/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.scss +++ b/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.scss @@ -1,5 +0,0 @@ -.scheduler-wrapper { - margin-left: 0.5rem; - margin-right: 0.5rem; - margin-bottom: 0.5rem; -} diff --git a/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.ts b/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.ts index 21e95a51d..7f2ee0c3c 100644 --- a/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.ts +++ b/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.ts @@ -3,10 +3,16 @@ import { CpsSchedulerComponent } from 'cps-ui-kit'; import ComponentData from '../../api-data/cps-scheduler.json'; import ServiceData from '../../api-data/cps-cron-validation.json'; import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component'; +import { CodeExampleComponent } from '../../components/code-example/code-example.component'; +import { schedulerExamples } from './scheduler-page.examples'; @Component({ selector: 'app-scheduler-page', - imports: [CpsSchedulerComponent, ComponentDocsViewerComponent], + imports: [ + CpsSchedulerComponent, + ComponentDocsViewerComponent, + CodeExampleComponent + ], templateUrl: './scheduler-page.component.html', styleUrl: './scheduler-page.component.scss', host: { class: 'composition-page' } @@ -14,6 +20,7 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi export class SchedulerPageComponent { componentData = ComponentData; serviceData = [ServiceData]; + readonly examples = schedulerExamples; cronExpression = '30 9 ? 7/4 WED#5 *'; timeZone = 'UTC'; diff --git a/projects/composition/src/app/pages/scheduler-page/scheduler-page.examples.ts b/projects/composition/src/app/pages/scheduler-page/scheduler-page.examples.ts new file mode 100644 index 000000000..fabbad700 --- /dev/null +++ b/projects/composition/src/app/pages/scheduler-page/scheduler-page.examples.ts @@ -0,0 +1,29 @@ +export const schedulerExamples: Record = + { + basicUsage: { + html: ` +`, + ts: ` +cronExpression = '30 9 ? 7/4 WED#5 *'; +timeZone = 'UTC'; + +onCronExpressionChanged(cron: string) { + console.log('CRON expression', cron); +} + +onTimezoneChanged(tz: string) { + console.log('Time zone', tz); +}` + } + }; diff --git a/projects/composition/src/app/pages/select-page/select-page.component.html b/projects/composition/src/app/pages/select-page/select-page.component.html index 88dd53253..59167351d 100644 --- a/projects/composition/src/app/pages/select-page/select-page.component.html +++ b/projects/composition/src/app/pages/select-page/select-page.component.html @@ -1,7 +1,10 @@ -
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
- - - - - - - - - - -
- - {{ syncVal }} -
- - - - + [(ngModel)]="syncVal" + [ngModelOptions]="{ standalone: true }"> + {{ syncVal }}
- + + + + + + + + + + + diff --git a/projects/composition/src/app/pages/select-page/select-page.component.scss b/projects/composition/src/app/pages/select-page/select-page.component.scss index 18606114a..fe6f52680 100644 --- a/projects/composition/src/app/pages/select-page/select-page.component.scss +++ b/projects/composition/src/app/pages/select-page/select-page.component.scss @@ -1,9 +1,3 @@ -.selects-group { - gap: 1.5rem; - display: flex; - flex-direction: column; -} - .sync-val-example { display: flex; align-items: center; diff --git a/projects/composition/src/app/pages/select-page/select-page.component.ts b/projects/composition/src/app/pages/select-page/select-page.component.ts index f6d3bb533..92cc7f581 100644 --- a/projects/composition/src/app/pages/select-page/select-page.component.ts +++ b/projects/composition/src/app/pages/select-page/select-page.component.ts @@ -10,13 +10,16 @@ import { CpsSelectComponent } from 'cps-ui-kit'; import ComponentData from '../../api-data/cps-select.json'; import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component'; +import { CodeExampleComponent } from '../../components/code-example/code-example.component'; +import { selectExamples } from './select-page.examples'; @Component({ imports: [ CpsSelectComponent, FormsModule, ReactiveFormsModule, - ComponentDocsViewerComponent + ComponentDocsViewerComponent, + CodeExampleComponent ], selector: 'app-select-page', templateUrl: './select-page.component.html', @@ -24,6 +27,7 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi host: { class: 'composition-page' } }) export class SelectPageComponent implements OnInit { + readonly examples = selectExamples; options = [ { name: 'New York', data: { code: 'NY' } }, { name: 'Prague', data: { code: 'PRG' }, info: 'Prague info' }, diff --git a/projects/composition/src/app/pages/select-page/select-page.examples.ts b/projects/composition/src/app/pages/select-page/select-page.examples.ts new file mode 100644 index 000000000..14aa67894 --- /dev/null +++ b/projects/composition/src/app/pages/select-page/select-page.examples.ts @@ -0,0 +1,220 @@ +const citiesOptionsTs = ` +options = [ + { name: 'New York', data: { code: 'NY' } }, + { name: 'Prague', data: { code: 'PRG' }, info: 'Prague info' }, + { name: 'Capetown', data: { code: 'CPT' }, info: 'Capetown info' }, + { name: 'Rome', data: { code: 'RM' } }, + { name: 'London', data: { code: 'LDN' }, info: 'London info' }, + { name: 'Istanbul', data: { code: 'IST' } }, + { name: 'Paris', data: { code: 'PRS' } }, + { name: 'Tokyo', data: { code: 'TOK' } }, + { name: 'Oslo', data: { code: 'OSL' }, info: 'Oslo info' }, + { name: 'Berlin', data: { code: 'BER' } } +];`; + +export const selectExamples: Record = { + requiredSelect: { + html: ` +
+ + +
`, + ts: ` +private readonly _formBuilder = inject(UntypedFormBuilder); + +${citiesOptionsTs.trim()} + +form!: UntypedFormGroup; + +ngOnInit(): void { + this.form = this._formBuilder.group({ + requiredSelect: [this.options[1], [Validators.required]] + }); +}` + }, + + loadingSelect: { + html: ` + +`, + ts: citiesOptionsTs + }, + + disabledSelect: { + html: ` + +` + }, + + multipleSelect: { + html: ` +`, + ts: citiesOptionsTs + }, + + virtualScrollSelect: { + html: ` +`, + ts: citiesOptionsTs + }, + + nonClosableChipsSelect: { + html: ` +`, + ts: citiesOptionsTs + }, + + prefixIconSelect: { + html: ` + +`, + ts: citiesOptionsTs + }, + + iconsSelect: { + html: ` + +`, + ts: ` +statusOptions = [ + { name: 'Success', icon: 'circle', color: 'success' }, + { name: 'Pending', icon: 'circle', color: 'info' }, + { name: 'Warning', icon: 'circle', color: 'warn' }, + { name: 'Failed', icon: 'circle', color: 'error' } +];` + }, + + twoWayBindingSelect: { + html: ` +
+ + {{ syncVal }} +
`, + ts: ` +syncOptions = [ + { title: 'Amazon', val: 'AMZN', ticker: 'AMZN' }, + { title: 'Apple', val: 'AAPL', ticker: 'AAPL' }, + { title: 'Google', val: 'GOOGL', ticker: 'GOOGL' }, + { title: 'Meta', val: 'META', ticker: 'META' }, + { title: 'Microsoft', val: 'MSFT', ticker: 'MSFT' }, + { title: 'Netflix', val: 'NFLX', ticker: 'NFLX' }, + { title: 'Tesla', val: 'TSLA', ticker: 'TSLA' } +]; +syncVal: any = [];` + }, + + underlinedSelect: { + html: ` + +`, + ts: citiesOptionsTs + }, + + borderlessSelect: { + html: ` + +`, + ts: citiesOptionsTs + } +}; diff --git a/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.html b/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.html index 2573c62aa..0ade5de03 100644 --- a/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.html +++ b/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.html @@ -5,11 +5,19 @@ [exactRoutes]="true" ariaLabel="Sidebar menu example"> -
- -
- Provide your app urls into sidebar menu items or into nested menu items to - navigate to your routes +
+
+ +
+ Provide your app urls into sidebar menu items or into nested menu items + to navigate to your routes +
+ + +
diff --git a/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.scss b/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.scss index dee6aa106..d77b29ad1 100644 --- a/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.scss +++ b/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.scss @@ -5,12 +5,20 @@ } padding: 0 1.5rem 0 1.5rem; + .sidebar-menu-page-side { + display: flex; + flex-direction: column; + flex: 1; + min-width: 0; + margin: 1.5rem 1.5rem 1.5rem 1.5rem; + overflow-y: auto; + } + .sidebar-menu-page-info-card { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; - margin: 1.5rem 0 0 1.5rem; border-radius: 0.5rem; border-left: 0.25rem solid var(--cps-color-info); background: var(--cps-color-info-highlighten); diff --git a/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.ts b/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.ts index 28884ab63..f418f7f7e 100644 --- a/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.ts +++ b/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.ts @@ -7,19 +7,23 @@ import { import ComponentData from '../../api-data/cps-sidebar-menu.json'; import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component'; +import { CodeExampleComponent } from '../../components/code-example/code-example.component'; +import { sidebarMenuExamples } from './sidebar-menu-page.examples'; @Component({ selector: 'app-sidebar-menu-page', imports: [ CpsSidebarMenuComponent, CpsIconComponent, - ComponentDocsViewerComponent + ComponentDocsViewerComponent, + CodeExampleComponent ], templateUrl: './sidebar-menu-page.component.html', styleUrls: ['./sidebar-menu-page.component.scss'], host: { class: 'composition-page' } }) export class SidebarMenuPageComponent { + readonly examples = sidebarMenuExamples; items: CpsSidebarMenuItem[] = [ { title: 'Dashboard', diff --git a/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.examples.ts b/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.examples.ts new file mode 100644 index 000000000..cf8d98950 --- /dev/null +++ b/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.examples.ts @@ -0,0 +1,60 @@ +export const sidebarMenuExamples: Record< + string, + { html: string; ts?: string } +> = { + basicUsage: { + html: ` +`, + ts: ` +items: CpsSidebarMenuItem[] = [ + { + title: 'Dashboard', + icon: 'grid', + url: '/' + }, + { + title: 'Favourites', + icon: 'star', + url: '/sidebar-menu/examples' + }, + { + title: 'Categories disabled', + icon: 'book', + url: '/', + disabled: true + }, + { + title: 'Access menu', + icon: 'access-lock', + items: [ + { title: 'Requests', desc: 'Apply for access', url: '/' }, + { + title: 'Approval', + desc: 'Approve or reject access requests', + url: '/' + } + ] + }, + { + title: 'Community menu', + icon: 'users', + items: [{ title: 'Questions', desc: 'See all questions', url: '/' }] + }, + { + title: 'Bookmarks menu disabled', + icon: 'bookmark', + disabled: true, + items: [ + { + title: 'Disabled cat', + desc: 'This is not visible', + url: '/' + } + ] + } +];` + } +}; From c07dd69f241273fecd7a7f1581173d2084d7d4ae Mon Sep 17 00:00:00 2001 From: Andrei Fateev Date: Fri, 17 Jul 2026 14:14:32 +0200 Subject: [PATCH 2/3] address feedback --- .../code-example/code-example.component.scss | 11 +++++++---- .../scheduler-page/scheduler-page.component.scss | 0 .../pages/scheduler-page/scheduler-page.component.ts | 1 - .../app/pages/select-page/select-page.component.ts | 2 +- .../src/app/pages/select-page/select-page.examples.ts | 2 +- .../sidebar-menu-page.component.scss | 1 + 6 files changed, 10 insertions(+), 7 deletions(-) delete mode 100644 projects/composition/src/app/pages/scheduler-page/scheduler-page.component.scss diff --git a/projects/composition/src/app/components/code-example/code-example.component.scss b/projects/composition/src/app/components/code-example/code-example.component.scss index e69024fb8..11b5ecb19 100644 --- a/projects/composition/src/app/components/code-example/code-example.component.scss +++ b/projects/composition/src/app/components/code-example/code-example.component.scss @@ -83,6 +83,7 @@ overflow-x: auto; font-size: 0.8125rem; line-height: 1.6; + border-radius: inherit; } code { @@ -97,10 +98,8 @@ top: 0.625rem; right: 0.75rem; z-index: 1; - - ::ng-deep button { - background-color: var(--cps-surface-elevated) !important; - } + background-color: var(--cps-surface-elevated); + border-radius: 0.25rem; } &__panel--hidden { @@ -121,6 +120,10 @@ margin-bottom: 1.5rem; background-color: transparent; border-radius: 0; + + &:empty { + margin-bottom: 0; + } } .code-example__tabbar { diff --git a/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.scss b/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.ts b/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.ts index 7f2ee0c3c..0bd8e081b 100644 --- a/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.ts +++ b/projects/composition/src/app/pages/scheduler-page/scheduler-page.component.ts @@ -14,7 +14,6 @@ import { schedulerExamples } from './scheduler-page.examples'; CodeExampleComponent ], templateUrl: './scheduler-page.component.html', - styleUrl: './scheduler-page.component.scss', host: { class: 'composition-page' } }) export class SchedulerPageComponent { diff --git a/projects/composition/src/app/pages/select-page/select-page.component.ts b/projects/composition/src/app/pages/select-page/select-page.component.ts index 92cc7f581..3c3ea63dc 100644 --- a/projects/composition/src/app/pages/select-page/select-page.component.ts +++ b/projects/composition/src/app/pages/select-page/select-page.component.ts @@ -59,7 +59,7 @@ export class SelectPageComponent implements OnInit { ]; form!: UntypedFormGroup; - syncVal: any = []; + syncVal: string[] = []; componentData = ComponentData; // eslint-disable-next-line no-useless-constructor diff --git a/projects/composition/src/app/pages/select-page/select-page.examples.ts b/projects/composition/src/app/pages/select-page/select-page.examples.ts index 14aa67894..d5e9ba02c 100644 --- a/projects/composition/src/app/pages/select-page/select-page.examples.ts +++ b/projects/composition/src/app/pages/select-page/select-page.examples.ts @@ -183,7 +183,7 @@ syncOptions = [ { title: 'Netflix', val: 'NFLX', ticker: 'NFLX' }, { title: 'Tesla', val: 'TSLA', ticker: 'TSLA' } ]; -syncVal: any = [];` +syncVal: string[] = [];` }, underlinedSelect: { diff --git a/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.scss b/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.scss index d77b29ad1..69d3d4cf2 100644 --- a/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.scss +++ b/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.scss @@ -8,6 +8,7 @@ .sidebar-menu-page-side { display: flex; flex-direction: column; + gap: 1.5rem; flex: 1; min-width: 0; margin: 1.5rem 1.5rem 1.5rem 1.5rem; From 7b1fc82265ac059d0afec9d50b15f7189ef1b2b4 Mon Sep 17 00:00:00 2001 From: Andrei Fateev Date: Fri, 17 Jul 2026 15:36:02 +0200 Subject: [PATCH 3/3] fix a11y issues --- .../code-example/code-example.component.html | 7 +++ .../code-example/code-example.component.scss | 53 +++++++++++++++++++ .../code-example.component.spec.ts | 28 ++-------- .../code-example/code-example.component.ts | 46 ++++++++++++++-- .../button-toggle-page.component.html | 3 +- 5 files changed, 109 insertions(+), 28 deletions(-) diff --git a/projects/composition/src/app/components/code-example/code-example.component.html b/projects/composition/src/app/components/code-example/code-example.component.html index e3070dc2c..c2709ca16 100644 --- a/projects/composition/src/app/components/code-example/code-example.component.html +++ b/projects/composition/src/app/components/code-example/code-example.component.html @@ -58,6 +58,7 @@

: '' }}
@@ -129,7 +133,10 @@

: '' }}
diff --git a/projects/composition/src/app/components/code-example/code-example.component.scss b/projects/composition/src/app/components/code-example/code-example.component.scss index 11b5ecb19..3fa2550c4 100644 --- a/projects/composition/src/app/components/code-example/code-example.component.scss +++ b/projects/composition/src/app/components/code-example/code-example.component.scss @@ -84,6 +84,14 @@ font-size: 0.8125rem; line-height: 1.6; border-radius: inherit; + + &:focus-visible { + outline: none; + box-shadow: + inset 0 0 0 0.0625rem var(--cps-color-calm), + inset 0 0 0 0.125rem var(--cps-background-color), + inset 0 0 0 0.1875rem var(--cps-color-calm-highlighten); + } } code { @@ -91,6 +99,51 @@ ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; } + + // The atom-one-light/dark hljs themes (loaded globally at runtime) fail + // WCAG AA contrast for several syntax classes against our background. + // Darkened/lightened variants of the same hues restore compliance. + ::ng-deep { + .hljs-comment, + .hljs-quote { + color: #71727a; + } + + .hljs-section, + .hljs-name, + .hljs-selector-tag, + .hljs-deletion, + .hljs-subst { + color: #da3020; + } + + .hljs-literal { + color: #017bae; + } + + .hljs-string, + .hljs-regexp, + .hljs-addition, + .hljs-attribute, + .hljs-meta .hljs-string { + color: #40803f; + } + + .hljs-symbol, + .hljs-bullet, + .hljs-link, + .hljs-meta, + .hljs-selector-id, + .hljs-title { + color: #2d6af1; + } + + .hljs-built_in, + .hljs-title.class_, + .hljs-class .hljs-title { + color: #9b6a01; + } + } } &__copy { diff --git a/projects/composition/src/app/components/code-example/code-example.component.spec.ts b/projects/composition/src/app/components/code-example/code-example.component.spec.ts index 8c7dc4e56..fe6a9f58b 100644 --- a/projects/composition/src/app/components/code-example/code-example.component.spec.ts +++ b/projects/composition/src/app/components/code-example/code-example.component.spec.ts @@ -342,34 +342,16 @@ describe('CodeExampleComponent', () => { expect(previewPanel.nativeElement.tabIndex).toBe(-1); }); - it('preview tabpanel has tabindex 0 when isPreviewNonInteractive is true', () => { + it('code tabpanel pre elements default to tabindex -1 when not scrollable', () => { fixture = TestBed.createComponent(CodeExampleComponent); component = fixture.componentInstance; fixture.componentRef.setInput('htmlCode', '
'); - fixture.componentRef.setInput('isPreviewNonInteractive', true); - fixture.detectChanges(); - - const previewPanel = fixture.debugElement.query( - By.css('[id*="-panel-preview"]') - ); - expect(previewPanel.nativeElement.tabIndex).toBe(0); - }); - - it('preview tabpanel tabindex updates reactively when input changes', () => { - fixture = TestBed.createComponent(CodeExampleComponent); - component = fixture.componentInstance; - fixture.componentRef.setInput('htmlCode', '
'); - fixture.componentRef.setInput('isPreviewNonInteractive', false); + fixture.componentRef.setInput('tsCode', 'const x = 1;'); fixture.detectChanges(); - const previewPanel = fixture.debugElement.query( - By.css('[id*="-panel-preview"]') - ); - expect(previewPanel.nativeElement.tabIndex).toBe(-1); - - fixture.componentRef.setInput('isPreviewNonInteractive', true); - fixture.detectChanges(); - expect(previewPanel.nativeElement.tabIndex).toBe(0); + const pres = fixture.debugElement.queryAll(By.css('pre.hljs')); + expect(pres[0].nativeElement.tabIndex).toBe(-1); + expect(pres[1].nativeElement.tabIndex).toBe(-1); }); }); }); diff --git a/projects/composition/src/app/components/code-example/code-example.component.ts b/projects/composition/src/app/components/code-example/code-example.component.ts index 83ba51787..d0e0fe2de 100644 --- a/projects/composition/src/app/components/code-example/code-example.component.ts +++ b/projects/composition/src/app/components/code-example/code-example.component.ts @@ -5,7 +5,11 @@ import { inject, signal, ChangeDetectionStrategy, - computed + computed, + viewChild, + ElementRef, + type Signal, + type WritableSignal } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { CpsButtonComponent } from 'cps-ui-kit'; @@ -31,7 +35,6 @@ export class CodeExampleComponent { htmlCode = input(); tsCode = input(); label = input(''); - isPreviewNonInteractive = input(false); previewOutside = input(false); private sanitizer = inject(DomSanitizer); @@ -43,9 +46,23 @@ export class CodeExampleComponent { highlightedCode = signal(''); highlightedTsCode = signal(''); tabs = signal(['preview']); - previewTabIndex = computed(() => (this.isPreviewNonInteractive() ? 0 : -1)); + + private previewEl = viewChild>('previewPanel'); + private htmlPreEl = viewChild>('htmlPre'); + private tsPreEl = viewChild>('tsPre'); + private previewScrollable = signal(false); + private htmlCodeScrollable = signal(false); + private tsCodeScrollable = signal(false); + // Only focusable when its content actually overflows and needs scrolling. + previewTabIndex = computed(() => (this.previewScrollable() ? 0 : -1)); + htmlCodeTabIndex = computed(() => (this.htmlCodeScrollable() ? 0 : -1)); + tsCodeTabIndex = computed(() => (this.tsCodeScrollable() ? 0 : -1)); constructor() { + this._observeScrollable(this.previewEl, this.previewScrollable); + this._observeScrollable(this.htmlPreEl, this.htmlCodeScrollable); + this._observeScrollable(this.tsPreEl, this.tsCodeScrollable); + effect(() => { const htmlCode = this.htmlCode(); const tsCode = this.tsCode(); @@ -84,6 +101,29 @@ export class CodeExampleComponent { }); } + private _observeScrollable( + elRef: Signal | undefined>, + scrollable: WritableSignal + ): void { + effect((onCleanup) => { + const el = elRef()?.nativeElement; + if (!el) { + scrollable.set(false); + return; + } + + const update = () => + scrollable.set( + el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight + ); + update(); + + const observer = new ResizeObserver(update); + observer.observe(el); + onCleanup(() => observer.disconnect()); + }); + } + async copyCode(): Promise { let textToCopy = ''; diff --git a/projects/composition/src/app/pages/button-toggle-page/button-toggle-page.component.html b/projects/composition/src/app/pages/button-toggle-page/button-toggle-page.component.html index a24e04ed1..78fa4ef17 100644 --- a/projects/composition/src/app/pages/button-toggle-page/button-toggle-page.component.html +++ b/projects/composition/src/app/pages/button-toggle-page/button-toggle-page.component.html @@ -25,8 +25,7 @@ + [tsCode]="examples.disabled.ts">