fix(component): DLT-2121 move all styling to dialtone-css from vue #557
Conversation
braddialpad
added
the
visual-test-ready
braddialpad
requested review from
juliodialpad,
iropolo,
francisrupert and
ninamarina
as code owners
| .skeleton-placeholder { | ||
| --placeholder-from-color: hsla(var(--dt-color-black-900-hsl) / 0.2); | ||
| --placeholder-to-color: hsla(var(--dt-color-black-900-hsl) / 0.1); | ||
|
|
||
| display: flex; | ||
| width: 100%; | ||
| background: var(--placeholder-from-color); | ||
| background: var(--placeholder-from-color, var(--dt-color-black-300)); |
There was a problem hiding this comment.
Let's make the fallback color var(--dt-color-surface-bold-opaque). Same for the others below.
There was a problem hiding this comment.
What about the --placeholder-to-color? currently falls back to var(--dt-color-black-100)
There was a problem hiding this comment.
Ah yes, use var(--dt-color-surface-moderate-opaque). That doesn't map to the current Black 100, but it's a less jarring animating shift.
Also, remove the...
style="
...
--placeholder-from-color: ...;
--placeholder-to-color: ...;
...
"
...from the ## Prefabricated examples.
There was a problem hiding this comment.
Maybe belay that, look at this other comment first.
But still do the removal of style="..." comment above.
There was a problem hiding this comment.
Alright, should be good.
|
Looking into percy issues, a couple small problems found there. |
Co-authored-by: Francis Rupert <francis.rupert@dialpad.com>
|
Alright, all remaining issues should be fixed. Also added a blog post for the breaking change since it could affect anyone overriding component classes. |
|
✔️ Deploy previews ready! |
fix(component): DLT-2121 move all styling to dialtone-css from vue
Obligatory GIF (super important!)
🛠️ Type Of Change
These types will increment the version number on release:
📖 Jira Ticket
https://dialpad.atlassian.net/browse/DLT-2121
📖 Description
Moved all remaining CSS styling from core components into dialtone-css.
💡 Context
We want all our styling in one place
📝 Checklist
For all PRs:
For all CSS changes:
🔮 Next Steps
Do the same thing on recipes
BREAKING CHANGE CLASSNAME LIST
We will likely have to do a small find/replace migration to fix code overriding these classes. d-item-layout and d-list-item are the highest risk. I would say usage of any of the others should be rare.
Note if this will also include all sub elements such as
d-list-item--focusabledt-item-layout -> d-item-layout (and all sub elements)
dt-list-item -> d-list-item (and all sub elements)
enter-active -> d-collapsible__enter-active
leave-active -> d-collapsible__leave-active
dt-empty-list-item -> d-combobox__empty-list-item
dt-description-list -> d-description-list
dt-list-separator -> d-list-item-separator
mention-suggestion-name -> d-mention-suggestion__name
dt-suggestion-list__container -> d-suggestion-list__container
dt-rich-text-editor -> d-rich-text-editor
skeleton-placeholder -> d-skeleton-placeholder