feat(theme): allow recursive partial theme #239

nickofthyme · 2019-06-12T19:57:28Z

Summary

Issue #201

Allow partial theme object for chart Settings

You can now specify a PartialTheme to pass to the Settings component where every field in the full Theme type is recursively optional.

Before

If you wanted to change one property in a nested type lets say left margin we want to set to 0. You would need to include the default/base values of right, top and bottom margins for those to carry over, otherwise, they will be removed!

const theme: PartialTheme = {
  chartMargins: {
    left: 0,
    right: 10,
    top: 10,
    bottom: 10,
  },
};

After

You ONLY need to include the values you want, then pass that to the Settings component.

const theme: PartialTheme = {
  chartMargins: {
    left: 0,
  },
};

There is also no need to merge this PartialTheme theme using the mergeWithDefaultTheme function, although you can if you really want to 😏. This will happen automatically within the Settings. By default, it will deep-merge your PartialTheme with the LIGHT_THEME as a base. However, if you would like to set the base to be something else you can pass that as a prop.

<Chart className="story-chart-dark">
  <Settings
    theme={customPartialTheme}
    baseThemeType={BaseThemeTypes.Dark}
  />
  ...
/>

Checklist

Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
This was checked for cross-browser compatibility, including a check against IE11
Proper documentation or storybook story was added for features that require explanation or tutorials
Unit tests were updated or added to match the most common scenarios
Each commit follows the convention

src/specs/settings.tsx

package.json

nickofthyme · 2019-06-13T16:14:30Z

yarn.lock

@@ -4951,7 +4951,7 @@ deep-is@~0.1.3:
  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=

-[email protected]:
+[email protected], deepmerge@^3.2.0:


@markov00 it looks like we are already using this library through some dependency. Not sure if that matters.

yep, it's semantic-release via octokit... important thing is that we don't use it directly

The main tsconfig.json is what vscode uses to parse ts files. Adding a global type would not available in excluded test files. Extended base tsconfig to current match current build config.

Allow recursive partial themes to be passed to the Setting component. Added RecursivePartial global type. Issue elastic#201

codecov-io · 2019-06-14T23:24:48Z

Codecov Report

Merging #239 into master will decrease coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #239      +/-   ##
==========================================
- Coverage   97.75%   97.74%   -0.01%     
==========================================
  Files          36       36              
  Lines        2626     2621       -5     
  Branches      587      582       -5     
==========================================
- Hits         2567     2562       -5     
  Misses         52       52              
  Partials        7        7

Impacted Files	Coverage Δ
src/specs/settings.tsx	`96.34% <100%> (+0.39%)`	⬆️
src/lib/utils/commons.ts	`100% <100%> (ø)`	⬆️
src/lib/themes/theme.ts	`100% <100%> (ø)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ff7340a...12a451f. Read the comment docs.

src/@types/global.d.ts

src/lib/themes/theme.ts

markov00 · 2019-06-17T12:53:29Z

yarn.lock

@@ -4951,7 +4951,7 @@ deep-is@~0.1.3:
  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=

-[email protected]:
+[email protected], deepmerge@^3.2.0:


yep, it's semantic-release via octokit... important thing is that we don't use it directly

tsconfig.json

Moved global type to be utils. Updated storybook config with custom tsconfig file.

emmacunningham

tested locally and code LGTM!

definitely doesn't need to be handled in this PR but would be nice to also extend this to allow for partial style definitions for the per series custom styles.

# [6.3.0](v6.2.0...v6.3.0) (2019-06-20) ### Features * **theme:** allow recursive partial theme ([#239](#239)) ([d8144ee](d8144ee)), closes [#201](#201)

markov00 · 2019-06-20T17:18:32Z

🎉 This PR is included in version 6.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [6.3.0](elastic/elastic-charts@v6.2.0...v6.3.0) (2019-06-20) ### Features * **theme:** allow recursive partial theme ([opensearch-project#239](elastic/elastic-charts#239)) ([64e9451](elastic/elastic-charts@64e9451)), closes [opensearch-project#201](elastic/elastic-charts#201)

nickofthyme added enhancement New feature or request wip work in progress :styling Styling related issue labels Jun 12, 2019

nickofthyme requested review from emmacunningham and markov00 June 12, 2019 19:57

nickofthyme commented Jun 12, 2019

View reviewed changes

src/specs/settings.tsx Outdated Show resolved Hide resolved

markov00 reviewed Jun 12, 2019

View reviewed changes

package.json Outdated Show resolved Hide resolved

This comment has been minimized.

Sign in to view

nickofthyme commented Jun 13, 2019

View reviewed changes

nickofthyme added 2 commits June 14, 2019 18:06

build(tsconfig): update tsconfigs to extend from a base config

7261a46

The main tsconfig.json is what vscode uses to parse ts files. Adding a global type would not available in excluded test files. Extended base tsconfig to current match current build config.

feat(theme): allow recursive partial themes

257f649

Allow recursive partial themes to be passed to the Setting component. Added RecursivePartial global type. Issue elastic#201

nickofthyme force-pushed the feat/partial-styles branch from 1490d31 to 257f649 Compare June 14, 2019 23:15

nickofthyme marked this pull request as ready for review June 14, 2019 23:15

nickofthyme removed the wip work in progress label Jun 14, 2019

test(settings): add tests for partial theme to settings component

d6a5af4

markov00 reviewed Jun 17, 2019

View reviewed changes

tsconfig.json Show resolved Hide resolved

nickofthyme added 2 commits June 18, 2019 08:36

refactor: global type inclusion and story config

af19a2d

Moved global type to be utils. Updated storybook config with custom tsconfig file.

refactor: remove enum declaration

12a451f

emmacunningham approved these changes Jun 18, 2019

View reviewed changes

nickofthyme merged commit d8144ee into elastic:master Jun 20, 2019

nickofthyme deleted the feat/partial-styles branch June 20, 2019 17:11

markov00 pushed a commit that referenced this pull request Jun 20, 2019

chore(release): 6.3.0 [skip ci]

98a87c8

# [6.3.0](v6.2.0...v6.3.0) (2019-06-20) ### Features * **theme:** allow recursive partial theme ([#239](#239)) ([d8144ee](d8144ee)), closes [#201](#201)

markov00 added the released Issue released publicly label Jun 20, 2019

alexwizp mentioned this pull request Jun 25, 2019

Upgrade @elastic/charts to 7.0.1 elastic/kibana#39571

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(theme): allow recursive partial theme #239

feat(theme): allow recursive partial theme #239

nickofthyme commented Jun 12, 2019 •

edited

Loading

This comment has been minimized.

nickofthyme Jun 13, 2019

markov00 Jun 17, 2019

codecov-io commented Jun 14, 2019 •

edited

Loading

markov00 Jun 17, 2019

emmacunningham left a comment

markov00 commented Jun 20, 2019

feat(theme): allow recursive partial theme #239

feat(theme): allow recursive partial theme #239

Conversation

nickofthyme commented Jun 12, 2019 • edited Loading

Summary

Before

After

Checklist

This comment has been minimized.

nickofthyme Jun 13, 2019

Choose a reason for hiding this comment

markov00 Jun 17, 2019

Choose a reason for hiding this comment

codecov-io commented Jun 14, 2019 • edited Loading

Codecov Report

markov00 Jun 17, 2019

Choose a reason for hiding this comment

emmacunningham left a comment

Choose a reason for hiding this comment

markov00 commented Jun 20, 2019

nickofthyme commented Jun 12, 2019 •

edited

Loading

codecov-io commented Jun 14, 2019 •

edited

Loading