feat(lib): Add AI Button by louismaximepiton · Pull Request #3529 · Orange-OpenSource/Orange-Boosted-Bootstrap

louismaximepiton · 2026-04-21T15:05:03Z

Types of change

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

Related issues

Closes #3522

Context & Motivation

Read #3522

Description

Add some CSS and documentation to handle AI Button.

Checklists

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)

Code review
Design review
A11y review
Commit on ouds/main following conventional commit

Live previews

https://deploy-preview-3529--boosted.netlify.app/docs/components/buttons#ai-button

netlify · 2026-04-21T15:08:51Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`bbb08d0`
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/69ef74073212190008484122
😎 Deploy Preview	https://deploy-preview-3529--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

Copilot

Pull request overview

Adds “AI button” support by introducing new sparkles icons in the docs sprite(s), adding documentation examples, and defining theme tokens/CSS needed to style the component.

Changes:

Added sparkles-default / sparkles-colored symbols to the docs SVG sprites (sosh/orange/orange-compact).
Added an “AI button” section and metadata to the Buttons documentation page.
Introduced AI-button border color tokens (per theme) and CSS for AI button styling.

Reviewed changes

Copilot reviewed 6 out of 9 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg	Adds sparkles symbols for the sosh docs sprite.
site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg	Adds sparkles symbols (including a multi-color variant) for the orange docs sprite.
site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg	Adds sparkles symbols (including a multi-color variant) for the orange-compact docs sprite.
site/src/content/docs/components/buttons.mdx	Adds AI button type + documentation examples for AI buttons.
scss/_buttons.scss	Adds AI button styling (gradient border + icon swapping).
packages/sosh/scss/tokens/_component.scss	Adds manually-defined AI button border tokens for sosh.
packages/sosh/scss/tokens/_component-colors-custom-props.scss	Adds a new custom prop used by the sosh AI border token.
packages/orange/scss/tokens/_component.scss	Adds manually-defined AI button border tokens for orange.
packages/orange-compact/scss/tokens/_component.scss	Adds manually-defined AI button border tokens for orange-compact.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 13 out of 16 changed files in this pull request and generated 6 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

MaxLardenois

Some suggestions
In line with what spec we have for now...

MaxLardenois · 2026-04-23T08:24:30Z

 }

+// No transparency on the button
+.btn-default.btn-ai:where(:not(:active, [class*="loading-"], :disabled, [aria-disabled="true"], .btn-on-colored-bg)) {


Is the :where necessary here?

Not really, but it might be useful for end-users to avoid adding too much specificty to the selector

I'm not sure I understand what it adds for users tbh

Co-authored-by: Maxime Lardenois <maxime.lardenois@orange.com>

MaxLardenois

Still a question on :where but I approve as it's not blocking

vprothais · 2026-05-26T09:17:11Z

I add a comment to keep track of what is happening. This component has been reworked on design side to make simpler. This PR must be updated with new version of the component, when available.

feat(lib): Add AI Button

8bf69d8

louismaximepiton added ⚛️ component 📖 documentation Improvements or additions to documentation css 🧰 library labels Apr 21, 2026

github-project-automation Bot added this to 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 21, 2026

github-project-automation Bot moved this to In Progress / Draft in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 21, 2026

louismaximepiton linked an issue Apr 21, 2026 that may be closed by this pull request

[OUDS][Components] Create component AI Button #3522

Open

louismaximepiton marked this pull request as ready for review April 22, 2026 10:15

Copilot AI review requested due to automatic review settings April 22, 2026 10:15

boosted-bot moved this from In Progress / Draft to Need Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 22, 2026

Copilot started reviewing on behalf of louismaximepiton April 22, 2026 10:16 View session

Update documentation

96c6664

Copilot AI reviewed Apr 22, 2026

View reviewed changes

Comment thread scss/_buttons.scss Outdated

Comment thread site/src/content/docs/components/buttons.mdx

Comment thread site/src/content/docs/components/buttons.mdx Outdated

Comment thread site/src/content/docs/components/buttons.mdx Outdated

Comment thread scss/_buttons.scss Outdated

louismaximepiton requested a review from Copilot April 22, 2026 10:24

Copilot started reviewing on behalf of louismaximepiton April 22, 2026 10:25 View session

Copilot AI reviewed Apr 22, 2026

View reviewed changes

louismaximepiton added 2 commits April 22, 2026 12:50

fix copilot review

0188e0a

.

771700f

MaxLardenois requested changes Apr 23, 2026

View reviewed changes

boosted-bot moved this from Need Dev Review to Dev Review In Progress in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 23, 2026

fix review

bbb08d0

Co-authored-by: Maxime Lardenois <maxime.lardenois@orange.com>

louismaximepiton requested a review from MaxLardenois April 27, 2026 15:01

MaxLardenois assigned vprothais May 4, 2026

MaxLardenois approved these changes May 4, 2026

View reviewed changes

boosted-bot moved this from Dev Review In Progress to Need Lead Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board May 4, 2026

Conversation

louismaximepiton commented Apr 21, 2026 • edited by boosted-bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Types of change

Related issues

Context & Motivation

Description

Checklists

Checklist (for Core Team only)

Progression (for Core Team only)

Live previews

Uh oh!

netlify Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for boosted ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MaxLardenois left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MaxLardenois Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

louismaximepiton Apr 27, 2026

Choose a reason for hiding this comment

Uh oh!

MaxLardenois May 4, 2026

Choose a reason for hiding this comment

Uh oh!

MaxLardenois left a comment

Choose a reason for hiding this comment

Uh oh!

vprothais commented May 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

louismaximepiton commented Apr 21, 2026 •

edited by boosted-bot

Loading

netlify Bot commented Apr 21, 2026 •

edited

Loading