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

snide · 2018-06-07T23:59:01Z

This will be a meta issue for tracking conversion of Kibana's 307 Less files to Sass.

Primary goals

Convert all non-dependency (non node-modules) less files to sass.
Import the EUI global variable scope into those new Sass files. This includes
- EUI sizing
- EUI colors
- EUI breakpoints
- EUI mixins for things like shadows...etc.
Remove bootstrap.
Remove KUI.
Convert everything to BEM standards of EUI.

Why are we doing this?

Kibana's current styling pipeline is a mess.
We want Kibana to be themable.
We want Kibana and EUI to talk to each other.
We want plugin authors to have a nice, easy way to build frontend that matches our look and feel.

Staged approach

Because of the size of the changes we should consider staging this out. I could see us doing the following...

Convert from Less to Sass, change the selectors to EUI's BEM format and utilize EUI's global scope.
Reorganize the stylesheet locations.
- Make all plugins follow a known tree pattern for stylesheet usage.
- Move all vendor / legacy files (like bootstrap) into a known legacy folder structure.

After the above is done

Remove the pieces of bootstrap, KUI that are not in use in the codebase out.
Remove the EUI K6 theme and use EUI native. Make a decision on font-family.
Provide an audit meta issue of legacy usage (KUI and bootstrap) that require conversion. This should be targeted towards operational teams.
Convert any style usage in the templating itself.

Patterns we'll want to follow during conversion

These are simple examples, not meant to be full code methodologies and pathing scenarios.

File organization

Kibana is made up of three major parts: The inherited EUI components, the global Kibana global blob, and individual Kibana plugins.

Kibana global blob would look like this

// kibana_global.scss

// EUI global scope
@import 'node_modules/@elastic/eui/src/themes/k6/k6_globals';
@import 'node_modules/@elastic/eui/src/themes/k6/k6_colors_light';
@import 'node_modules/@elastic/eui/src/global_styling/functions/index';
@import 'node_modules/@elastic/eui/src/global_styling/variables/index';
@import 'node_modules/@elastic/eui/src/global_styling/mixins/index';

// This should be a one liner to import all of EUI's actual component css
@import eui/components

// This would be all kibana components that are considered core to Kibana, hopefully living in the same directory structure somewhere in Kibana.
@import 'kibana_global/variables'
@import 'kibana_global/mixins'
@import 'kibana_global/components'

// For all the stuff we can't get rid of yet
@import 'kibana_global/hack'

Then Kibana's core global scope includes/inherits EUI and builds beyond it with it's own global mixins and components in a single css blob. Anything in this file would be considered usable UI for all of Kibana. We'll have better control over the load order and be able to run proper trash tests as we remove code over time.

Plugins would be separated into their own css files (as shown earlier) and loaded only within their plugin scope.

Plugins

Kibana is mostly made up of plugins. We should aim to move all styling to match the below structure.

src/some_plugin/

+-- public
|   +-- components
|   |   +-- componentName
|   |   |   +-- _index.scss
|   |   |   +-- _component.scss
+-- index.scss

Sass

// Should import both the EUI constants and any Kibana ones that are considered global
@import '_kibana_styling_constants';

// Temporary hacks
@import 'hacks';

// Monitoring plugin styles

// Prefix all styles with "mon" to avoid conflicts.
// Examples
//   monChart
//   monChart__legend
//   monChart__legend--small
//   monChart__legend-isLoading

@import 'components/chart/index';
@import 'components/no_data/index';
@import 'components/sparkline/index';
@import 'components/summary_status/index';
@import 'components/table/index';
@import 'components/logstash/pipeline_viewer/views/index';
@import 'directives/chart/index';
@import 'directives/elasticsearch/shard_allocation/index';

Then in the files themseslves

// ./plugin_component_one.scss
// Use a prefix for the file being built, let's use "mon" for "monitoring"
.monChart__legend--small {
  color: $euiColor;
  width: $euiSize;
}

