Skip to content

Commit

Permalink
remove all references to v7 theme (elastic#113570)
Browse files Browse the repository at this point in the history
Co-authored-by: spalger <spalger@users.noreply.github.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
3 people authored Oct 29, 2021
1 parent b481bff commit 30872e9
Show file tree
Hide file tree
Showing 89 changed files with 163 additions and 656 deletions.
2 changes: 1 addition & 1 deletion STYLEGUIDE.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -623,7 +623,7 @@ by your code until the circular dependencies on these have been solved.
When writing a new component, create a sibling SASS file of the same name and import directly into the **top** of the JS/TS component file. Doing so ensures the styles are never separated or lost on import and allows for better modularization (smaller individual plugin asset footprint).
All SASS (.scss) files will automatically build with the [EUI](https://elastic.github.io/eui/#/guidelines/sass) & Kibana invisibles (SASS variables, mixins, functions) from the [`globals_[theme].scss` file](src/core/public/core_app/styles/_globals_v7light.scss).
All SASS (.scss) files will automatically build with the [EUI](https://elastic.github.io/eui/#/guidelines/sass) & Kibana invisibles (SASS variables, mixins, functions) from the [`globals_[theme].scss` file](src/core/public/core_app/styles/_globals_v8light.scss).
While the styles for this component will only be loaded if the component exists on the page,
the styles **will** be global and so it is recommended to use a three letter prefix on your
Expand Down
2 changes: 1 addition & 1 deletion docs/management/advanced-options.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ Set to `true` to enable a dark mode for the {kib} UI. You must refresh the page
to apply the setting.

[[theme-version]]`theme:version`::
Specifies the {kib} theme. If you change the setting, refresh the page to apply the setting.
Kibana only ships with the v8 theme now, so this setting can no longer be edited.

[[timepicker-quickranges]]`timepicker:quickRanges`::
The list of ranges to show in the Quick section of the time filter. This should
Expand Down
9 changes: 3 additions & 6 deletions packages/kbn-optimizer/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,19 +44,16 @@ Any import in a bundle which resolves into another bundles "context" directory,

## Themes

SASS imports in bundles are automatically converted to CSS for one or more themes. In development we build the `v7light` and `v7dark` themes by default to improve build performance. When producing distributable bundles the default shifts to `*` so that the distributable bundles will include all themes, preventing the bundles from needing to be rebuilt when users change the active theme in Kibana's advanced settings.
SASS imports in bundles are automatically converted to CSS for one or more themes. In development we build the `v8light` and `v8dark` themes by default to improve build performance. When producing distributable bundles the default shifts to `*` so that the distributable bundles will include all themes, preventing the bundles from needing to be rebuilt when users change the active theme in Kibana's advanced settings.

To customize the themes that are built for development you can specify the `KBN_OPTIMIZER_THEMES` environment variable to one or more theme tags, or use `*` to build styles for all themes. Unfortunately building more than one theme significantly impacts build performance, so try to be strategic about which themes you build.

Currently supported theme tags: `v7light`, `v7dark`, `v8light`, `v8dark`
Currently supported theme tags: `v8light`, `v8dark`

Examples:
```sh
# start Kibana with only a single theme
KBN_OPTIMIZER_THEMES=v7light yarn start

# start Kibana with dark themes for version 7 and 8
KBN_OPTIMIZER_THEMES=v7dark,v8dark yarn start
KBN_OPTIMIZER_THEMES=v8light yarn start

# start Kibana with all the themes
KBN_OPTIMIZER_THEMES=* yarn start
Expand Down
21 changes: 9 additions & 12 deletions packages/kbn-optimizer/src/common/theme_tags.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@ it('returns default tags when passed undefined', () => {
it('returns all tags when passed *', () => {
expect(parseThemeTags('*')).toMatchInlineSnapshot(`
Array [
"v7dark",
"v7light",
"v8dark",
"v8light",
]
Expand All @@ -37,38 +35,37 @@ it('returns specific tag when passed a single value', () => {
});

it('returns specific tags when passed a comma separated list', () => {
expect(parseThemeTags('v8light, v7dark,v7light')).toMatchInlineSnapshot(`
expect(parseThemeTags('v8light,v8dark')).toMatchInlineSnapshot(`
Array [
"v7dark",
"v7light",
"v8dark",
"v8light",
]
`);
});

it('returns specific tags when passed an array', () => {
expect(parseThemeTags(['v8light', 'v7light'])).toMatchInlineSnapshot(`
expect(parseThemeTags(['v8light', 'v8dark'])).toMatchInlineSnapshot(`
Array [
"v7light",
"v8dark",
"v8light",
]
`);
});

it('throws when an invalid tag is in the array', () => {
expect(() => parseThemeTags(['v8light', 'v7light', 'bar'])).toThrowErrorMatchingInlineSnapshot(
`"Invalid theme tags [bar], options: [v7dark, v7light, v8dark, v8light]"`
expect(() => parseThemeTags(['v8light', 'v7light'])).toThrowErrorMatchingInlineSnapshot(
`"Invalid theme tags [v7light], options: [v8dark, v8light]"`
);
});

it('throws when an invalid tags in comma separated list', () => {
expect(() => parseThemeTags('v8light ,v7light,bar,box ')).toThrowErrorMatchingInlineSnapshot(
`"Invalid theme tags [bar, box], options: [v7dark, v7light, v8dark, v8light]"`
expect(() => parseThemeTags('v8light ,v7light')).toThrowErrorMatchingInlineSnapshot(
`"Invalid theme tags [v7light], options: [v8dark, v8light]"`
);
});

it('returns tags in alphabetical order', () => {
const tags = parseThemeTags(['v7light', 'v8light']);
const tags = parseThemeTags(['v8dark', 'v8light']);
expect(tags).toEqual(tags.slice().sort((a, b) => a.localeCompare(b)));
});

Expand Down
4 changes: 2 additions & 2 deletions packages/kbn-optimizer/src/common/theme_tags.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ const isArrayOfStrings = (input: unknown): input is string[] =>
Array.isArray(input) && input.every((v) => typeof v === 'string');

export type ThemeTags = readonly ThemeTag[];
export type ThemeTag = 'v7light' | 'v7dark' | 'v8light' | 'v8dark';
export type ThemeTag = 'v8light' | 'v8dark';
export const DEFAULT_THEMES = tags('v8light', 'v8dark');
export const ALL_THEMES = tags('v7light', 'v7dark', 'v8light', 'v8dark');
export const ALL_THEMES = tags('v8light', 'v8dark');

export function parseThemeTags(input?: any): ThemeTags {
if (!input) {
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 30872e9

Please sign in to comment.