feat: redesign labels #31575

mistercrunch · 2024-12-20T01:03:00Z

Realign labels to look and feel closer to native AntD while integrating the theme colors.

As part of this PR:

modify to look and feel like native AntD
adjust theme colors for primary/secondary/grayscale to align brightness-wise, mostly so that .light2 lines up across the board
Created a reusable label for DatasetTypeLabel and use it it CRUD list view
Creating a PublishedLabel to use for dashboard in header + CRUD
Improvements to storybooks: theme color to line up side by side
Improvement to Label storybook, more interactive

label storybook

dashboard header

crud view datasets

crud view dashboards

explore

Realign labels to look and feel closer to native AntD while integrating the theme colors. As part of this PR: - modify <Label> to look and feel like native AntD - adjust theme colors for primary/secondary/grayscale to align brightness-wise, mostly so that `.light2` lines up across the board - Created a reusable label for DatasetTypeLabel and use it it CRUD list view - Creating a PublishedLabel to use for dashboard in header + CRUD - Improvements to storybooks: theme color to line up side by side - Improvement to Label storybook, more interactive

korbit-ai · 2024-12-20T01:03:04Z

Based on your review schedule, I'll hold off on reviewing this PR until it's marked as ready for review. If you'd like me to take a look now, comment /korbit-review.

Your admin can change your review schedule in the Korbit Console

mistercrunch · 2024-12-20T17:18:45Z

/testenv up

github-actions · 2024-12-20T17:18:56Z

@mistercrunch Processing your ephemeral environment request here.

github-actions · 2024-12-20T17:27:22Z

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

sadpandajoe · 2024-12-20T17:48:35Z

@kasiazjc you might be interested in this

korbit-ai

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Fix Detected
	Non-functional hover state ▹ view
	Invalid Color Format in Text Label Styling ▹ view
	Brittle icon fix using CSS hack ▹ view

Files scanned

File Path	Reviewed
superset-frontend/src/components/Timer/index.tsx	✅
superset-frontend/src/components/CachedLabel/index.tsx	✅
superset-frontend/src/components/Icons/Icon.tsx	✅
superset-frontend/src/components/Label/reusable/PublishedLabel.tsx	✅
superset-frontend/src/components/Label/reusable/DatasetTypeLabel.tsx	✅
superset-frontend/packages/superset-ui-core/src/style/index.tsx	✅
superset-frontend/src/dashboard/components/PublishedStatus/index.tsx	✅
superset-frontend/src/components/Label/Label.stories.tsx	✅
superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-style/Theme.stories.tsx	✅
superset-frontend/src/components/Label/index.tsx	✅
superset-frontend/src/components/AlteredSliceTag/index.tsx	✅
superset-frontend/src/pages/DashboardList/index.tsx	✅
superset-frontend/src/pages/DatasetList/index.tsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Need a new review? Comment /korbit-review on this PR and I'll review your latest changes.

Korbit Guide: Usage and Customization

Interacting with Korbit

You can manually ask Korbit to review your PR using the /korbit-review command in a comment at the root of your PR.

You can ask Korbit to generate a new PR description using the /korbit-generate-pr-description command in any comment on your PR.

Too many Korbit comments? I can resolve all my comment threads if you use the /korbit-resolve command in any comment on your PR.

Chat with Korbit on issues we post by tagging @korbit-ai in your reply.

Help train Korbit to improve your reviews by giving a 👍 or 👎 on the comments Korbit posts.

Customizing Korbit

Check out our docs on how you can make Korbit work best for you and your team.

Customize Korbit for your organization through the Korbit Console.

Current Korbit Configuration

General Settings

Setting Value

Review Schedule Automatic excluding drafts

Max Issue Count 10

Automatic PR Descriptions ❌

Issue Categories

Category Enabled

Naming ✅

Database Operations ✅

Documentation ✅

Logging ✅

Error Handling ✅

Systems and Environment ✅

Objects and Data Structures ✅

Readability and Maintainability ✅

Asynchronous Processing ✅

Design Patterns ✅

Third-Party Libraries ✅

Performance ✅

Security ✅

Functionality ✅

Feedback and Support

Tell us what you think of Korbit

Schedule a call with our team

Email us @ [email protected]

Note

Korbit Pro is free for open source projects 🎉

Looking to add Korbit to your team? Get started with a free 2 week trial here

korbit-ai · 2024-12-21T02:14:03Z

superset-frontend/src/components/CachedLabel/index.tsx

+  const [hovered] = useState(false);

  const labelType = hovered ? 'primary' : 'default';


Non-functional hover state

Tell me more

What is the issue?

The hovered state is maintained but the mouse events (onMouseOver and onMouseOut) that would update it have been removed, making the hover effect non-functional.

Why this matters

The label will always remain in the 'default' state since the hovered state can never change to true, breaking the intended hover interaction functionality.

Suggested change

Either remove the unused hover state logic completely:
const labelType = 'default';

Or restore the mouse event handlers:
const [hovered, setHovered] = useState(false);
// ... in Label component:
onMouseOver={() => setHovered(true)}
onMouseOut={() => setHovered(false)}

Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.

