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	`771700f`
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/69e8a9acd8bae000083c343f
😎 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-23T06:20:18Z

+
+<BrandSpecific brand={['orange', 'orange-compact']}>
+<Callout type="warning" title="Colored icon">
+  Be aware that `.btn-strong` and `.btn-minimal` variants should use a colored icon to indicate the AI action. It will be automatically replaced when not present or when needed.


Is that it?

Suggested change

Be aware that `.btn-strong` and `.btn-minimal` variants should use a colored icon to indicate the AI action. It will be automatically replaced when not present or when needed.

Be aware that `.btn-strong` and `.btn-minimal` variants should use a colored icon to indicate the AI action. If omitted, the default AI icon will be displayed.

MaxLardenois · 2026-04-23T06:29:40Z

+</BrandSpecific>
+
+<Callout type="info">
+  `.btn-default` isn't transparent here, and you might specify `--bs-btn-bg` to make it transparent if needed.


Suggested change

`.btn-default` isn't transparent here, and you might specify `--bs-btn-bg` to make it transparent if needed.

Due to technical limitations, an AI button with`.btn-default` does not have a transparent background. To simulate transparency, set `--bs-btn-bg` to its container background color.

MaxLardenois · 2026-04-23T06:49:26Z

+
+<BrandSpecific brand={['orange', 'orange-compact']}>
+<Callout type="warning" title="Colored icon">
+  Be aware that `.btn-strong` and `.btn-minimal` variants should use a colored icon to indicate the AI action. It will be automatically replaced when not present or when needed.


Is that it?

Suggested change

Be aware that `.btn-strong` and `.btn-minimal` variants should use a colored icon to indicate the AI action. It will be automatically replaced when not present or when needed.

Be aware that `.btn-strong` and `.btn-minimal` variants should use a colored icon to indicate the AI action. If omitted, the default AI icon will be displayed.

MaxLardenois · 2026-04-23T06:50:43Z

+</BrandSpecific>
+
+<Callout type="info">
+  `.btn-default` isn't transparent here, and you might specify `--bs-btn-bg` to make it transparent if needed.


Suggested change

`.btn-default` isn't transparent here, and you might specify `--bs-btn-bg` to make it transparent if needed.

Due to technical limitations, an AI button with`.btn-default` does not have a transparent background. To simulate transparency, set `--bs-btn-bg` to its container background color.

MaxLardenois · 2026-04-23T08:15:23Z

+
+#### Disabled
+
+AI buttons use a `<button>` element, simply add the `disabled` boolean attribute to it. Disabled AI buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.


Suggested change

AI buttons use a `<button>` element, simply add the `disabled` boolean attribute to it. Disabled AI buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.

AI buttons typically use the `<button>` element. To disable an AI button, add the `disabled` boolean attribute. Disabled AI buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.

MaxLardenois · 2026-04-23T08:16:39Z

 ---

+## v1.3.0
+


Suggested change

<hr />

MaxLardenois · 2026-04-23T08:16:56Z

+
+#### AI button
+
+- <span class="tag tag-small tag-positive"><span class="tag-status-icon"></span>New</span> AI button has been implemented. Read more in our [buttons page]([[docsref:/components/buttons#ai-button]]).


Shouldn't this be draft 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?

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

	Be aware that `.btn-strong` and `.btn-minimal` variants should use a colored icon to indicate the AI action. It will be automatically replaced when not present or when needed.
	Be aware that `.btn-strong` and `.btn-minimal` variants should use a colored icon to indicate the AI action. If omitted, the default AI icon will be displayed.

	`.btn-default` isn't transparent here, and you might specify `--bs-btn-bg` to make it transparent if needed.
	Due to technical limitations, an AI button with`.btn-default` does not have a transparent background. To simulate transparency, set `--bs-btn-bg` to its container background color.


		#### Disabled

		AI buttons use a `<button>` element, simply add the `disabled` boolean attribute to it. Disabled AI buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.

	AI buttons use a `<button>` element, simply add the `disabled` boolean attribute to it. Disabled AI buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.
	AI buttons typically use the `<button>` element. To disable an AI button, add the `disabled` boolean attribute. Disabled AI buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.


		#### AI button

		- <span class="tag tag-small tag-positive"><span class="tag-status-icon"></span>New</span> AI button has been implemented. Read more in our [buttons page]([[docsref:/components/buttons#ai-button]]).

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

louismaximepiton commented Apr 21, 2026 •

edited by boosted-bot

Loading

netlify Bot commented Apr 21, 2026 •

edited

Loading