Skip to content

[DPEDE-7045] Create styles for alert gradient banner#2084

Open
NachoCasaleLinde wants to merge 6 commits into
CenturyLink:masterfrom
NachoCasaleLinde:DPEDE-7045-create-styles-for-alert-gradient-banner
Open

[DPEDE-7045] Create styles for alert gradient banner#2084
NachoCasaleLinde wants to merge 6 commits into
CenturyLink:masterfrom
NachoCasaleLinde:DPEDE-7045-create-styles-for-alert-gradient-banner

Conversation

@NachoCasaleLinde

Copy link
Copy Markdown
Contributor

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

This pull request introduces new gradient alert styles, updates the composer textarea component, and improves the mapping of CSS modifiers to Web Component properties. It also refines component schemas and reference documentation to align with these changes.

Component styling and features:

  • Added new gradient alert styles, including support for a teal variant, with corresponding variables and a new SCSS partial (_gradient.scss, _variables.scss, alert.scss, _variables.scss). [1] [2] [3]
  • Overhauled the composer textarea styles: introduced new variables, updated SCSS for .chi-composer-input, and improved focus/hover states and structure (_variables.scss, textarea.scss, _input-textarea.scss). [1] [2] [3] [4] [5] [6] [7] [8] [9]

Component documentation and schema updates:

  • Updated allowed CSS modifiers and properties for several components, including new gradient and teal modifiers, and added new properties for dropdown triggers and composer textarea (schemas.json). [1] [2]
  • Improved the mapping tables for CSS modifiers to Web Component properties for chi-dropdown, chi-epanel, and others, reflecting new and reordered modifiers (chi-migration.md). [1] [2]
  • Updated component reference documentation to reflect new allowed modifiers, children, and usage for components like dropdown, drawer, tabs, pagination, and textarea (reference.md). [1] [2] [3]

Other fixes and adjustments:

  • Fixed z-index stacking for sidebar navigation in certain states (sidenav.scss). (src/chi/components/sidebar/sidenav.scssR691, Fcf2acafL14R32)
  • Removed unused dropdown test selector from Backstop config (backstop-non-responsive.json).

@NachoCasaleLinde NachoCasaleLinde requested a review from a team as a code owner June 3, 2026 14:47
@NachoCasaleLinde NachoCasaleLinde marked this pull request as draft June 3, 2026 14:47
@NachoCasaleLinde NachoCasaleLinde force-pushed the DPEDE-7045-create-styles-for-alert-gradient-banner branch from 094aebe to 9beb5c7 Compare June 3, 2026 15:20
@NachoCasaleLinde NachoCasaleLinde marked this pull request as ready for review June 3, 2026 15:24
@josecarlosgonzalezv josecarlosgonzalezv changed the title Dpede 7045 create styles for alert gradient banner [DPEDE-7045] Create styles for alert gradient banner Jun 4, 2026
$alert-muted-icon-color: $color-icon-muted;
$alert-muted-banner-background-color: $color-background-muted-light;
$alert-muted-bubble-background-color: $color-background-muted-lighter;
$alert-gradient-background: linear-gradient(90deg, #fcba23 0%, $color-orange-50 100%);

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Use $color-yellow-45 or other variable?

Comment thread src/chi/components/alert/_gradient.scss Outdated
@lumen-jenkins-prod

Copy link
Copy Markdown

The CI pipeline has run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-2084/3/. ✅

@lumen-jenkins-prod

Copy link
Copy Markdown

You can check this PRs instance in https://nginx-pr-2084-ux-chi.rke-odc-test.corp.intranet (internal)

@lumn-sonarent

lumn-sonarent Bot commented Jun 15, 2026

Copy link
Copy Markdown

SonarQube Quality Gate

Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@lumen-jenkins-prod

Copy link
Copy Markdown

The CI pipeline has run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-2084/4/. ✅

@lumen-jenkins-prod

Copy link
Copy Markdown

You can check this PRs instance in https://nginx-pr-2084-ux-chi.rke-odc-test.corp.intranet (internal)

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.

1 participant