Skip to content

Modify components to allow application of more expressive styling. #772

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Open
jgindin wants to merge 7 commits into
base: main
Choose a base branch
from
+38 −18
Open

Modify components to allow application of more expressive styling. #772

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5bd1c5d
Modify components to allow application of more expressive styling.
jgindin Mar 4, 2026
5897b50
Fix indentation
jgindin Mar 4, 2026
08c7ca3
Remove use of `$any()`
jgindin Mar 4, 2026
2c5f544
Remove duplicate logic.
jgindin Mar 4, 2026
9cc6bb0
Some additional styles necessary for applying a new theme.
jgindin Mar 4, 2026
aeb3c7c
Instead of adding CSS classes, take advantage of the Theme.
jgindin Mar 5, 2026
4aead0a
Remove `align-items: center` as it's not necessary.
jgindin Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions renderers/angular/src/lib/catalog/list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ import { Renderer } from '../rendering/renderer';
}

:host([direction='vertical']) section {
display: grid;
display: flex;
flex-direction: column;
Comment on lines +38 to +39
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The repository style guide requires tests for code changes. While the PR description checklist for tests is marked as complete, I don't see any new or updated tests in this pull request. Please add unit tests to cover the new logic and behavior introduced in the List, Slider, and Tabs components.

References
  1. If there are code changes, code should have tests. (link)

}

:host([direction='horizontal']) section {
Expand All @@ -44,17 +45,20 @@ import { Renderer } from '../rendering/renderer';
overflow-x: scroll;
overflow-y: hidden;
scrollbar-width: none;
}

> ::slotted(*) {
flex: 1 0 fit-content;
max-width: min(80%, 400px);
}
.a2ui-list-item {
display: flex;
cursor: pointer;
box-sizing: border-box;
}
`,
template: `
<section [class]="theme.components.List" [style]="theme.additionalStyles?.List">
@for (child of component().properties.children; track child) {
<ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
<div class="a2ui-list-item">
<ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
</div>
}
</section>
`,
Expand Down
29 changes: 22 additions & 7 deletions renderers/angular/src/lib/catalog/slider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,19 +37,15 @@ import { DynamicComponent } from '../rendering/dynamic-component';
(input)="handleInput($event)"
[class]="theme.components.Slider.element"
[style]="theme.additionalStyles?.Slider"
[style.--slider-percent]="percentComplete() + '%'"
/>
</section>
`,
styles: `
:host {
display: block;
flex: var(--weight);
}

input {
display: block;
width: 100%;
box-sizing: border-box;
}
`,
})
Expand All @@ -62,13 +58,32 @@ export class Slider extends DynamicComponent {
protected readonly inputId = super.getUniqueId('a2ui-slider');
protected resolvedValue = computed(() => super.resolvePrimitive(this.value()) ?? 0);

protected percentComplete = computed(() => {
return this.computePercentage(this.resolvedValue());
});

protected handleInput(event: Event) {
const path = this.value()?.path;

if (!(event.target instanceof HTMLInputElement) || !path) {
if (!(event.target instanceof HTMLInputElement)) {
return;
}

this.processor.setData(this.component(), path, event.target.valueAsNumber, this.surfaceId());
const newValue = event.target.valueAsNumber;
const percent = this.computePercentage(newValue);

// Inject CSS variable directly to avoid Angular change detection lag/snapback
event.target.style.setProperty('--slider-percent', percent + '%');

if (path) {
this.processor.setData(this.component(), path, newValue, this.surfaceId());
}
}

private computePercentage(value: number): number {
const min = this.minValue() ?? 0;
const max = this.maxValue() ?? 100;
const range = max - min;
return range > 0 ? Math.max(0, Math.min(100, ((value - min) / range) * 100)) : 0;
}
}
11 changes: 6 additions & 5 deletions renderers/angular/src/lib/catalog/tabs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import * as Types from '@a2ui/web_core/types/types';
<button
(click)="this.selectedIndex.set($index)"
[disabled]="selectedIndex === $index"
[class]="buttonClasses()[selectedIndex]"
[class]="buttonClasses()[$index]"
>
{{ resolvePrimitive(tab.title) }}
</button>
Expand All @@ -52,6 +52,7 @@ import * as Types from '@a2ui/web_core/types/types';
:host {
display: block;
flex: var(--weight);
width: 100%;
}
`,
})
Expand All @@ -64,11 +65,11 @@ export class Tabs extends DynamicComponent {

return this.tabs().map((_, index) => {
return index === selectedIndex
? Styles.merge(
this.theme.components.Tabs.controls.all,
this.theme.components.Tabs.controls.selected,
? Styles.merge(
this.theme.components.Tabs.controls.all,
this.theme.components.Tabs.controls.selected,
)
: this.theme.components.Tabs.controls.all;
: this.theme.components.Tabs.controls.all;
});
});
}
Loading