Skip to content

feat(lib): Add Assistant Button #3529

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
louismaximepiton wants to merge 8 commits into
base: ouds/main
Choose a base branch
from
Draft

feat(lib): Add Assistant Button #3529

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8bf69d8
feat(lib): Add AI Button
louismaximepiton Apr 21, 2026
96c6664
Update documentation
louismaximepiton Apr 22, 2026
0188e0a
fix copilot review
louismaximepiton Apr 22, 2026
771700f
.
louismaximepiton Apr 22, 2026
bbb08d0
fix review
louismaximepiton Apr 27, 2026
aca8f3e
Merge branch 'ouds/main' into ouds/main-lmp-add-ai-button
MaxLardenois Jun 19, 2026
b902e17
some work
MaxLardenois Jun 23, 2026
fb81baf
rename to assistant
MaxLardenois Jun 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/orange-compact/scss/tokens/_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,11 @@ $ouds-button-space-padding-inline-end-icon-start: $ouds-space-padding-inline-3xl
$ouds-button-space-padding-inline-icon-none: $ouds-space-padding-inline-4xlarge !default;
$ouds-button-space-padding-inline-icon-start: $ouds-space-padding-inline-xlarge !default;
$ouds-button-space-padding-inline-start-icon-end: $ouds-space-padding-inline-3xlarge !default;
// Manually added tokens for AI button
$ouds-button-color-border-primary: var(--#{$prefix}color-border-brand-primary) !default;
$ouds-button-color-border-secondary: $core-orange-color-decorative-shocking-pink-200 !default;
$ouds-button-color-border-tertiary: $core-orange-color-decorative-amethyst-400 !default;
$ouds-button-color-border-quaternary: $core-orange-color-decorative-sky-400 !default;
// scss-docs-end ouds-component-button

// Checkbox
Expand Down
5 changes: 5 additions & 0 deletions packages/orange/scss/tokens/_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,11 @@ $ouds-button-space-padding-inline-end-icon-start: $ouds-space-padding-inline-3xl
$ouds-button-space-padding-inline-icon-none: $ouds-space-padding-inline-4xlarge !default;
$ouds-button-space-padding-inline-icon-start: $ouds-space-padding-inline-xlarge !default;
$ouds-button-space-padding-inline-start-icon-end: $ouds-space-padding-inline-3xlarge !default;
// Manually added tokens for AI button
$ouds-button-color-border-primary: var(--#{$prefix}color-border-brand-primary) !default;
$ouds-button-color-border-secondary: $core-orange-color-decorative-shocking-pink-200 !default;
$ouds-button-color-border-tertiary: $core-orange-color-decorative-amethyst-400 !default;
$ouds-button-color-border-quaternary: $core-orange-color-decorative-sky-400 !default;
// scss-docs-end ouds-component-button

// Checkbox
Expand Down
2 changes: 2 additions & 0 deletions packages/sosh/scss/tokens/_component-colors-custom-props.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
@include color-mode(light, true) {
--#{$prefix}button-color-bg-brand-pressed: #{$core-sosh-color-magenta-500};
--#{$prefix}button-color-bg-brand-loading: #{$core-sosh-color-magenta-500};
--#{$prefix}button-color-border-quaternary: #{$core-ouds-color-opacity-black-680};
--#{$prefix}button-color-content-brand-pressed: #{$core-ouds-color-functional-white};
--#{$prefix}button-color-content-brand-loading: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-bg-default-hover: #{$core-ouds-color-opacity-black-680};
Expand Down Expand Up @@ -64,6 +65,7 @@
@include color-mode(dark, true) {
--#{$prefix}button-color-bg-brand-pressed: #{$core-sosh-color-blue-duck-light-800};
--#{$prefix}button-color-bg-brand-loading: #{$core-sosh-color-blue-duck-light-800};
--#{$prefix}button-color-border-quaternary: #{$core-ouds-color-opacity-white-200};
--#{$prefix}button-color-content-brand-pressed: #{$core-ouds-color-functional-black};
--#{$prefix}button-color-content-brand-loading: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-bg-default-hover: #{$core-ouds-color-opacity-white-800};
Expand Down
5 changes: 5 additions & 0 deletions packages/sosh/scss/tokens/_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,11 @@ $ouds-button-space-padding-inline-end-icon-start: $ouds-space-padding-inline-3xl
$ouds-button-space-padding-inline-icon-none: $ouds-space-padding-inline-4xlarge !default;
$ouds-button-space-padding-inline-icon-start: $ouds-space-padding-inline-xlarge !default;
$ouds-button-space-padding-inline-start-icon-end: $ouds-space-padding-inline-3xlarge !default;
// Manually added tokens for AI button
$ouds-button-color-border-primary: var(--#{$prefix}color-border-brand-secondary) !default;
$ouds-button-color-border-secondary: var(--#{$prefix}color-border-brand-primary) !default;
$ouds-button-color-border-tertiary: var(--#{$prefix}color-border-brand-tertiary) !default;
$ouds-button-color-border-quaternary: var(--#{$prefix}button-color-border-quaternary) !default;
// scss-docs-end ouds-component-button

// Checkbox
Expand Down
33 changes: 33 additions & 0 deletions scss/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -529,3 +529,36 @@
background-color: currentcolor;
}
Comment thread
louismaximepiton marked this conversation as resolved.

// No transparency on the button
.btn-default.btn-ai:where(:not(:active, [class*="loading-"], :disabled, .btn-on-colored-bg)) {
background: linear-gradient(var(--#{$prefix}color-bg-primary)) padding-box, conic-gradient($ouds-button-color-border-secondary 0deg 78deg, $ouds-button-color-border-tertiary 78deg 118deg, $ouds-button-color-border-quaternary 118deg 242deg, $ouds-button-color-border-primary 242deg 360deg) border-box;
background-origin: border-box;
border-color: transparent;

&.btn-icon {
background: linear-gradient(var(--#{$prefix}color-bg-primary)) padding-box, conic-gradient($ouds-button-color-border-secondary 0deg 72deg, $ouds-button-color-border-tertiary 72deg 144deg, $ouds-button-color-border-quaternary 144deg 216deg, $ouds-button-color-border-primary 216deg 360deg) border-box;
Comment thread
louismaximepiton marked this conversation as resolved.
Outdated
}
}
Comment thread
louismaximepiton marked this conversation as resolved.
Outdated

.btn-ai {
&:has(.btn-ai-colored-icon) .btn-ai-icon {
display: none;
}

&:hover,
&:focus,
&:focus-visible,
&:active {
.btn-ai-icon {
display: block;
}

.btn-ai-colored-icon {
display: none;
}
}
}

// No border-radius
// border-image-source: conic-gradient(#ff0 0deg 78deg, #00f 78deg 118deg, #0f0 118deg 242deg, #f15e00 216deg 360deg);
// border-image-slice: 1;
Comment thread
louismaximepiton marked this conversation as resolved.
Outdated
70 changes: 70 additions & 0 deletions site/src/content/docs/components/buttons.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ toc: true
types:
- Button
- Navigation button
- AI button
Comment thread
louismaximepiton marked this conversation as resolved.
Outdated
---

import { getData } from '@libs/data'
Expand Down Expand Up @@ -730,3 +731,72 @@ Please refer to the [loading state section of the button component](#loading) fo
<span role="status" id="loading-nav-btn-msg-3" class="visually-hidden">Loading next page</span>
</button>`} />

## [[comp]] AI button

<Example buttonLabel="navigation buttons variants" class="bd-btn-example" code={`<a class="btn btn-default btn-ai" href="#">
Comment thread
louismaximepiton marked this conversation as resolved.
Outdated
<svg aria-hidden="true" class="btn-ai-icon">
<use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#sparkles-default')}"/>
</svg>
Default
</a>
<a class="btn btn-strong btn-ai" href="#">
<svg aria-hidden="true" class="btn-ai-colored-icon">
<use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#sparkles-colored')}"/>
</svg>
<svg aria-hidden="true" class="btn-ai-icon">
<use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#sparkles-default')}"/>
</svg>
Strong
</a>
<a class="btn btn-brand btn-ai" href="#">
<svg aria-hidden="true" class="btn-ai-icon">
<use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#sparkles-default')}"/>
</svg>
Brand
</a>
<a class="btn btn-minimal btn-ai" href="#">
<svg aria-hidden="true" class="btn-ai-colored-icon">
<use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#sparkles-colored')}"/>
</svg>
<svg aria-hidden="true" class="btn-ai-icon">
<use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#sparkles-default')}"/>
</svg>
Minimal
</a>
<a class="btn btn-negative btn-ai" href="#">
<svg aria-hidden="true" class="btn-ai-icon">
<use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#sparkles-default')}"/>
</svg>
Negative
</a>
<a class="btn btn-default btn-icon btn-ai" href="#">
<svg aria-hidden="true" class="btn-ai-icon">
<use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#sparkles-default')}"/>
</svg>
</a>
Comment thread
louismaximepiton marked this conversation as resolved.
Outdated
<a class="btn btn-strong btn-icon btn-ai" href="#">
<svg aria-hidden="true" class="btn-ai-colored-icon">
<use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#sparkles-colored')}"/>
</svg>
<svg aria-hidden="true" class="btn-ai-icon">
<use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#sparkles-default')}"/>
</svg>
</a>
<a class="btn btn-brand btn-icon btn-ai" href="#">
<svg aria-hidden="true" class="btn-ai-icon">
<use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#sparkles-default')}"/>
</svg>
</a>
<a class="btn btn-minimal btn-icon btn-ai" href="#">
<svg aria-hidden="true" class="btn-ai-colored-icon">
<use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#sparkles-colored')}"/>
</svg>
<svg aria-hidden="true" class="btn-ai-icon">
<use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#sparkles-default')}"/>
</svg>
</a>
<a class="btn btn-negative btn-icon btn-ai" href="#">
<svg aria-hidden="true" class="btn-ai-icon">
<use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#sparkles-default')}"/>
</svg>
</a>`} />
13 changes: 13 additions & 0 deletions site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading