Skip to content

feat: add opaque buttons and text-opaque utility#3620

Open
MaxLardenois wants to merge 7 commits into
ouds/mainfrom
ouds/main-opaque-background-for-hover-state-of-button-and-link
Open

feat: add opaque buttons and text-opaque utility#3620
MaxLardenois wants to merge 7 commits into
ouds/mainfrom
ouds/main-opaque-background-for-hover-state-of-button-and-link

Conversation

@MaxLardenois

@MaxLardenois MaxLardenois commented Jun 25, 2026

Copy link
Copy Markdown
Collaborator

Types of change

  • Non-breaking change
  • Breaking change (fix or feature that would change existing functionality and usage)

Related issues

Closes #3569

Context & Motivation

Description

Checklists

  • I have read the contributing guidelines
  • My change follows the developer guide
  • My change pass all tests
  • My change is compatible with a responsive display
  • I have added tests (Javascript unit test or visual) to cover my changes
  • My change introduces changes to the documentation that I have updated accordingly
    • Title and DOM structure is correct
    • Links have been updated (title changes impact links)
    • CSS for the documentation
  • I have checked all states and combinations of the component with my change
  • I have checked all the impacts for the other components and core behavior (grid, reboot, utilities)

Checklist (for Core Team only)

  • The changes need to be in the migration guide
  • The changes are well displayed in Storybook (be careful if example order has changed for DSM)
  • The changes are compatible with RTL
  • Manually test browser compatibility with BrowserStack (Chrome 120, Firefox 121, Edge 120, Safari 15.6, iOS Safari, Chrome & Firefox on Android)

Progression (for Core Team only)

Live previews

@netlify

netlify Bot commented Jun 25, 2026

Copy link
Copy Markdown

Deploy Preview for boosted ready!

Name Link
🔨 Latest commit 126b447
🔍 Latest deploy log https://app.netlify.com/projects/boosted/deploys/6a465937a3b6ce00082b1ec5
😎 Deploy Preview https://deploy-preview-3620--boosted.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@MaxLardenois MaxLardenois marked this pull request as ready for review July 2, 2026 11:59
@boosted-bot boosted-bot moved this from In Progress / Draft to Need Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Jul 2, 2026
The `.opacify` class is only available for `.btn-strong` buttons.
</Callout>

<Example buttonLabel="buttons on colored backgrounds" class="p-none bd-btn-example bd-first-rounded" code={`<div class="bg-surface-brand-primary p-large d-flex gap-xsmall flex-wrap" style="background-image: url('https://fastly.picsum.photos/id/628/1000/300.jpg?hmac=scpBB5Z4eJBipw0O_j2T60oQcGjH8xoOA0OG42tW0go')">

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Is this url something internal that can be used in this context ? shouldn't we get this asset in our repo to avoid depending on external resources ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Need Dev Review

Development

Successfully merging this pull request may close these issues.

3 participants