learningequality
Make `KIconButton`'s border style configurable
Product
Kolibri
Desired behavior
KIconButton provides API to allow for styling its border, and border color can be easily themed.
It could be a general solution similar to KButtons appearanceOverrides property or a more constrained API with new properties specific to border styling.
Current behavior
There is no straightforward way to style borders. One of the ways we overcome this in our products is using /deep/ combinator on .svg class. This also limits theming possibilities. This can be seen at the previous/next buttons of the Kolibri's epub viewer:
 |
 |
 |
 |
.previous-button-white {
/deep/ svg {
border-color: white;
fill: white;
}
}
/deep/ svg {
border: 2px solid;
border-radius: 50%;
}
The Value Add
- borders can be themed
- no need to use
/deep/combinator (see https://github.com/learningequality/kolibri/issues/8811)
What was the motivation for this? Is there a design that asks for it?
Perhaps this could be fixed by adding a purpose-built icon as well?
It's a follow-up to this PR https://github.com/learningequality/kolibri/pull/9011 which replaced plenty of hardcoded colors across Kolibri by tokens or palette as described here https://develop--kolibri-design-system.netlify.app/colors/. The Kolibri issue it resolved is here https://github.com/learningequality/kolibri/issues/8899.
This work revealed there are some places that we can't use tokens for technical limitations, therefore there are still some hardcoded colors left. I don't recall if the epub viewer is the only example or if there were more places.
Hi @nick2432, thank you for your interest. I think we still need to make some decisions here before it's ready.
We currently have contributing opportunities in three repositories. You can see the contributing guidelines including links to issues suitable for contribution for each repository here:
- Kolibri Contributing Guidelines
- Kolibri Design System Contributing Guidelines
- Studio Contributing Guidelines