Skip to content

style: Label styling/storybook touchups#10627

Merged
rusackas merged 11 commits into
apache:masterfrom
preset-io:interactive-label-styling
Aug 18, 2020
Merged

style: Label styling/storybook touchups#10627
rusackas merged 11 commits into
apache:masterfrom
preset-io:interactive-label-styling

Conversation

@rusackas
Copy link
Copy Markdown
Member

@rusackas rusackas commented Aug 18, 2020

SUMMARY

This PR makes a few little tweaks to the Label component:

  1. Removes a bunch of Emotion styles that weren't being used (seemingly copied from Button)
  2. Adds a bunch of Emotion styles to pull the correct Theme color variables in
  3. Makes it so that label colors only darken on hover if there's an onClick handler
  4. Changes the cursor of the Label to 'pointer' if there's an onClick handler
  5. Adds the "info" label to the Storybook
  6. Breaks out the Gallery and Interactive parts of the storybook entry to different Stories for simplicity (I should do this with Button, too). This makes certain styling work better, particularly removing the :first-child left margins in this case.
  7. Adds an "onClick action" knob to the interactive storybook entry

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

After:
Pasted_Image_8_17_20__11_05_PM
Pasted_Image_8_17_20__11_09_PM
Pasted_Image_8_17_20__11_10_PM

TEST PLAN

ADDITIONAL INFORMATION

  • Has associated issue:
  • Changes UI
  • Requires DB Migration.
  • Confirm DB Migration upgrade and downgrade tested.
  • Introduces new feature or API
  • Removes existing feature or API

@rusackas rusackas requested a review from mistercrunch August 18, 2020 06:11
nytai
nytai reviewed Aug 18, 2020
View reviewed changes
Comment thread superset-frontend/src/components/Label/index.tsx
@pull-request-size pull-request-size Bot added size/L and removed size/M labels Aug 18, 2020
@rusackas
Copy link
Copy Markdown
Member Author

rusackas commented Aug 18, 2020

Now includes primary and secondary label styles, implemented just like the main bootstrap ones, with the ability to add more as needed.
image

@rusackas rusackas requested a review from nytai August 18, 2020 22:02
@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Aug 18, 2020 •
edited
Loading

Codecov Report

Merging #10627 into master will decrease coverage by 0.48%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #10627      +/-   ##
==========================================
- Coverage   59.93%   59.44%   -0.49%     
==========================================
  Files         778      360     -418     
  Lines       36699    23131   -13568     
  Branches     3461        0    -3461     
==========================================
- Hits        21996    13751    -8245     
+ Misses      14516     9380    -5136     
+ Partials      187        0     -187
Flag Coverage Δ
#javascript ?
#python 59.44% <ø> (-0.09%) ⬇️

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

Impacted Files Coverage Δ
superset/connectors/sqla/views.py 67.92% <0.00%> (-13.76%) ⬇️
superset/db_engine_specs/mysql.py 79.16% <0.00%> (-12.50%) ⬇️
superset/models/core.py 86.38% <0.00%> (-0.84%) ⬇️
superset/views/core.py 74.32% <0.00%> (-0.25%) ⬇️
superset/errors.py 100.00% <0.00%> (ø)
superset/viz_sip38.py 0.00% <0.00%> (ø)
superset-frontend/src/setup/setupColors.js
superset-frontend/src/chart/ChartRenderer.jsx
superset-frontend/src/theme.ts
.../src/dashboard/components/BuilderComponentPane.jsx
... and 415 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 0d3caf0...9cda3db. Read the comment docs.

nytai
nytai approved these changes Aug 18, 2020
View reviewed changes
Copy link
Copy Markdown
Member

@nytai nytai left a comment

Choose a reason for hiding this comment

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

lgtm, thanks for cleaning this up and making the storybook stories rich.

@rusackas rusackas merged commit ec7874f into apache:master Aug 18, 2020
@rusackas rusackas deleted the interactive-label-styling branch August 18, 2020 22:42
amitmiran137 pushed a commit to amitmiran137/incubator-superset that referenced this pull request Aug 21, 2020
Merge branch 'master' into dynamic-plugin-import
cf13c0a 
* master: (43 commits)
  feat: Getting fancier with Storybook (apache#10647)
  fix: dedup groupby in viz.py while preserving order (apache#10633)
  feat: bump superset-ui for certified tag (apache#10650)
  feat: setup react page with submenu for datasources listview  (apache#10642)
  feat: add certification to metrics (apache#10630)
  feat(viz-plugins): add date formatting to pivot-table (apache#10637)
  fix: controls scroll issue (apache#10644)
  feat: Allow tests files in  /src (plus Label component tests) (apache#10634)
  fix: remove duplicated params and cache_timeout from list_columns; add viz_type to list_columns (apache#10643)
  chore: splitting button stories into separate stories (apache#10631)
  refactor: remove slice level label_colors from dashboard init load (apache#10603)
  feat: card view bulk select (apache#10607)
  style: Label styling/storybook touchups (apache#10627)
  fix: removing unsupported modal sizes (apache#10625)
  feat(datasource): remove deleted columns and update column type on metadata refresh (apache#10619)
  improve documentation for country maps (apache#10621)
  chore: npm audit fix as of 2020-08-15 (apache#10613)
  feat: dataset REST API for distinct values (apache#10595)
  chore: bump react-redux to 5.1.2, whittling console noise (apache#10602)
  fixing console error about bad html attribute (apache#10604)
  ...

# Conflicts:
#	superset-frontend/src/explore/components/ExploreViewContainer.jsx
#	superset-frontend/src/views/App.tsx
#	superset/config.py
Ofeknielsen pushed a commit to ofekisr/incubator-superset that referenced this pull request Oct 5, 2020
@rusackas
style: Label styling/storybook touchups (apache#10627)
65ed74d 
* colors corrected, hover/cursory only change if there's an onClick

* adding info label, breaking gallery out to its own story

* linting

* fixing bad class name

* now with fading!

* now supporting additional (non-bootstrap) label styles

* adding new secondary/primary labels to gallery

* fixing map key react warning

* using the new secondary label in the ChartList view

* linting

* fixing TS issue
auxten pushed a commit to auxten/incubator-superset that referenced this pull request Nov 20, 2020
@rusackas @auxten
style: Label styling/storybook touchups (apache#10627)
ed4df98 
* colors corrected, hover/cursory only change if there's an onClick

* adding info label, breaking gallery out to its own story

* linting

* fixing bad class name

* now with fading!

* now supporting additional (non-bootstrap) label styles

* adding new secondary/primary labels to gallery

* fixing map key react warning

* using the new secondary label in the ChartList view

* linting

* fixing TS issue
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 0.38.0 First shipped in 0.38.0 labels Mar 12, 2024
qfcwell pushed a commit to qfcwell/superset that referenced this pull request May 12, 2026
@rusackas
style: Label styling/storybook touchups (apache#10627)
cb5e510 
* colors corrected, hover/cursory only change if there's an onClick

* adding info label, breaking gallery out to its own story

* linting

* fixing bad class name

* now with fading!

* now supporting additional (non-bootstrap) label styles

* adding new secondary/primary labels to gallery

* fixing map key react warning

* using the new secondary label in the ChartList view

* linting

* fixing TS issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@nytai nytai nytai approved these changes

@mistercrunch mistercrunch Awaiting requested review from mistercrunch

Assignees

No one assigned

Labels

🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/L 🚢 0.38.0 First shipped in 0.38.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@rusackas @codecov-commenter @nytai @mistercrunch