Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(legend): fix color anchor, add action context, fix action padding #774

Merged
merged 8 commits into from
Jul 31, 2020

Conversation

nickofthyme
Copy link
Collaborator

@nickofthyme nickofthyme commented Jul 30, 2020

Summary

  • change color picker anchor to the color dot icon
  • fix eui popover styles pollution with EuiWrappingPopover
  • add resolved label and color to legend action component to avoid recomputing
  • add action padding to legend width when action is provided

Prevents this 👇

Screen Recording 2020-07-30 at 02 37 PM

and this ⬇️

Screen Recording 2020-07-31 at 08 23 AM

Now no movement

Screen Recording 2020-07-31 at 08 21 AM

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

- change color picker anchor to the color dot icon
- fix eui popover styles pollution with EuiWrappingPopover
- add resolved label and color to legend action component to avoid recomputing
- add action padding to legend width when action is provided
@nickofthyme nickofthyme added the :legend Legend related issue label Jul 30, 2020
@nickofthyme nickofthyme requested a review from markov00 July 30, 2020 20:29
@nickofthyme nickofthyme marked this pull request as ready for review July 30, 2020 21:02
@codecov-commenter
Copy link

Codecov Report

Merging #774 into master will increase coverage by 0.39%.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #774      +/-   ##
==========================================
+ Coverage   74.14%   74.54%   +0.39%     
==========================================
  Files         270      285      +15     
  Lines        9286     9577     +291     
  Branches     1994     2020      +26     
==========================================
+ Hits         6885     7139     +254     
- Misses       2395     2427      +32     
- Partials        6       11       +5     
Flag Coverage Δ
#unittests 74.14% <100.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
src/specs/settings.tsx 86.20% <ø> (ø)
src/components/icons/icon.tsx 100.00% <100.00%> (ø)
src/components/legend/color.tsx 100.00% <100.00%> (ø)
src/components/legend/legend_item.tsx 93.42% <100.00%> (ø)
src/state/selectors/get_legend_size.ts 92.30% <100.00%> (+0.41%) ⬆️
src/mocks/store/index.ts 100.00% <0.00%> (ø)
src/mocks/store/store.ts 92.59% <0.00%> (ø)
src/mocks/series/data.ts 100.00% <0.00%> (ø)
src/mocks/series/utils.ts 92.85% <0.00%> (ø)
src/mocks/specs/index.ts 100.00% <0.00%> (ø)
... and 10 more

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 087f5da...2b67e89. Read the comment docs.

Copy link
Member

@markov00 markov00 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me, tested locally

@@ -33,28 +33,32 @@ interface ColorProps {
* Color component used by the legend item
* @internal
*/
export function Color({ color, isSeriesHidden = false, hasColorPicker, onClick }: ColorProps) {
if (isSeriesHidden) {
export const Color = forwardRef<HTMLDivElement, ColorProps>(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we memoize also this function?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nickofthyme nickofthyme merged commit 4590a22 into elastic:master Jul 31, 2020
@nickofthyme nickofthyme deleted the legend-item-updates branch July 31, 2020 18:43
markov00 pushed a commit that referenced this pull request Aug 10, 2020
# [21.0.0](v20.0.2...v21.0.0) (2020-08-10)

### Bug Fixes

* update dep vulnerabilities, minimist and kind-of ([#763](#763)) ([4455281](4455281))
* **legend:** fix color anchor, add action context, fix action padding ([#774](#774)) ([4590a22](4590a22))
* **tooltip:** placement with left/top legends and single bars ([#771](#771)) ([e576b26](e576b26)), closes [#769](#769) [#770](#770)

### Features

* streamgraph and fit functions on stacked charts ([#751](#751)) ([268fcc0](268fcc0)), closes [#766](#766) [#715](#715) [#450](#450)

### BREAKING CHANGES

* the first parameter of `PointStyleAccessor` and `BarStyleAccessor` callbacks is changed from `RawDataSeriesDatum` to `DataSeriesDatum`. `stackAsPercentage` prop is replaced by `stackMode` that accept one `StackMode`.
@markov00
Copy link
Member

🎉 This PR is included in version 21.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label Aug 10, 2020
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this pull request Feb 10, 2022
# [21.0.0](elastic/elastic-charts@v20.0.2...v21.0.0) (2020-08-10)

### Bug Fixes

* update dep vulnerabilities, minimist and kind-of ([opensearch-project#763](elastic/elastic-charts#763)) ([843554f](elastic/elastic-charts@843554f))
* **legend:** fix color anchor, add action context, fix action padding ([opensearch-project#774](elastic/elastic-charts#774)) ([262f8d2](elastic/elastic-charts@262f8d2))
* **tooltip:** placement with left/top legends and single bars ([opensearch-project#771](elastic/elastic-charts#771)) ([75533b1](elastic/elastic-charts@75533b1)), closes [opensearch-project#769](elastic/elastic-charts#769) [opensearch-project#770](elastic/elastic-charts#770)

### Features

* streamgraph and fit functions on stacked charts ([opensearch-project#751](elastic/elastic-charts#751)) ([6f6a8cb](elastic/elastic-charts@6f6a8cb)), closes [opensearch-project#766](elastic/elastic-charts#766) [opensearch-project#715](elastic/elastic-charts#715) [opensearch-project#450](elastic/elastic-charts#450)

### BREAKING CHANGES

* the first parameter of `PointStyleAccessor` and `BarStyleAccessor` callbacks is changed from `RawDataSeriesDatum` to `DataSeriesDatum`. `stackAsPercentage` prop is replaced by `stackMode` that accept one `StackMode`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:legend Legend related issue released Issue released publicly
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants