design-system
design-system copied to clipboard
swisspost
The Swiss Post Design System pattern library for a consistent and accessible user experience across the web platform.
The chip styles recently changed, the styles package should be updated accordingly: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?node-id=10370%3A49289&mode=dev
Create a component similar to https://getbootstrap.com/docs/5.2/forms/input-group/ ```[tasklist] ### Tasks - [ ] Implementation seems complex without breaking changes, needs some research first to see what's possible without adding new markup...
For example a search icon is often added to filter forms:  TBD: [in the internet-header, it is used as a button](https://next.design-system.post.ch/?path=/docs/internet-header-header--docs). How to differentiate both? Should we allow icons...
Implement styling for the ``[^1] element, replacing the [angular modal](https://design-system.post.ch/#/ng-bootstrap-samples/modal). ```[tasklist] ### Tasks - [x] Add a story for dialog - [x] Add styles of the modal (the ng-bootstrap styles...
**Design**: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components?node-id=7802%3A33963&t=NxYB7ZrwohQXWwaV-0 ```[tasklist] ### Tasks - [ ] Validation states - [ ] Check floating label behaviour - [ ] Check margins for hints and validation messages - [ ]...
Implement the updated switch design. The new design uses a color change on the background instead of a sliding track animation and adds a smaller variant. Figma: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components?node-id=7777%3A33877&t=zTAKJLbklgpXEsSf-1 ```[tasklist] ###...
Create a component for user avatars.  **Design**: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=17162%3A7287&mode=design&t=Q7MUVh3G2mYSJ7OV-1 ### Props - name - company name (optional) ### Slots - bubble: slot for the `` component (#3210) ```[tasklist] ### Tasks...
We should have a comprehensive documentation of our token system which explains the basic concept and the architecture we're using. ### Basics Design tokens — or tokens, for short —...
CSS variables have an impact on performance: https://lisilinhart.info/posts/css-variables-performance/ Especially variables defined at the `:root` are inherited throughout the whole document and may potentially affect every element. The current implementation relies...
> @gfellerph Resolution: create a ticket to get more insights on AG grid for figma and dev _Originally posted by @gfellerph in [#2898](https://github.com/swisspost/design-system/issues/2898#issuecomment-2045065356)_ Create a POC with AG Grid community...