WEBDEV-8503 Migrate ia-button to elements#56
Conversation
|
| describe('IA button', () => { | ||
| test('renders a basic button', async () => { | ||
| const el = await fixture<IAButton>(html`<ia-button>Click me</ia-button>`); | ||
| const el = await fixture<IAButton>(html`<ia-button>Submit</ia-button>`); |
There was a problem hiding this comment.
This test file copied verbatim from Offshoot
| `; | ||
| } | ||
|
|
||
| /** Sets up or removes button type emulation as needed */ |
There was a problem hiding this comment.
This entire block of additions (form emulation) also copied verbatim from Offshoot and doesn't need a re-review
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #56 +/- ##
==========================================
+ Coverage 78.75% 78.77% +0.01%
==========================================
Files 16 16
Lines 645 688 +43
Branches 168 186 +18
==========================================
+ Hits 508 542 +34
- Misses 95 100 +5
- Partials 42 46 +4 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
latonv
left a comment
latonv
left a comment
There was a problem hiding this comment.
LGTM, nice migration! Spotted one possible typo.
| radioOptions: [ | ||
| 'primary', | ||
| 'secondary', | ||
| 'danger', | ||
| 'warning', | ||
| 'disabled', | ||
| 'transparent', | ||
| 'custom', | ||
| 'link', | ||
| 'danger-link', | ||
| ], |
There was a problem hiding this comment.
Maybe we could use a "dropdown menu" input type at some point :)
| }, | ||
| { | ||
| label: 'Background color (custom)', | ||
| cssVariable: '--ia-button-custom-text-color', |
There was a problem hiding this comment.
Should this be --ia-button-custom-fill?
| > | ||
| ${this.loading ? this.loadingStateTemplate : html`<slot></slot>`} | ||
| </button> | ||
| <slot name="hidden-btn"></slot> |
There was a problem hiding this comment.
Ah, one other typo I just spotted -- slot is named hidden-btn here but the input has slot="hidden-button" below.
3 participants
Moves the
ia-buttoncomponent from Offshoot into Elements. It's mostly a simple copy-paste, with the only big difference being switching from using parent-applied classes for styling, to using a property calledmode, i.e.<ia-button class="primary">-><ia-button mode="primary">Also renames the CSS variables to match our new conventions and creates a set of theme variables where needed.