@euiBreakpoint("xs", "s") {
  ...
}

Sections to convert

For an example conversion, along with some tips please look at #20995

Xpack plugins

Kibana OSS

Kibana core + Bootstrap

Kibana core work is blocked by #20859

Kibana core is essentially everything in src/ui/ (which is a lot of files)

KUI

KUI (aka ui_framework) should be audited for unused components. Existing, in use ones should import the EUI global scope so that it matches EUI theming as much as possible.

The text was updated successfully, but these errors were encountered:

snide · 2018-07-25T03:08:38Z

Kibana packages

kibana/packages/kbn-plugin-generator/sao_template/template/public/less/main.less
kibana/packages/kbn-ui-framework/node_modules/material-colors/dist/colors.less

Core

UI

@cchaos :

#25333

kibana/src/ui/public/vis/editors/components/editor_options_group.less
kibana/src/ui/public/vislib/styles/_alerts.less
kibana/src/ui/public/vislib/styles/_error.less
kibana/src/ui/public/vislib/styles/_layout.less
kibana/src/ui/public/vislib/styles/_legend.less
kibana/src/ui/public/vislib/styles/_svg.less
kibana/src/ui/public/vislib/styles/_tooltip.less
kibana/src/ui/public/vislib/styles/main.less
kibana/src/ui/public/visualize/components/visualization.less

Bootstrap

Xpack

cchaos · 2018-10-04T15:32:25Z

Note ---DONE

We also need to remove any .LESS file references to removed files in here:

kibana/src/dev/precommit_hook/casing_check_config.js

Line 106 in 95edbcd

export const TEMPORARILY_IGNORED_PATHS = [

snide · 2019-01-21T17:28:01Z

Closing this issue. Outside of some hanger on issues, it's complete and would be better served by smaller, clean up issues.

snide added Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. Meta labels Jun 7, 2018

snide assigned snide, cchaos and going-confetti Jul 20, 2018

snide mentioned this issue Jul 25, 2018

Add bolilerplate sass for Kibana core #21185

Merged

ryankeairns mentioned this issue Sep 17, 2018

Watcher - convert LESS to SASS #23252

Merged

ryankeairns self-assigned this Sep 24, 2018

This was referenced Sep 24, 2018

Grok Debugger Less to Sass #23425

Merged

Search Profiler - convert LESS to SASS #23588

Merged

This was referenced Oct 3, 2018

Logstash SASS conversion - removes unused less styles #23759

Merged

Reporting SASS - Remove less styles #23782

Merged

This was referenced Oct 5, 2018

Reporting accessibility / tweaks to our warning colors #12449

Closed

Notification button colors inconsistent #12447

Closed

Make Font Size configurable across Kibana #22210

Closed

ryankeairns mentioned this issue Nov 2, 2018

Security - convert LESS to SASS #25079

Merged

7 tasks

snide closed this as completed Jan 21, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

snide commented Jun 7, 2018 •

edited

Loading

snide commented Jul 25, 2018 •

edited by cchaos

Loading

cchaos commented Oct 4, 2018 •

edited

Loading

snide commented Jan 21, 2019

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

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

Comments

snide commented Jun 7, 2018 • edited Loading

Primary goals

Why are we doing this?

Staged approach

Patterns we'll want to follow during conversion

File organization

Kibana global blob would look like this

Plugins

Sass

Sections to convert

For an example conversion, along with some tips please look at #20995

Xpack plugins

Kibana OSS

Kibana core + Bootstrap

Kibana core work is blocked by #20859

KUI

snide commented Jul 25, 2018 • edited by cchaos Loading

Kibana packages

Core

UI

Bootstrap

Xpack

cchaos commented Oct 4, 2018 • edited Loading

Note ---DONE

snide commented Jan 21, 2019

snide commented Jun 7, 2018 •

edited

Loading

snide commented Jul 25, 2018 •

edited by cchaos

Loading

cchaos commented Oct 4, 2018 •

edited

Loading