Vis public UI LESS to SASS by cchaos · Pull Request #25333 · elastic/kibana

cchaos · 2018-11-07T20:53:54Z

This PR removes the LESS files in ui/public/vis, visLib, visualize and replaces them with Sass.

Process taken

The ui/public/_index.scss file was updated include a _index.scss file from each of the folders.
All Less files were replaced with sass counterparts.
- The sass files now live with separated _index.scss and _component_names.scss files next to the components or views they live next to (or close to it).
- Some files were even moved across folders to be closer to their actual component counterparts
- The Less files that are no longer being used were deleted entirely.
- The new sass files use EUI variables whenever possible. The most important being color and sizing variables.
- The selectors were all mostly changed to match EUI's BEM formatting. This means the html/js templating was touched as well.
- Additionally, a three-letter prefixes vis was added to all selectors to namespace them and avoid conflicts.

Notes

Darkmode

.. is still a bit hacky and re-imports the individual _index.scss files that are appropriate for .tab-dashboard.theme-dark so you will see duplicate non-color styles in dark dashboard mode until we can finalize theming.

Errors

I couldn't figure out how to get every type of error to show up inside the visualizations. If you can, please double-check that these are ok too.

Fixes

This fixes #22597, in the SASS way. There is currently a PR #23806 to fix it in the LESS files. If this fix needs a back port to before 6.6, I'd suggest merging that one in first.

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
~~- [ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support~~
~~- [ ] Documentation was added for features that require explanation or tutorials~~
Unit or functional tests were updated or added to match the most common scenarios
~~- [ ] This was checked for keyboard-only and screenreader accessibility~~

For maintainers

~~- [ ] This was checked for breaking API changes and was labeled appropriately~~
~~- [ ] This includes a feature addition or change that requires a release note and was labeled appropriately~~

elasticmachine · 2018-11-07T20:53:56Z

Pinging @elastic/kibana-app

elasticmachine · 2018-11-07T20:53:57Z

Pinging @elastic/kibana-design

elasticmachine · 2018-11-07T22:21:11Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

cchaos · 2018-11-07T23:29:39Z

It looks unrelated.... trying again JIC.

Jenkins, test this

elasticmachine · 2018-11-08T01:11:57Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

- Legend back to hard-coded width - Tooltip breaks-all on value

elasticmachine · 2018-11-08T17:41:56Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-11-08T20:18:12Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

cchaos · 2018-11-08T20:22:26Z

Another ES error
jenkins, test this

@elastic/kibana-app team, I think this is ready for review. The CI failures are inconsistent and all 3 have passed at some point...

elasticmachine · 2018-11-08T21:47:15Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

…ess-to-sass

elasticmachine · 2018-11-09T21:06:13Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

snide

Did a code review. Looks good. Likely should have someone from the viz team do a functionality pass.

src/ui/public/agg_response/hierarchical/_tooltip.html

src/ui/public/vis/components/tooltip/_tooltip.scss

src/ui/public/vis/vis_types/_vislib_vis_legend.scss

…ess-to-sass # Conflicts: # src/core_plugins/kibana/public/dashboard/_index.scss # x-pack/plugins/ml/public/explorer/_explorer.scss

cchaos · 2018-11-15T16:23:01Z

@elastic/kibana-app or @elastic/kibana-visualizations teams, can you do a review please?

elasticmachine · 2018-11-15T18:33:04Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

markov00

I've checked the main functionality of vis.
Everything looks good (and absolutely more clean to me ❤️) except for the following points to fix before merging:

legend doesn't correctly shows tooltip when the title is a long text

on 6.5:

on this PR:

top horizontal legend with long text shows cutted tooltip

tooltip values/headers on chart elements are displayed in a tabular format but aligned at the bottom of each cell: it's better to align all the cell values at the top

some tooltip text goes to a new line without taking care of words, displaying partial words and values.

missing the background of partial data areas: when displaying partial data (when the current selected time windows is smaller cut partially the date histogram interval at the beginning of end of a chart) we display a grayed zone with a tooltip that define that in this interval there is some partial data. Now this zone is no more shown.

and how it's displayed in 6.5

I've also merged this #23806

…ess-to-sass

cchaos · 2018-11-19T16:28:13Z

Thank you @markov00 for your thoroughness. I've addressed most of the issues you mentioned except for a few:

legend doesn't correctly shows tooltip when the title is a long text

I'm not getting that issue. Can you supply more info on your setup?
This PR on Chrome:

top horizontal legend with long text shows cutted tooltip

I removed the max-width on the item itself so this doesn't happen in top and bottom legend locations (and goes back to the way it works in master). But this is technically not caused by this PR, but has to do with tooltips not being in a portal and so is cutoff by overflow properties.

On master:

tooltip values/headers on chart elements are displayed in a tabular format but aligned at the bottom of each cell: it's better to align all the cell values at the top

Fixed

some tooltip text goes to a new line without taking care of words, displaying partial words and values.

Fixed

missing the background of partial data areas

Fixed: I accidentally had both a low opacity and low rgba alpha value that was causing it to be very light.

markov00 · 2018-11-19T17:12:22Z

@cchaos

legend doesn't correctly shows tooltip when the title is a long text
I was no more able to reproduce the first issue. Maybe it was a wrong cache or wrong build.

top horizontal legend with long text shows cutted tooltip

I've seen that also having the legend on the left shows an overflowing tooltip. Do you think it's possible to increase the tooltip z-index ?

markov00 · 2018-11-19T17:15:01Z

I found the answer my self about the tooltip: no...
I will open an issue when you merge this PR

cchaos · 2018-11-19T18:13:59Z

Yeah, I tried looking into it before and there didn't seem to be an easy way because of the way the components were separated. Thanks.

So is that an approval? :)

