Create the button component with tokens and new styles. The button should be backwards compatible with v1, this means that the same selectors should be used to style buttons. In addition to that, style default buttons (buttons without classes) as secondary buttons and submit buttons as primary buttons.
The button should be backwards compatible, therefore the current class selectors should stay the same for the new Design. Additionally, buttons without any classes should be styled as follows:
<button>Action</button> or <input type="button" value="Action" /> should be displayed as a secondary buttons
<button type="submit">Submit</button> or <input type="submit" value="Submit" /> should be styled as primary buttons
There are no animated buttons anymore. Remove the animated button styles and create a breaking changeset for these. Also, create an optional migration, because there is no need to update the button html structure, the class btn-animated will not do anything and the span inside does not hurt.
Tasks
### 💻 Tasks
- [x] Review Design (All states present? Possible to implement?)
- [ ] https://github.com/swisspost/design-system/issues/3496
- [ ] HTML/CSS implementation
- [ ] Variants: Primary, Secondary, Tertiary, Icon only
- [ ] Style buttons without classes according to type
- [ ] Remove animated button styles
- [ ] Write optional migration instructions to remove animated buttons from code
- [ ] Documentation in Storybook
- [ ] Visual regression tests
- [ ] Design review
Description
Create the button component with tokens and new styles. The button should be backwards compatible with v1, this means that the same selectors should be used to style buttons. In addition to that, style default buttons (buttons without classes) as secondary buttons and submit buttons as primary buttons.
Design
https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=17-163
Tokens
Development
The button should be backwards compatible, therefore the current class selectors should stay the same for the new Design. Additionally, buttons without any classes should be styled as follows:
<button>Action</button>
or<input type="button" value="Action" />
should be displayed as a secondary buttons<button type="submit">Submit</button>
or<input type="submit" value="Submit" />
should be styled as primary buttonsThere are no animated buttons anymore. Remove the animated button styles and create a breaking changeset for these. Also, create an optional migration, because there is no need to update the button html structure, the class
btn-animated
will not do anything and the span inside does not hurt.Tasks