korbit-ai · 2024-12-21T02:14:05Z

...set-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-style/Theme.stories.tsx

+      <h3>
+        text.label: <code>{colors.text.label}</code>
+      </h3>
+      <div style={{ color: `#${colors.text.label}` }}>


Invalid Color Format in Text Label Styling

Tell me more

What is the issue?

The code incorrectly prepends '#' to the color value from colors.text.label, which likely already includes the '#' prefix, resulting in an invalid color format.

Why this matters

This will cause the text to be rendered with an invalid color value, making it invisible or using the browser's default color instead of the intended theme color.

Suggested change

Remove the '#' prefix: style={{ color: colors.text.label }}

Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.

korbit-ai · 2024-12-21T02:14:05Z

superset-frontend/src/components/Icons/Icon.tsx

@@ -36,6 +36,10 @@ const AntdIconComponent = ({

 export const StyledIcon = styled(AntdIconComponent)<IconType>`
  ${({ iconColor }) => iconColor && `color: ${iconColor};`};
+  span {
+    // Hack to fix issues with some icons
+    line-height: 0px !important;


Brittle icon fix using CSS hack

Tell me more

What is the issue?

Using !important and a hack to fix icon issues could lead to unintended side effects with different icon sets or future updates.

Why this matters

This brittle solution might break when new icons are added or when the underlying icon library is updated, potentially causing visual inconsistencies.

Suggested change

Investigate the root cause of the icon alignment issues and implement a more robust solution, possibly by properly configuring the icon component's baseline alignment or using proper spacing properties.

Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.

mohdslmn · 2024-12-28T15:35:33Z

@mistercrunch please let me know, if you can assign this issue to me?

mistercrunch · 2024-12-28T16:51:11Z

@mohdslmn this PR is ready for review/merge, not sure what you mean about assigning it to you (?)

pull-request-size bot added the size/L label Dec 20, 2024

github-actions bot added packages preset-io labels Dec 20, 2024

mistercrunch added 5 commits December 19, 2024 17:49

linting

59de8b3

wrap in div to enable tooltip

6f7bef7

licens

53c20ed

gpt

7e1151f

typescript

273d97c

sadpandajoe added the review:draft label Dec 20, 2024

mistercrunch marked this pull request as ready for review December 21, 2024 02:09

dosubot bot added the change:frontend Requires changing the frontend label Dec 21, 2024

korbit-ai bot reviewed Dec 21, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: redesign labels #31575

feat: redesign labels #31575

mistercrunch commented Dec 20, 2024 •

edited

Loading

korbit-ai bot commented Dec 20, 2024

mistercrunch commented Dec 20, 2024

github-actions bot commented Dec 20, 2024

github-actions bot commented Dec 20, 2024

sadpandajoe commented Dec 20, 2024

korbit-ai bot left a comment •

edited

Loading

korbit-ai bot Dec 21, 2024

korbit-ai bot Dec 21, 2024

korbit-ai bot Dec 21, 2024

mohdslmn commented Dec 28, 2024

mistercrunch commented Dec 28, 2024

Setting	Value
Review Schedule	Automatic excluding drafts
Max Issue Count	10
Automatic PR Descriptions	❌

Category	Enabled
Naming	✅
Database Operations	✅
Documentation	✅
Logging	✅
Error Handling	✅
Systems and Environment	✅
Objects and Data Structures	✅
Readability and Maintainability	✅
Asynchronous Processing	✅
Design Patterns	✅
Third-Party Libraries	✅
Performance	✅
Security	✅
Functionality	✅

		const [hovered] = useState(false);

		const labelType = hovered ? 'primary' : 'default';

feat: redesign labels #31575

Are you sure you want to change the base?

feat: redesign labels #31575

Conversation

mistercrunch commented Dec 20, 2024 • edited Loading

label storybook

dashboard header

crud view datasets

crud view dashboards

explore

korbit-ai bot commented Dec 20, 2024

mistercrunch commented Dec 20, 2024

github-actions bot commented Dec 20, 2024

github-actions bot commented Dec 20, 2024

sadpandajoe commented Dec 20, 2024

korbit-ai bot left a comment • edited Loading

Choose a reason for hiding this comment

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Interacting with Korbit

Customizing Korbit

Current Korbit Configuration

Feedback and Support

Looking to add Korbit to your team? Get started with a free 2 week trial here

korbit-ai bot Dec 21, 2024

Choose a reason for hiding this comment

Non-functional hover state

What is the issue?

Why this matters

Suggested change

Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.

korbit-ai bot Dec 21, 2024

Choose a reason for hiding this comment

Invalid Color Format in Text Label Styling

What is the issue?

Why this matters

Suggested change

Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.

korbit-ai bot Dec 21, 2024

Choose a reason for hiding this comment

Brittle icon fix using CSS hack

What is the issue?

Why this matters

Suggested change

Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.

mohdslmn commented Dec 28, 2024

mistercrunch commented Dec 28, 2024

mistercrunch commented Dec 20, 2024 •

edited

Loading

korbit-ai bot left a comment •

edited

Loading