feat(lib): Add Assistant Button - #3529
Conversation
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
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-coloredsymbols 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.
There was a problem hiding this comment.
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
left a comment
There was a problem hiding this comment.
Some suggestions
In line with what spec we have for now...
Co-authored-by: Maxime Lardenois <maxime.lardenois@orange.com>
MaxLardenois
left a comment
There was a problem hiding this comment.
Still a question on :where but I approve as it's not blocking
|
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. |
|
On hold until tokens 2.6.0 |
…lmp-add-ai-button
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 13 out of 18 changed files in this pull request and generated no new comments.
Files not reviewed (2)
- scss/tests/snapshot-tests/snapshots/ouds-web-bootstrap.css: Generated file
- scss/tests/snapshot-tests/snapshots/ouds-web.css: Generated file
Comments suppressed due to low confidence (6)
scss/_buttons.scss:64
- Adding
gapon.btnaffects pseudo-elements (like the navigation chevrons) as flex items, so.btn-previous:not(.btn-icon)::before { margin-right: ... }and.btn-next:not(.btn-icon)::after { margin-left: ... }(later in this file) will now combine with the newgap, increasing spacing unexpectedly for navigation buttons. Consider removing those margins or switching them to--btn-icon-gapoverrides for.btn-previous/.btn-nextso spacing is defined in one place.
display: inline-flex; // OUDS mod: instead of `inline-block`
flex-shrink: 0;
gap: var(--#{$prefix}btn-icon-gap);
align-items: center; // OUDS mod
site/src/content/docs/components/buttons.mdx:1044
- This example is now showing assistant buttons, but the
buttonLabelstill says "navigation buttons with wrapped text", which is misleading in the Assistant button section.
<Example buttonLabel="navigation buttons with wrapped text" class="bd-btn-example d-flex flex-column align-items-start" code={`<button class="btn btn-assistant" type="button">
scss/_button-assistant.scss:19
mask: $btn-assistant-icon center;omitsno-repeat/size, which can cause the mask to tile and is inconsistent with existing patterns (e.g.mask: $select-input-chevron no-repeat 50% / ...). Specify repeat/position/size explicitly.
mask: $btn-assistant-icon center;
scss/_button-assistant.scss:34
- The disabled background override only targets
:disabled, so it won’t apply to disabled links (<a aria-disabled="true">…</a>). Since the docs show<a class="btn btn-assistant" …>, consider covering[aria-disabled="true"]as well (consistent with other button docs/guidelines).
&:disabled:not(&.loading-indeterminate, &.loading-determinate) {
background: initial;
}
site/data/components-details.ts:11
- The component card snippet suggests combining
.btn-defaultwith.btn-assistant, but the documentation examples use.btn btn-assistantas a standalone variant. Using both may produce conflicting CSS variable overrides and a misleading snippet for consumers.
snippet: `<button type="button" class="btn btn-default btn-assistant">Label</button>`
site/src/content/docs/components/buttons.mdx:1028
SkeletonRedirectcomponent names are consistently lowercase elsewhere (e.g.component="navigation button",component="select input"). Usingcomponent="Assistant button"may break lookups if the redirect is case-sensitive.
<SkeletonRedirect component="Assistant button" />
louismaximepiton
left a comment
There was a problem hiding this comment.
Several changes required before mergind IMO.
| @import "@ouds/web-common/scss/links"; // OUDS mod | ||
| @import "@ouds/web-common/scss/bullet-list"; // OUDS mod | ||
| @import "@ouds/web-common/scss/buttons"; | ||
| @import "@ouds/web-common/scss/button-assistant"; // OUDS mod |
There was a problem hiding this comment.
I don't think we need the // OUDS mod anymore
There was a problem hiding this comment.
Do I remove all OUDS mod from here or only this one? I agree we do not need it but I'm not sure this PR is the place to have that decision...
|
|
||
| // Assistant button | ||
| // ai-assistant/sparkles v2.1 | ||
| $btn-assistant-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.598 4.516c.566-1.13 2.19-1.098 2.71.055l1.178 2.618.028.072a.75.75 0 0 1-1.361.612l-.035-.068-1.178-2.618-2.22 4.437a1.5 1.5 0 0 1-.72.695l-5.072 2.305 4.569 2.436a1.5 1.5 0 0 1 .568.533l2.892 4.658 2.712-4.626c.143-.244.354-.444.606-.574l4.685-2.418-4.22-1.808a.75.75 0 0 1 .59-1.379l4.221 1.809c1.166.5 1.224 2.13.097 2.711l-4.685 2.418-2.712 4.625a1.5 1.5 0 0 1-2.568.033L7.79 16.384l-4.57-2.436c-1.097-.585-1.046-2.175.086-2.69L8.38 8.953l2.219-4.437Z'/><path fill-rule='evenodd' d='M3.824 4.795a.75.75 0 0 1 1.34-.077l.388.678.678.388a.75.75 0 0 1-.076 1.34l-.602.258-.416.83a.75.75 0 0 1-1.341 0l-.415-.83-.552-.236a.75.75 0 0 1-.04-1.36l.778-.389.258-.602Zm.432.898a.75.75 0 0 1-.355.375l-.777.389.551.236a.75.75 0 0 1 .376.354l.415.83.415-.83a.75.75 0 0 1 .375-.354l.602-.258-.678-.387a.75.75 0 0 1-.279-.28l-.387-.678-.258.603ZM17.83 2.664a.75.75 0 0 1 1.313-.05l.81 1.35 1.261.63a.75.75 0 0 1 0 1.342l-1.26.63-.811 1.35a.75.75 0 0 1-1.314-.05l-.65-1.3-1.36-.618a.75.75 0 0 1 0-1.366l1.36-.618.65-1.3Zm.02 1.636a.75.75 0 0 1-.36.347l-1.361.618 1.36.618a.751.751 0 0 1 .361.348l.65 1.3.81-1.35a.75.75 0 0 1 .308-.285l1.26-.63-1.26-.63a.75.75 0 0 1-.308-.286L18.5 3l-.65 1.3Z' clip-rule='evenodd'/></svg>") !default; |
There was a problem hiding this comment.
Remove evenodd attributes
| $btn-assistant-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.598 4.516c.566-1.13 2.19-1.098 2.71.055l1.178 2.618.028.072a.75.75 0 0 1-1.361.612l-.035-.068-1.178-2.618-2.22 4.437a1.5 1.5 0 0 1-.72.695l-5.072 2.305 4.569 2.436a1.5 1.5 0 0 1 .568.533l2.892 4.658 2.712-4.626c.143-.244.354-.444.606-.574l4.685-2.418-4.22-1.808a.75.75 0 0 1 .59-1.379l4.221 1.809c1.166.5 1.224 2.13.097 2.711l-4.685 2.418-2.712 4.625a1.5 1.5 0 0 1-2.568.033L7.79 16.384l-4.57-2.436c-1.097-.585-1.046-2.175.086-2.69L8.38 8.953l2.219-4.437Z'/><path fill-rule='evenodd' d='M3.824 4.795a.75.75 0 0 1 1.34-.077l.388.678.678.388a.75.75 0 0 1-.076 1.34l-.602.258-.416.83a.75.75 0 0 1-1.341 0l-.415-.83-.552-.236a.75.75 0 0 1-.04-1.36l.778-.389.258-.602Zm.432.898a.75.75 0 0 1-.355.375l-.777.389.551.236a.75.75 0 0 1 .376.354l.415.83.415-.83a.75.75 0 0 1 .375-.354l.602-.258-.678-.387a.75.75 0 0 1-.279-.28l-.387-.678-.258.603ZM17.83 2.664a.75.75 0 0 1 1.313-.05l.81 1.35 1.261.63a.75.75 0 0 1 0 1.342l-1.26.63-.811 1.35a.75.75 0 0 1-1.314-.05l-.65-1.3-1.36-.618a.75.75 0 0 1 0-1.366l1.36-.618.65-1.3Zm.02 1.636a.75.75 0 0 1-.36.347l-1.361.618 1.36.618a.751.751 0 0 1 .361.348l.65 1.3.81-1.35a.75.75 0 0 1 .308-.285l1.26-.63-1.26-.63a.75.75 0 0 1-.308-.286L18.5 3l-.65 1.3Z' clip-rule='evenodd'/></svg>") !default; | |
| $btn-assistant-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.598 4.516c.566-1.13 2.19-1.098 2.71.055l1.178 2.618.028.072a.75.75 0 0 1-1.361.612l-.035-.068-1.178-2.618-2.22 4.437a1.5 1.5 0 0 1-.72.695l-5.072 2.305 4.569 2.436a1.5 1.5 0 0 1 .568.533l2.892 4.658 2.712-4.626c.143-.244.354-.444.606-.574l4.685-2.418-4.22-1.808a.75.75 0 0 1 .59-1.379l4.221 1.809c1.166.5 1.224 2.13.097 2.711l-4.685 2.418-2.712 4.625a1.5 1.5 0 0 1-2.568.033L7.79 16.384l-4.57-2.436c-1.097-.585-1.046-2.175.086-2.69L8.38 8.953l2.219-4.437Z'/><path d='M3.824 4.795a.75.75 0 0 1 1.34-.077l.388.678.678.388a.75.75 0 0 1-.076 1.34l-.602.258-.416.83a.75.75 0 0 1-1.341 0l-.415-.83-.552-.236a.75.75 0 0 1-.04-1.36l.778-.389.258-.602Zm.432.898a.75.75 0 0 1-.355.375l-.777.389.551.236a.75.75 0 0 1 .376.354l.415.83.415-.83a.75.75 0 0 1 .375-.354l.602-.258-.678-.387a.75.75 0 0 1-.279-.28l-.387-.678-.258.603ZM17.83 2.664a.75.75 0 0 1 1.313-.05l.81 1.35 1.261.63a.75.75 0 0 1 0 1.342l-1.26.63-.811 1.35a.75.75 0 0 1-1.314-.05l-.65-1.3-1.36-.618a.75.75 0 0 1 0-1.366l1.36-.618.65-1.3Zm.02 1.636a.75.75 0 0 1-.36.347l-1.361.618 1.36.618a.751.751 0 0 1 .361.348l.65 1.3.81-1.35a.75.75 0 0 1 .308-.285l1.26-.63-1.26-.63a.75.75 0 0 1-.308-.286L18.5 3l-.65 1.3Z'/></svg>") !default; |
There was a problem hiding this comment.
With changes from margin to gap, there are probably places like this one where it should be adapted
There was a problem hiding this comment.
Changed for navigation button, do you see another one?
| ### Component types | ||
|
|
||
| <ul class="list-unstyled row row-cols-1 sm:row-cols-2"> | ||
| <ul class="list-unstyled row row-cols-1 sm:row-cols-2 xl:row-cols-3"> |
There was a problem hiding this comment.
Should we adapt in every page to be like this or do you think we should adapt to the context ?
There was a problem hiding this comment.
Actually I think you did that modification.
I tried with md:row-cols-3 and I think it's better throughout, lmk.
| <path d="M632.2 376.5c-75.6 65.4-187.8 65.4-263.4 0C303.7 411.4 263 479.3 263 553.2V699c0 130.9 106.3 237 237.5 237S738 829.9 738 699V553.2c0-73.9-40.7-141.8-105.8-176.7m-181 121.3c36.2 0 65.6 29.4 65.6 65.6s-29.4 65.5-65.6 65.5-65.5-29.4-65.5-65.6 29.4-65.5 65.5-65.5m99.7 265.8v.6c-.2 54.5-44.5 98.5-99 98.3s-98.5-44.5-98.3-99v-60.8c0-29.8 15.8-57.4 41.6-72.3 32.7 27.4 80.4 27.1 112.8-.7 26.5 14.8 42.9 42.7 42.9 73z"/> | ||
| <ellipse cx="500.5" cy="225.1" rx="164.4" ry="164.1"/> | ||
| </symbol> | ||
| <symbol id="sparkles-colored" viewBox="0 0 24 24" fill="currentColor"> |
There was a problem hiding this comment.
I think we can remove this
|
|
||
| <Example showToolbar={false} code={`<button type="button" class="btn btn-next btn-default">Next</button>`} /> | ||
|
|
||
| <Example showToolbar={false} code={`<button type="button" class="btn btn-assistant">Default</button>`} /> |
There was a problem hiding this comment.
Or maybe label ?
| <Example showToolbar={false} code={`<button type="button" class="btn btn-assistant">Default</button>`} /> | |
| <Example showToolbar={false} code={`<button type="button" class="btn btn-assistant">Assistant</button>`} /> |
There was a problem hiding this comment.
I will put Assistant everywhere to stay in line with the rest of this file but I'm open to using Label
| </svg> | ||
| <span role="status" id="loading-btn-msg-8" class="visually-hidden">Downloading file 8: xx%</span> | ||
| </button> | ||
|
|
There was a problem hiding this comment.
Think we can remove them </button></div>
There was a problem hiding this comment.
I do not get this comment
| <Example buttonLabel="button skeleton" code={`<div aria-busy="true" inert> | ||
|
|
||
| <button type="button" class="btn btn-default">Default</button> | ||
|
|
There was a problem hiding this comment.
Same when there is only one
There was a problem hiding this comment.
Ah ok I see, I'm not sure I agree because we need to have an absolute rule otherwise we will always hesitate... (my rule being: always put space before and after a component code)
We can discuss with the others
|
|
||
| #### Disabled | ||
|
|
||
| Assistant buttons typically use the `<button>` element. To disable an Assistant button, add the `[disabled]` boolean attribute. Disabled Assistant buttons have `pointer-events: none` applied to, preventing hover and active states from triggering. |
There was a problem hiding this comment.
I don't know what's best
| Assistant buttons typically use the `<button>` element. To disable an Assistant button, add the `[disabled]` boolean attribute. Disabled Assistant buttons have `pointer-events: none` applied to, preventing hover and active states from triggering. | |
| Assistant buttons typically use the `<button>` element. To disable an Assistant button, add the `:disabled` state. Disabled Assistant buttons have `pointer-events: none` applied to, preventing hover and active states from triggering. |
There was a problem hiding this comment.
We are talking about the DOM here so I would keep [disabled]
|
|
||
| #### Text wrapping | ||
|
|
||
| A button's text should not exceed one line, but will automatically wrap if necessary. It also natively supports `<br/>` tags to break the text into multiple lines. Read more about [text wrapping in a button](https://r.orange.fr/r/S-ouds-doc-navigation-button/t/99e6bc9526). |
There was a problem hiding this comment.
Link isn't the good one, is there any that better fits ?
There was a problem hiding this comment.
There is no page yet for the Assistant button
Types of change
Related issues
Closes #3522
Context & Motivation
Read #3522
Description
Add some CSS and documentation to handle AI Button.
Checklists
Checklist (for Core Team only)
Progression (for Core Team only)
ouds/mainfollowing conventional commitLive previews