Skip to content

fix(ui): components design update #2624

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
RemiBonnet merged 5 commits into from
Apr 24, 2026
Merged

fix(ui): components design update #2624

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d79555f
feat(empty-state): enhance EmptyState component with small size varia…
TheoGrandin74 Apr 23, 2026
dac3ed4
feat(input-select): harmonize label behavior on both text input and s…
TheoGrandin74 Apr 23, 2026
87c914c
refactor(annotation-label-settings): standardize spacing and update t…
TheoGrandin74 Apr 23, 2026
7f744e8
chore(snapshots): update snapshot files to reflect changes in compone…
TheoGrandin74 Apr 23, 2026
1577836
refactor(empty-state): update size prop from 'small' to 'sm' for cons…
RemiBonnet Apr 24, 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
10 changes: 5 additions & 5 deletions libs/domains/clusters/feature/src/lib/cluster-card/__snapshots__/cluster-card.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ exports[`ClusterCard should match snapshot 1`] = `
class="mt-5 flex flex-wrap gap-2"
>
<span
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded-md"
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded"
data-accent-color="neutral"
>
<svg
Expand All @@ -105,19 +105,19 @@ exports[`ClusterCard should match snapshot 1`] = `
Qovery managed
</span>
<span
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded-md bg-surface-neutral-subtle"
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded bg-surface-neutral-subtle"
data-accent-color="neutral"
>
EKS
</span>
<span
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded-md bg-surface-neutral-subtle"
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded bg-surface-neutral-subtle"
data-accent-color="neutral"
>
us-east-1
</span>
<span
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded-md bg-surface-neutral-subtle"
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded bg-surface-neutral-subtle"
data-accent-color="neutral"
>
1.21
Expand Down Expand Up @@ -190,7 +190,7 @@ exports[`ClusterCard should match snapshot 1`] = `
</div>
</div>
<span
class="inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-negative-subtle border rounded-md bg-surface-negative-subtle text-negative"
class="inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-negative-subtle border rounded bg-surface-negative-subtle text-negative"
data-accent-color="red"
>
Production
Expand Down
4 changes: 2 additions & 2 deletions ...ers/feature/src/lib/cluster-delete-modal/__snapshots__/cluster-delete-modal.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,11 @@ exports[`ClusterDeleteModal should match snapshot 1`] = `
class="mb-3"
>
<div
class="input input--select"
class="input input--select input--label-up"
data-testid="select"
>
<label
class="!translate-y-0 !text-xs"
class="input__label translate-y-[7px] text-sm"
for="Delete mode"
>
Delete mode
Expand Down
8 changes: 4 additions & 4 deletions libs/domains/clusters/feature/src/lib/cluster-type/__snapshots__/cluster-type.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`ClusterType should render as AKS 1`] = `
<body>
<div>
<span
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded-md bg-surface-neutral-subtle"
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded bg-surface-neutral-subtle"
data-accent-color="neutral"
>
Self-managed
Expand All @@ -17,7 +17,7 @@ exports[`ClusterType should render as EKS 1`] = `
<body>
<div>
<span
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded-md bg-surface-neutral-subtle"
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded bg-surface-neutral-subtle"
data-accent-color="neutral"
>
EKS (Karpenter)
Expand All @@ -30,7 +30,7 @@ exports[`ClusterType should render as GCP 1`] = `
<body>
<div>
<span
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded-md bg-surface-neutral-subtle"
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded bg-surface-neutral-subtle"
data-accent-color="neutral"
>
GKE (Autopilot)
Expand All @@ -43,7 +43,7 @@ exports[`ClusterType should render as SCW 1`] = `
<body>
<div>
<span
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded-md bg-surface-neutral-subtle"
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded bg-surface-neutral-subtle"
data-accent-color="neutral"
>
Kapsule
Expand Down
6 changes: 3 additions & 3 deletions ...create-clone-environment-modal/__snapshots__/create-clone-environment-modal.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ exports[`CreateCloneEnvironmentModal should match snapshots 1`] = `
data-testid="input-select-cluster"
>
<label
class="top-1.5 translate-y-2 text-sm"
class="input__label translate-y-[7px] text-sm"
for="Cluster"
>
Cluster
Expand Down Expand Up @@ -168,7 +168,7 @@ exports[`CreateCloneEnvironmentModal should match snapshots 1`] = `
class="mb-3"
>
<div
class="input input--select input--has-icon"
class="input input--select input--has-icon input--label-up"
data-testid="input-select-mode"
>
<div
Expand All @@ -183,7 +183,7 @@ exports[`CreateCloneEnvironmentModal should match snapshots 1`] = `
</span>
</div>
<label
class="!translate-y-0 !text-xs ml-8"
class="input__label translate-y-[7px] text-sm ml-8"
for="Type"
>
Type
Expand Down
4 changes: 4 additions & 0 deletions .../src/lib/environment-last-deployment-section/environment-last-deployment-section.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,11 @@ describe('EnvironmentLastDeploymentSection', () => {

renderWithProviders(<EnvironmentLastDeploymentSection />)

const emptyState = screen.getByText('No deployment recorded yet').closest('.rounded-lg')

expect(screen.getByText('No deployment recorded yet')).toBeInTheDocument()
expect(emptyState).toHaveClass('px-4', 'py-4')
expect(emptyState).not.toHaveClass('h-56')
expect(screen.getByRole('button', { name: /deploy environment/i })).toBeInTheDocument()
})

Expand Down
2 changes: 1 addition & 1 deletion ...ature/src/lib/environment-last-deployment-section/environment-last-deployment-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,10 +200,10 @@ const EnvironmentLastDeploymentContent = () => {
</div>
) : (
<EmptyState
size="sm"
icon="rocket"
title="No deployment recorded yet"
description="Create and deploy your first service"
className="h-auto p-8"
>
{serviceCount > 0 && (
<Button onClick={handleDeploy} color="neutral" size="md" className="gap-1.5">
Expand Down
8 changes: 4 additions & 4 deletions ...nvironments/feature/src/lib/environment-mode/__snapshots__/environment-mode.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`EnvironmentMode should render as development mode 1`] = `
<body>
<div>
<span
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded-md"
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded"
data-accent-color="neutral"
>
Development
Expand All @@ -17,7 +17,7 @@ exports[`EnvironmentMode should render as preview mode 1`] = `
<body>
<div>
<span
class="inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-accent1-subtle border rounded-md text-accent1"
class="inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-accent1-subtle border rounded text-accent1"
data-accent-color="purple"
>
Ephemeral
Expand All @@ -30,7 +30,7 @@ exports[`EnvironmentMode should render as production mode 1`] = `
<body>
<div>
<span
class="inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-negative-subtle border rounded-md text-negative"
class="inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-negative-subtle border rounded text-negative"
data-accent-color="red"
>
Production
Expand All @@ -43,7 +43,7 @@ exports[`EnvironmentMode should render as staging mode 1`] = `
<body>
<div>
<span
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded-md"
class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded"
data-accent-color="neutral"
>
Staging
Expand Down
2 changes: 1 addition & 1 deletion libs/domains/observability/feature/src/lib/service/service-dashboard/service-dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@ function ServiceDashboardContent({ environmentId, serviceId }: { environmentId:
>
<Badge
variant="surface"
color={resourcesMode === 'aggregate' ? 'sky' : 'purple'}
color={resourcesMode === 'aggregate' ? 'sky' : 'neutral'}
radius="full"
size="sm"
className="h-6 gap-1 text-ssm"
Expand Down
2 changes: 1 addition & 1 deletion ...lib/annotation-create-edit-modal/__snapshots__/annotation-create-edit-modal.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
class=""
>
<label
class="input__label translate-y-2 text-sm"
class="input__label translate-y-[7px] text-sm"
for="Group name"
>
Group name
Expand Down
2 changes: 1 addition & 1 deletion ...zations/feature/src/lib/annotation-setting/__snapshots__/annotation-setting.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`AnnotationSetting should match snapshot 1`] = `
data-testid="select"
>
<label
class="top-1.5 translate-y-2 text-sm"
class="input__label translate-y-[7px] text-sm"
for="Annotation Groups (optional)"
>
Annotation Groups (optional)
Expand Down
4 changes: 2 additions & 2 deletions libs/domains/organizations/feature/src/lib/annotation-setting/annotation-setting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function AnnotationSetting() {
label="Annotation Groups (optional)"
options={annotationsGroups.map((group) => ({
label: (
<span className="flex items-center gap-3">
<span className="flex items-center gap-1">
<span>{group.name}</span>
<Tooltip
classNameContent="z-10"
Expand All @@ -34,7 +34,7 @@ export function AnnotationSetting() {
}
>
<span>
<Icon iconName="circle-info" iconStyle="regular" className="text-base" />
<Icon iconName="circle-info" iconStyle="regular" className="text-neutral-subtl text-sm" />
</span>
</Tooltip>
</span>
Expand Down
4 changes: 2 additions & 2 deletions ...tions/feature/src/lib/git-branch-settings/__snapshots__/git-branch-settings.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`GitBranchSettings should match snapshot 1`] = `
data-testid="select"
>
<label
class="top-1.5 translate-y-2 text-sm"
class="input__label translate-y-[7px] text-sm"
for="Branch"
>
Branch
Expand Down Expand Up @@ -125,7 +125,7 @@ exports[`GitBranchSettings should match snapshot 1`] = `
class=""
>
<label
class="input__label translate-y-2 text-sm !transition-none"
class="input__label translate-y-[7px] text-sm !transition-none"
for="Application root folder path"
>
Application root folder path
Expand Down
2 changes: 1 addition & 1 deletion ...ons/feature/src/lib/git-provider-setting/__snapshots__/git-provider-setting.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`GitProviderSetting should match snapshot 1`] = `
data-testid="select"
>
<label
class="top-1.5 translate-y-2 text-sm"
class="input__label translate-y-[7px] text-sm"
for="Git account"
>
Git account
Expand Down
6 changes: 3 additions & 3 deletions ...git-public-repository-settings/__snapshots__/git-public-repository-settings.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ exports[`GitPublicRepositorySettings should match snapshot 1`] = `
class=""
>
<label
class="input__label translate-y-2 text-sm"
class="input__label translate-y-[7px] text-sm"
for="Public repository URL (.git)"
>
Public repository URL (.git)
Expand Down Expand Up @@ -65,7 +65,7 @@ exports[`GitPublicRepositorySettings should match snapshot 1`] = `
class=""
>
<label
class="input__label translate-y-2 text-sm"
class="input__label translate-y-[7px] text-sm"
for="Branch"
>
Branch
Expand Down Expand Up @@ -99,7 +99,7 @@ exports[`GitPublicRepositorySettings should match snapshot 1`] = `
class=""
>
<label
class="input__label translate-y-2 text-sm !transition-none"
class="input__label translate-y-[7px] text-sm !transition-none"
for="Root service path"
>
Root service path
Expand Down
2 changes: 1 addition & 1 deletion ...feature/src/lib/git-repository-setting/__snapshots__/git-repository-setting.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`GitRepositorySetting should match snapshot 1`] = `
data-testid="select"
>
<label
class="top-1.5 translate-y-2 text-sm"
class="input__label translate-y-[7px] text-sm"
for="Repository"
>
Repository
Expand Down
2 changes: 1 addition & 1 deletion ...ature/src/lib/label-create-edit-modal/__snapshots__/label-create-edit-modal.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ exports[`LabelCreateEditModal should match with snatpshot 1`] = `
class=""
>
<label
class="input__label translate-y-2 text-sm"
class="input__label translate-y-[7px] text-sm"
for="Group name"
>
Group name
Expand Down
2 changes: 1 addition & 1 deletion ...ins/organizations/feature/src/lib/label-setting/__snapshots__/label-setting.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`LabelSetting should match snapshot 1`] = `
data-testid="select"
>
<label
class="top-1.5 translate-y-2 text-sm"
class="input__label translate-y-[7px] text-sm"
for="Label Groups (optional)"
>
Label Groups (optional)
Expand Down
4 changes: 2 additions & 2 deletions libs/domains/organizations/feature/src/lib/label-setting/label-setting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export function LabelSetting({ filterPropagateToCloudProvider = false }: LabelSe
label="Label Groups (optional)"
options={filteredLabelsGroups.map((group) => ({
label: (
<span className="flex items-center gap-3">
<span className="flex items-center gap-1">
<span>{group.name}</span>
<Tooltip
classNameContent="z-10"
Expand All @@ -46,7 +46,7 @@ export function LabelSetting({ filterPropagateToCloudProvider = false }: LabelSe
}
>
<span>
<Icon iconName="circle-info" iconStyle="regular" className="text-base" />
<Icon iconName="circle-info" iconStyle="regular" className="text-sm text-neutral-subtle" />
</span>
</Tooltip>
</span>
Expand Down
4 changes: 2 additions & 2 deletions ...ce-helm/feature/src/lib/deployment-setting/__snapshots__/deployment-setting.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ exports[`DeploymentSetting should match snapshot 1`] = `
class=""
>
<label
class="input__label translate-y-2 text-sm !transition-none"
class="input__label translate-y-[7px] text-sm !transition-none"
for="Helm arguments"
>
Helm arguments
Expand Down Expand Up @@ -74,7 +74,7 @@ exports[`DeploymentSetting should match snapshot 1`] = `
class=""
>
<label
class="input__label translate-y-2 text-sm !transition-none"
class="input__label translate-y-[7px] text-sm !transition-none"
for="Helm timeout"
>
Helm timeout
Expand Down
Loading
Loading