feat(styles): eui Amsterdam theme#1463
Conversation
nickofthyme
added
chore
:styling
|
👋 Hey @nickofthyme! This is great! I just figured I'd give you a heads up that we will be releasing (another) breaking change soon that will actually make You may want to pause this until that release happens so you don't have to do the work twice. I can provide guidance on the changes needed once that happens. |
|
@cchaos Thanks for the heads up. I think the main issue with this change is our VRT and having to check all 900+ diffs. If your breaking change would just mean we have to change some imports but the styles are nearly the same than it shouldn't be an issue. When is this change coming? days, weeks, months? |
|
It's in this PR elastic/eui#5121 which is in it's final reviews. So maybe next Tuesday (11/9) or the Tuesday after. |
rshen91
left a comment
rshen91
left a comment
There was a problem hiding this comment.
LGTM - checked all the vrts thanks for opening/referencing the orphan points. All other screenshots only reflected theme changes
cchaos
left a comment
cchaos
left a comment
There was a problem hiding this comment.
I might be a bit confused about how your docs work or how you expect consumers to consumer charts with/without EUI, but here are some suggestions:
|
@markov00 could you take a look at the style |
The `rotation` configuration is available on the `theme.heatmap.xAxisLabel` theme style to rotate the labels of the X-axis from 0 to 90 degrees. The rotation will shrink the chart vertically( and occasionally also horizontally) depending on the length of the labels. Few changes to the x-axis labels are also landed in this PR: - categorical labels overflowing the chart boundaries will play a role in shrinking the chart size. - the X-axis now shows small ticks, center-aligned for categorical scale and left-aligned for time - the time axis ticks are aligned to the right of the ticks - time axis labels instead, will not shrink the chart anymore. The number of labels will be reduced gradually to avoid overlaps and overflows. The right edge of the heatmap will always touch the right edge of the rendering area. BREAKING CHANGES: `width`, `align`, and `baseline` style properties are removed from the `xAxisLabels` and `yAxisLabels` style of the Heatmap theme. Co-authored-by: Marco Vettorello <vettorello.marco@gmail.com>
Bumps [url-parse](https://github.com/unshiftio/url-parse) from 1.5.3 to 1.5.10. - [Release notes](https://github.com/unshiftio/url-parse/releases) - [Commits](unshiftio/url-parse@1.5.3...1.5.10) --- updated-dependencies: - dependency-name: url-parse dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
|
@markov00 do you think this should be a breaking change? |
Changing the colors is actually a breaking change even if the change is not too drastic (the colors are a bit more washed and the last 2 colors are inverted) from |
markov00
left a comment
markov00
left a comment
There was a problem hiding this comment.
Changes looks goot to me tested locally and all charts looks great (only the streamgraph is a bit too transparent, but we can fix this in a different PR)
# [45.0.0](v44.0.0...v45.0.0) (2022-03-04) ### Features * **styles:** eui Amsterdam theme ([#1463](#1463)) ([fea1445](fea1445)) ### BREAKING CHANGES * **styles:** chart color and style changes
4 participants
Summary
Move to eui Amsterdam theme. Major changes include:
:focus&:focus-withinstates are slightly different. (see gifs below)After
Before
Details
Chart consumes styles from eui to leverage some variables, mixins, etc. and now that kibana is fully on the new Amsterdam theme I think it's best we fully migrate. This was also causing styles issues related to a different implementation for focus states between the old and the new, which consequently applied both styles. This situation defeats any VRT we have in place.
cc: @elastic/eui-design
Issues
fix #1461
Checklist
:xy,:partition):interactions,:axis):themelabel has been added and the@elastic/eui-designteam has been pinged when there areThemeAPI changescloses #123,fixes #123)dark,light,eui-dark&eui-light