Skip to content

fix(ui): components design update#2624

Merged
RemiBonnet merged 5 commits intonew-navigationfrom
feat/new-nav/components-improvments
Apr 24, 2026
Merged

fix(ui): components design update#2624
RemiBonnet merged 5 commits intonew-navigationfrom
feat/new-nav/components-improvments

Conversation

@TheoGrandin74
Copy link
Copy Markdown
Contributor

@TheoGrandin74 TheoGrandin74 commented Apr 23, 2026

Summary

Issue:

  • Added 'small' size variant to EmptyState component for lighter empty states when needed (like for the last deployment section)
  • Updated styles in EnvironmentLastDeploymentSection and ServiceLastDeployment to utilize the new small size.
  • Updated Badge radius to better match the radius used in the buttons of similar sizes
  • Updated inputs and select hover state by removing background color changes and migrating to only a border color change. Added a new neutral border for it
  • Updated the way labels are handled in select component to harmonize the behavior with the text inputs. Also updated the translate the have the label properly centered (was off by 1px)
  • Updated labels and annotations select options for cleaner design
  • Update to the pod-level badge color in monitoring dashboard slack

Screenshots / Recordings

Testing

  • Changes tested locally in the relevant Console's pages and Storybooks
  • yarn test or yarn test -u (if you need to regenerate snapshots)
  • yarn format
  • yarn lint

PR Checklist

  • I followed naming, styling, and TypeScript rules (see .cursor/rules)
  • I performed a self-review (diff inspected, dead code removed)
  • I titled the PR using Conventional Commits with a scope when possible (e.g. feat(service): add new Terraform service) - required for semantic-release
  • I only kept necessary comments, written in English (watch for useless AI comments)
  • I involved a designer to validate UI changes if I am not a designer
  • I covered new business logic with tests (unit)
  • I confirmed CI is green (Codecov red can be accepted)
  • I reviewed and executed locally any AI-assisted code

@TheoGrandin74 TheoGrandin74 changed the title feat(empty-state): enhance EmptyState component with small size varia… fix(ui): components design update Apr 23, 2026
…elect, update hover state, re-aligned labels when not focused/filled
…ooltip icon styles for improved UI consistency
…nt styles and label positioning across various components for improved UI consistency
@TheoGrandin74 TheoGrandin74 force-pushed the feat/new-nav/components-improvments branch from 1877afb to 7f744e8 Compare April 23, 2026 14:28
@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 23, 2026

Codecov Report

❌ Patch coverage is 41.17647% with 10 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (new-navigation@d49126f). Learn more about missing BASE report.

Files with missing lines Patch % Lines
.../ui/src/lib/components/empty-state/empty-state.tsx 28.57% 3 Missing and 2 partials ⚠️
...lib/components/empty-state/empty-state.stories.tsx 0.00% 2 Missing ⚠️
...ib/service/service-dashboard/service-dashboard.tsx 0.00% 1 Missing ⚠️
...ices/feature/src/lib/service-list/service-list.tsx 0.00% 1 Missing ⚠️
...ib/components/inputs/input-select/input-select.tsx 80.00% 0 Missing and 1 partial ⚠️
Additional details and impacted files
@@                Coverage Diff                @@
##             new-navigation    #2624   +/-   ##
=================================================
  Coverage                  ?   44.44%           
=================================================
  Files                     ?     1088           
  Lines                     ?    22898           
  Branches                  ?     6726           
=================================================
  Hits                      ?    10177           
  Misses                    ?    10924           
  Partials                  ?     1797           
Flag Coverage Δ
unittests 44.44% <41.17%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

if (!lastDeployment) {
return (
<EmptyState
size="small"
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

size should be similar with what we've in term of value "sm"

icon?: IconName | ReactNode
iconStyle?: IconStyle
description?: ReactNode
size?: 'default' | 'small'
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
size?: 'default' | 'small'
size?: 'sm' | 'base'

className,
icon,
iconStyle,
size = 'default',
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
size = 'default',
size = 'base',

@RemiBonnet RemiBonnet self-requested a review April 24, 2026 07:15
@RemiBonnet RemiBonnet merged commit 1aa7916 into new-navigation Apr 24, 2026
11 checks passed
@RemiBonnet RemiBonnet deleted the feat/new-nav/components-improvments branch April 24, 2026 07:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants