Skip to content

[DPEDE-7008] Add styles for close icon in text input#2076

Open
NachoCasaleLinde wants to merge 1 commit into
CenturyLink:masterfrom
NachoCasaleLinde:DPEDE-7008-add-styles-for-close-icon-in-text-input
Open

[DPEDE-7008] Add styles for close icon in text input#2076
NachoCasaleLinde wants to merge 1 commit into
CenturyLink:masterfrom
NachoCasaleLinde:DPEDE-7008-add-styles-for-close-icon-in-text-input

Conversation

@NachoCasaleLinde
Copy link
Copy Markdown
Contributor

https://lumen.atlassian.net/browse/DPEDE-7008

This pull request introduces improvements to the styling and layout of input fields and header breadcrumbs across the application. The main focus is on enhancing the appearance and positioning of clearable input buttons (especially when used with right-aligned icons) and ensuring consistent spacing and alignment across different themes and input sizes. Additionally, the breadcrumb links in the app layout header now have a bolder font weight for better visibility.

Input Field Styling and Theming Improvements:

  • Added new SCSS rules in input-wrapper.scss to properly position the clearable button (chi-button[type='close']) when an input has a right-aligned icon, including responsive padding and positioning adjustments for different input sizes (-xs, -sm, -md, -lg, -xl).
  • Introduced new SCSS variables for clearable input button positioning and input padding for all supported themes, ensuring consistent look and feel across Brightspeed, CenturyLink, Colt, Connect, Lumen, Portal, and Test themes. [1] [2] [3] [4] [5] [6] [7]

App Layout Header Enhancement:

  • Updated the breadcrumb styling in the app layout header so that breadcrumb links (chi-link) now use a font weight of 500, making them more prominent and easier to read.

@NachoCasaleLinde NachoCasaleLinde requested a review from a team as a code owner May 28, 2026 08:30
@lumen-jenkins-prod
Copy link
Copy Markdown

The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-2076/1/. ❌

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

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