elasticmachine · 2018-11-19T18:28:45Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

cchaos added 11 commits November 5, 2018 18:49

Start of the work

d323c92

Fixing cascade order

7b72a10

Tooltips converted, need BEM

dd362cc

Fix leaflet tooltip border-radius

3c2cdef

tooltip done

c58152b

Moving svg styles

1d1e574

Hopefully done with legend

5b9512f

Finished off layout and legend and svg

ca4d103

Final removal of vislib->.less files

bb80953

Finished up visualize -> .less conversion

52bdec0

legend width adjust

a6edea5

cchaos added 4 commits November 7, 2018 16:31

More tooltip re-naming

d8cc31a

Removing some unused LESS vars

9d864bd

fixed imports

e5882a6

change visVisType naming

f9e4ea8

Some fixes

44f9161

- Legend back to hard-coded width - Tooltip breaks-all on value

snide mentioned this pull request Nov 8, 2018

[META] Moving Kibana off Less and using EUI global CSS scope #19748

Closed

30 tasks

cchaos requested a review from snide November 8, 2018 20:22

cchaos added 3 commits November 8, 2018 15:48

Fixing .extend coloring

ecd9ad9

better leaflet popup override for border radius

ec17e78

fix tag cloud message class

73a8f72

cchaos added 2 commits November 8, 2018 16:55

A few fixes to tooltip and alerts

52cf78b

Merge remote-tracking branch '2_upstream/master' into vis-public-ui-l…

8379293

…ess-to-sass

snide approved these changes Nov 12, 2018

View reviewed changes

cchaos added 2 commits November 15, 2018 11:19

Merge remote-tracking branch '2_upstream/master' into vis-public-ui-l…

cd2dca7

…ess-to-sass # Conflicts: # src/core_plugins/kibana/public/dashboard/_index.scss # x-pack/plugins/ml/public/explorer/_explorer.scss

PR feedback

d3b9e91

markov00 self-requested a review November 19, 2018 08:26

markov00 requested changes Nov 19, 2018

View reviewed changes

cchaos added 2 commits November 19, 2018 11:01

Some fixes based on review

b5175b0

Merge remote-tracking branch '2_upstream/master' into vis-public-ui-l…

65a8592

…ess-to-sass

markov00 approved these changes Nov 19, 2018

View reviewed changes

cchaos merged commit a5076b5 into elastic:master Nov 19, 2018

cchaos mentioned this pull request Nov 19, 2018

[6.x] Vis public UI LESS to SASS (#25333) #25889

Merged

cchaos added a commit to cchaos/kibana that referenced this pull request Nov 19, 2018

Vis public UI LESS to SASS (elastic#25333)

df95621

cchaos added a commit that referenced this pull request Nov 19, 2018

Vis public UI LESS to SASS (#25333) (#25889)

cdf0d85

cchaos deleted the vis-public-ui-less-to-sass branch March 7, 2019 17:14

Conversation

cchaos commented Nov 7, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Process taken

Notes

Darkmode

Errors

Fixes

Checklist

For maintainers

Uh oh!

elasticmachine commented Nov 7, 2018

Uh oh!

elasticmachine commented Nov 7, 2018

Uh oh!

elasticmachine commented Nov 7, 2018

💔 Build Failed

Uh oh!

cchaos commented Nov 7, 2018

Uh oh!

elasticmachine commented Nov 8, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Nov 8, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Nov 8, 2018

💔 Build Failed

Uh oh!

cchaos commented Nov 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

elasticmachine commented Nov 8, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Nov 9, 2018

💚 Build Succeeded

Uh oh!

snide left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cchaos commented Nov 15, 2018

Uh oh!

elasticmachine commented Nov 15, 2018

💚 Build Succeeded

Uh oh!

markov00 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cchaos commented Nov 19, 2018

Uh oh!

markov00 commented Nov 19, 2018

Uh oh!

markov00 commented Nov 19, 2018

Uh oh!

cchaos commented Nov 19, 2018

Uh oh!

elasticmachine commented Nov 19, 2018

💚 Build Succeeded

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cchaos commented Nov 7, 2018 •

edited

Loading

cchaos commented Nov 8, 2018 •

edited

Loading

markov00 left a comment •

edited

Loading