Skip to content

feat(ui-ng): align tags and control radii with the admin styling #685

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

Merged
BryanFRD merged 2 commits into from
Oct 28, 2026
Merged

feat(ui-ng): align tags and control radii with the admin styling #685

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d06ef7e
feat(ui-ng): render flr-tag as a filled pill by default
BryanFRD Oct 28, 2026
c878a2b
feat(ui-ng): tighten button and form control radii to 4px
BryanFRD Oct 28, 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
4 changes: 2 additions & 2 deletions packages/showcase/src/stories/Tag.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const meta: Meta<TagComponent> = {
title: 'Primitives/Tag',
component: TagComponent,
decorators: [moduleMetadata({ imports: [TagComponent] })],
args: { variant: 'neutral', size: 'md', soft: false, dot: true, removable: false },
args: { variant: 'neutral', size: 'md', soft: true, dot: false, removable: false },
argTypes: {
variant: {
control: 'inline-radio',
Expand Down Expand Up @@ -38,6 +38,6 @@ export const Variants: Story = {
}),
};

export const Soft: Story = { args: { soft: true, variant: 'accent' } };
export const Outlined: Story = { args: { soft: false, dot: true, variant: 'accent' } };

export const Removable: Story = { args: { removable: true, variant: 'accent' } };
6 changes: 3 additions & 3 deletions packages/ui-ng/src/lib/button/button.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ interface SizeDim {
}

const SIZE: Record<ButtonSize, SizeDim> = {
sm: { padding: '5px 10px', fontSize: '11px', gap: '6px', radius: '6px' },
md: { padding: '8px 14px', fontSize: '12px', gap: '8px', radius: '8px' },
lg: { padding: '12px 20px', fontSize: '14px', gap: '10px', radius: '10px' },
sm: { padding: '5px 10px', fontSize: '11px', gap: '6px', radius: '4px' },
md: { padding: '8px 14px', fontSize: '12px', gap: '8px', radius: '4px' },
lg: { padding: '12px 20px', fontSize: '14px', gap: '10px', radius: '4px' },
};

const DANGER = 'var(--color-danger, #dc2626)';
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-ng/src/lib/input/input.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const ERROR = 'var(--color-danger, #dc2626)';
font-family: var(--font-sans, 'Fraunces', Georgia, ui-serif, serif);
line-height: 1.4;
color: var(--color-ink, #1e293b);
border-radius: 8px;
border-radius: 4px;
outline: none;
transition:
border-color 140ms,
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-ng/src/lib/menu/menu.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export type MenuDirection = 'down' | 'up';
.flr-menu__panel {
background: var(--color-card, #ffffff);
border: 1px solid var(--color-card-rule, rgba(30, 41, 59, 0.1));
border-radius: 10px;
border-radius: 6px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
padding: 6px;
}
Expand Down Expand Up @@ -220,7 +220,7 @@ export class MenuComponent {
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 6px;
border-radius: 4px;
font-size: 14px;
font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
color: var(--color-ink-2, #475569);
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-ng/src/lib/search-field/search-field.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ const SIZE: Record<SearchFieldSize, SearchDim> = {
.flr-search__input {
width: 100%;
box-sizing: border-box;
border-radius: 8px;
border-radius: 4px;
font-family: var(--font-sans, 'Fraunces', Georgia, ui-serif, serif);
font-weight: 400;
line-height: 1.4;
Expand Down
6 changes: 3 additions & 3 deletions packages/ui-ng/src/lib/segmented/segmented.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
gap: 2px;
padding: 3px;
border: 1px solid var(--color-rule, rgba(30, 41, 59, 0.14));
border-radius: 10px;
border-radius: 6px;
background: var(--color-app-bg-2, #f4f4f2);
}

Expand All @@ -18,7 +18,7 @@
top: 3px;
bottom: 3px;
left: 0;
border-radius: 7px;
border-radius: 4px;
background: var(--color-card, #ffffff);
box-shadow: 0 1px 2px rgba(30, 41, 59, 0.12);
pointer-events: none;
Expand Down Expand Up @@ -48,7 +48,7 @@
height: 30px;
padding: 0 12px;
border: 0;
border-radius: 7px;
border-radius: 4px;
background: transparent;
color: var(--color-ink-3, #64748b);
font: inherit;
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-ng/src/lib/select/select.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const ERROR = 'var(--color-danger, #dc2626)';
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 8px;
border-radius: 4px;
outline: none;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-ng/src/lib/submit/submit.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
color: #fff;
background: var(--color-accent, var(--color-ink, #1e293b));
border: 1px solid var(--color-accent, var(--color-ink, #1e293b));
border-radius: 8px;
border-radius: 4px;
cursor: pointer;
transition:
background 160ms ease-out,
Expand Down
14 changes: 7 additions & 7 deletions packages/ui-ng/src/lib/tag/tag.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ const VARIANT_TEXT: Record<TagVariant, string> = {
};

const SIZE: Record<TagSize, { padding: string; fontSize: string; gap: string; dot: number }> = {
sm: { padding: '2px 7px', fontSize: '9.5px', gap: '5px', dot: 4 },
md: { padding: '3px 9px', fontSize: '10.5px', gap: '6px', dot: 5 },
sm: { padding: '2px 6px', fontSize: '9.5px', gap: '5px', dot: 4 },
md: { padding: '3px 8px', fontSize: '10px', gap: '6px', dot: 5 },
};

@Component({
Expand Down Expand Up @@ -62,8 +62,8 @@ const SIZE: Record<TagSize, { padding: string; fontSize: string; gap: string; do
.flr-tag {
display: inline-flex;
align-items: center;
border-radius: 999px;
letter-spacing: 0.05em;
border-radius: 3px;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
Expand All @@ -90,8 +90,8 @@ const SIZE: Record<TagSize, { padding: string; fontSize: string; gap: string; do
export class TagComponent {
readonly variant = input<TagVariant | null>(null);
readonly color = input<string | null>(null);
readonly soft = input(false);
readonly dot = input(true);
readonly soft = input(true);
readonly dot = input(false);
Comment on lines +93 to +94

@ferrfleet-interne ferrfleet-interne Bot Oct 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Nit: flipping soft/dot defaults changes every existing <flr-tag> in consumer apps on a feat: (minor) release of 1.45.x. Not an API break, but worth a line in the squash commit body so it shows in the ui-ng CHANGELOG with the [soft]="false" [dot]="true" opt-out.

readonly size = input<TagSize>('md');
readonly removable = input(false);

Expand Down Expand Up @@ -120,7 +120,7 @@ export class TagComponent {
gap: dim.gap,
padding: dim.padding,
'font-size': dim.fontSize,
background: this.soft() ? `color-mix(in oklab, ${c} 14%, transparent)` : 'transparent',
background: this.soft() ? `color-mix(in oklab, ${c} 20%, transparent)` : 'transparent',
border: this.soft() ? 'none' : '1px solid var(--color-rule, rgba(30, 41, 59, 0.14))',
color: this.resolvedTextColor(),
};
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-ng/src/lib/textarea/textarea.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const ERROR = 'var(--color-danger, #dc2626)';
font-family: var(--font-sans, 'Fraunces', Georgia, ui-serif, serif);
line-height: 1.5;
color: var(--color-ink, #1e293b);
border-radius: 8px;
border-radius: 4px;
outline: none;
resize: vertical;
transition:
Expand Down
Loading