GAUD-9877: AI Lumi button#983
Conversation
- scaffolds the new d2l-labs-button-subtle-ai component
…the package.json file
|
Thanks for the PR! 🎉 We've deployed an automatic preview for this PR - you can see your changes here:
Note The build needs to finish before your changes are deployed. |
There was a problem hiding this comment.
Question for Gaudi: wondering whether we might want an ai directory where we can put all the AI-related stuff? Not sure if there are plans for more components or not. Otherwise we'd end up with button-ai, dropdown-ai, etc.
There was a problem hiding this comment.
I think a lumi directory makes sense, and I'm not sure how "subtle" this is anymore
./src/components/lumi/button/button.jsclass Button extends FocusMixin(LitElement) {
...
customElements.define('d2l-labs-lumi-button', Button);import '@brightspace-ui/labs/components/lumi/button/button.js';<d2l-labs-lumi-button text="Rot My Brain"></d2l-labs-lumi-button>There was a problem hiding this comment.
IMO that sounds like very product specific, and not sure if this repo is intended for that, like if we would have a folder or even a label specific/dedicated to a product. To me sounds like we should not, but we could talk about this within the team's channel.
I think @dbatiste suggested something similar but more generic: button-ai which to me sounds like the way to go
There was a problem hiding this comment.
Yeah definitely not saying you're wrong. I guess my thinking with using lumi was to discourage wider usage. This is the branding of Lumi, right? Maybe I just need to better understand where the lines are.
Does Lumi have its own defined design pattern as a branch off Daylight?
Are there/will there be other AI tools/products that aren't Lumi-branded? Will they all use this design pattern?
Will this graduate to core or somewhere else? If somewhere else, to a product repo like nearly everything else is organized?
EdwinACL831
force-pushed
the
ecollazos/GAUD-9877_ai_lumi_button
branch
from
af0b174 to
8aefe97
Compare
There was a problem hiding this comment.
I think a lumi directory makes sense, and I'm not sure how "subtle" this is anymore
./src/components/lumi/button/button.jsclass Button extends FocusMixin(LitElement) {
...
customElements.define('d2l-labs-lumi-button', Button);import '@brightspace-ui/labs/components/lumi/button/button.js';<d2l-labs-lumi-button text="Rot My Brain"></d2l-labs-lumi-button>| linear-gradient(var(--d2l-theme-background-color-base), var(--d2l-theme-background-color-base)) padding-box, | ||
| linear-gradient(to top left, var(--d2l-color-celestine), var(--d2l-color-fluorite-plus-1)) border-box; | ||
| border: 0.1rem solid transparent; | ||
| border-radius: 0.3rem; |
There was a problem hiding this comment.
The radius needs to increase with the border width to match the inner button shape/focus styles
| border-radius: 0.3rem; | |
| border-radius: 0.4rem; |
|
Are we ok with this button's box being larger than our standard buttons? I don't see a way to shrink it without extending 
|
|
|
||
| static get styles() { | ||
| return [css` | ||
| :host { |
There was a problem hiding this comment.
We probably want a wrapper in the shadow DOM to style so they're scoped and not easily overridden by consumers
4 participants
Jira
GAUD-9877
Description
This addresses the intention of creating a specific AI Lumi Button. This is done by using the
d2l-button-subtlefrom core plus adding styles to it.NOTE: Still a WIP
Normal state
Focused state (by tabbing from keyboard)
Focused state (by focusing programmatically and by clicking it)
Focused by clicking another button that focuses the AI onealso byclicking the ai button directlyHover state (before any click)