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.

Sign up for GitHub

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

Jump to bottom

fix(home): Show home page tabs as pills instead of links #20257

Merged
merged 7 commits into from
Jun 21, 2022
Merged

fix(home): Show home page tabs as pills instead of links #20257

merged 7 commits into from
Jun 21, 2022

Conversation

prosdev0107
Copy link
Contributor

SUMMARY

[home] pills show as links

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

BEFORE:
image

AFTER:
Screen Shot 2022-06-03 at 9 11 49 AM

TESTING INSTRUCTIONS

How to reproduce this issue

  1. Go to Welcome page
  2. Click or Hover the each tab
  3. Should not display as link style when tab is selected

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

@codecov
Copy link

codecov bot commented Jun 3, 2022 •
edited
Loading

Codecov Report

Merging #20257 (d1f4922) into master (b7eb235) will increase coverage by 0.13%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master   #20257      +/-   ##
==========================================
+ Coverage   66.58%   66.71%   +0.13%     
==========================================
  Files        1738     1738              
  Lines       65162    65123      -39     
  Branches     6895     6895              
==========================================
+ Hits        43387    43446      +59     
+ Misses      20026    19928      -98     
  Partials     1749     1749
Flag Coverage Δ
javascript 51.77% <100.00%> (+<0.01%) ⬆️

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

Impacted Files Coverage Δ
superset-frontend/src/components/Menu/index.tsx 100.00% <100.00%> (ø)
superset-frontend/src/views/components/SubMenu.tsx 86.88% <100.00%> (+0.67%) ⬆️
superset/db_engine_specs/presto.py 88.70% <0.00%> (-0.33%) ⬇️
superset/connectors/sqla/views.py 91.05% <0.00%> (-0.22%) ⬇️
superset/datasets/api.py 88.52% <0.00%> (ø)
superset/security/manager.py 95.33% <0.00%> (ø)
superset/explore/permalink/types.py 100.00% <0.00%> (ø)
superset/explore/permalink/commands/get.py 89.18% <0.00%> (ø)
superset/db_engine_specs/base.py 88.42% <0.00%> (+0.16%) ⬆️
superset/connectors/sqla/models.py 90.23% <0.00%> (+0.24%) ⬆️
... and 22 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 b7eb235...d1f4922. Read the comment docs.

@rusackas rusackas changed the title fix(home): make to update the css style of tabs fix(home): Show home page tabs as pills instead of links Jun 3, 2022
stephenLYZ
stephenLYZ approved these changes Jun 6, 2022
View reviewed changes
Copy link
Member

@stephenLYZ stephenLYZ left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Thanks for the work! Code looks good to me. And there is one thing I'm thinking about whether we need the underline in the active state, the background color is already able to satisfy the display effect. cc @rusackas @kasiazjc

@yousoph
Copy link
Member

yousoph commented Jun 8, 2022

I think @stephenLYZ is right, the original mocks don't have an underline for the selected state. But not sure if there is supposed to be an underline on the hover state? I'll let @kasiazjc speak to that

If we get rid of the underline, we'll need to do it for the other pages as well (Databases/Datasets/Saved Queries/Query History, Alerts & Reports)

@rusackas
Copy link
Member

Just waiting for CI, then I'll spin up a test env to make (reasonably) sure the CSS change doesn't have any unanticipated fallout elsewhere.

@rusackas
Copy link
Member

/testenv up

@github-actions
Copy link
Contributor

@rusackas Ephemeral environment spinning up at http://34.218.234.108:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

@yousoph
Copy link
Member

yousoph commented Jun 14, 2022

screencast.2022-06-13.17-57-39.mp4
  • on the home page, the selected state has square corners, I think
  • on the Data tab, the hover state is much taller than the selected state (there's also a weird animation)
  • on the Data tab, the selected state has square corners as well
  • I suspect the same will be the case on the Alerts & Reports pages

@prosdev0107
Copy link
Contributor Author

@yousoph
I resolved your feedback and pushed and please kindly test it.

@yousoph
Copy link
Member

yousoph commented Jun 15, 2022

/testenv up

@github-actions
Copy link
Contributor

@yousoph Ephemeral environment spinning up at http://54.201.138.172:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

@yousoph
Copy link
Member

yousoph commented Jun 15, 2022

image
@prosdev0107 I think on the homepage, the hover state ("Favorite" pill on the left) is slightly smaller than the selected pill ("Mine" pill on the right)

the other points look better to me

@prosdev0107
Copy link
Contributor Author

image @prosdev0107 I think on the homepage, the hover state ("Favorite" pill on the left) is slightly smaller than the selected pill ("Mine" pill on the right)

the other points look better to me

@yousoph
It is fixed now.

@rusackas
Copy link
Member

/testenv up

@github-actions
Copy link
Contributor

@rusackas Ephemeral environment spinning up at http://34.220.18.136:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

rusackas
rusackas approved these changes Jun 21, 2022
View reviewed changes
Copy link
Member

@rusackas rusackas left a comment

Choose a reason for hiding this comment

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

LGTM!

@rusackas rusackas merged commit a833674 into apache:master Jun 21, 2022
@github-actions
Copy link
Contributor

Ephemeral environment shutdown and build artifacts deleted.

michael-s-molina pushed a commit that referenced this pull request Jun 23, 2022
@prosdev0107 @michael-s-molina
fix(home): Show home page tabs as pills instead of links (#20257)
a264bef 
* fix(home): make to update the css style of links

* fix(home): make to fix lint issue

* fix(home): make to remove underline when tab is active

* fix(homes): make to fix the issue of tab

* fix(home): make to move styles to a tag

(cherry picked from commit a833674)
michael-s-molina pushed a commit that referenced this pull request Jun 28, 2022
@prosdev0107 @michael-s-molina
fix(home): Show home page tabs as pills instead of links (#20257)
3d85042 
* fix(home): make to update the css style of links

* fix(home): make to fix lint issue

* fix(home): make to remove underline when tab is active

* fix(homes): make to fix the issue of tab

* fix(home): make to move styles to a tag

(cherry picked from commit a833674)
@mistercrunch mistercrunch added 🍒 2.0.0 🍒 2.0.1 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.1.0 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@stephenLYZ stephenLYZ stephenLYZ approved these changes

@rusackas rusackas rusackas approved these changes

Assignees
No one assigned
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels Preset-Patch size/S v2.0 🍒 2.0.0 🍒 2.0.1 🚢 2.1.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@prosdev0107 @yousoph @rusackas @stephenLYZ @mistercrunch @michael-s-molina