refactor(ui/v2): Update icons and search bars on schema tab, glossary search, domain search #12740

asikowitz · 2025-02-26T23:24:00Z

Also:

Refactors debounce logic
Changes Button and Input components to take all IconProps, so they can use phosphor icons
Replaces all SearchOutlined icons with Icon component: phosphor MagnifyingGlass

Checklist

The PR conforms to DataHub's Contributing Guideline (particularly Commit Message Format)
Links to related issues (if applicable)
Tests for the changes have been added/updated (if applicable)
Docs related to the changes have been added/updated (if applicable). If a new feature has been added a Usage Guide has been added for the same.
For any breaking change/potential downtime/deprecation/big changes an entry has been made in Updating DataHub

… search, domain search

asikowitz · 2025-02-26T23:24:15Z

datahub-web-react/src/alchemy-components/components/Button/Button.stories.tsx

@@ -43,7 +46,7 @@ const meta = {
        },
        color: {
            description: 'The color of the Button.',
-            options: ['violet', 'green', 'red', 'blue', 'gray'],
+            options: ['violet', 'green', 'red', 'gray'],


Request from Anna (no blue buttons)

asikowitz · 2025-02-26T23:24:53Z

datahub-web-react/src/alchemy-components/components/Button/Button.stories.tsx

            table: {
                defaultValue: { summary: buttonDefaults.size },
            },
            control: {
                type: 'select',
            },
        },
-        iconSize: {


Attached to icon now. Unfortunately, storybook doesn't have great support for nested fields: storybookjs/storybook#12078

asikowitz · 2025-02-26T23:25:23Z

datahub-web-react/src/alchemy-components/components/Button/Button.stories.tsx

        icon: {
            description: 'The icon to display in the Button.',
            type: 'string',
            options: AVAILABLE_ICONS,
+            mapping: Object.fromEntries([


Maps options to props for Button component

asikowitz · 2025-02-26T23:25:39Z

datahub-web-react/src/alchemy-components/components/Button/Button.stories.tsx

@@ -167,7 +161,7 @@ type Story = StoryObj<typeof meta>;
 // Pass props to this so that it can be customized via the UI props panel
 export const sandbox: Story = {
    tags: ['dev'],
-    render: (props) => <Button {...props}>Button</Button>,
+    render: (props) => <Button {...props} />,


Properly set children

asikowitz · 2025-02-26T23:27:44Z

datahub-web-react/src/alchemy-components/components/Button/utils.ts

@@ -81,7 +81,7 @@ const getButtonColorStyles = (variant: ButtonVariant, color: ColorOptions): Colo

            bgColor: colors.transparent,
            borderColor: colors.transparent,
-            hoverBgColor: colors.transparent,
+            hoverBgColor: colors.gray[1500],


Request from Anna: adds light gray on hover of "text" buttons

asikowitz · 2025-02-26T23:28:06Z

datahub-web-react/src/alchemy-components/components/Button/utils.ts

+            vertical: 6,
+            horizontal: 6,


Not actually used but this seems more appropriate

asikowitz · 2025-02-26T23:28:14Z

datahub-web-react/src/alchemy-components/components/Button/utils.ts

    if (isCircle) return { padding: spacing.xsm };
+    if (!hasChildren) return { padding: spacing.xsm };


Custom padding for buttons that are just icons

asikowitz · 2025-02-26T23:28:33Z

datahub-web-react/src/alchemy-components/components/Button/utils.ts

@@ -208,7 +190,7 @@ const getButtonPadding = (size: SizeOptions, variant: ButtonVariant, isCircle: b

    const selectedStyle = paddingStyles[size];
    const verticalPadding = selectedStyle.vertical;
-    const horizontalPadding = variant === 'text' ? 0 : selectedStyle.horizontal;


Adding padding back to text buttons after talking to Anna

asikowitz · 2025-02-26T23:29:14Z

datahub-web-react/src/alchemy-components/components/SearchBar/SearchBar.tsx

 import React from 'react';
 import { StyledSearchBar } from './components';
 import { SearchBarProps } from './types';

 export const searchBarDefaults: SearchBarProps = {
    placeholder: 'Search...',
    value: '',
-    width: '272px',
+    width: '100%',


Default to 100% instead, I do make the corresponding change in StructuredProperties.tsx

anywhere else this was used that was banking on that?

Just that and SchemaSearchInput which now passes in width=300px

Ignore me, I just added that too. Only place it was used is StructuredProperties

codecov · 2025-02-27T00:07:12Z

Codecov Report

Attention: Patch coverage is 59.06736% with 79 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...react/src/app/lineageV2/controls/SearchControl.tsx	0.00%	18 Missing ⚠️
...atahub-web-react/src/app/domainV2/DomainSearch.tsx	42.10%	11 Missing ⚠️
...ub-web-react/src/app/glossaryV2/GlossarySearch.tsx	37.50%	10 Missing ⚠️
...vern/structuredProperties/StructuredProperties.tsx	0.00%	7 Missing ⚠️
...omponents/components/Select/AutoCompleteSelect.tsx	0.00%	6 Missing ⚠️
...chemy-components/components/Select/BasicSelect.tsx	0.00%	5 Missing ⚠️
...hemy-components/components/Select/SimpleSelect.tsx	0.00%	5 Missing ⚠️
...rc/alchemy-components/components/Drawer/Drawer.tsx	0.00%	2 Missing ⚠️
...act/src/app/glossaryV2/GlossaryContentProvider.tsx	0.00%	2 Missing ⚠️
.../src/alchemy-components/components/Input/Input.tsx	0.00%	1 Missing ⚠️
... and 12 more

📢 Thoughts on this report? Let us know!

chriscollins3456

looks good to me!

chriscollins3456 · 2025-03-04T22:30:33Z

datahub-web-react/src/alchemy-components/components/SearchBar/SearchBar.tsx

 import React from 'react';
 import { StyledSearchBar } from './components';
 import { SearchBarProps } from './types';

 export const searchBarDefaults: SearchBarProps = {
    placeholder: 'Search...',
    value: '',
-    width: '272px',
+    width: '100%',


anywhere else this was used that was banking on that?

refactor(ui/v2): Update icons and search bars on schema tab, glossary…

38c1105

… search, domain search

asikowitz requested a review from chriscollins3456 February 26, 2025 23:24

asikowitz assigned chriscollins3456 Feb 26, 2025

github-actions bot added the product PR or Issue related to the DataHub UI/UX label Feb 26, 2025

asikowitz commented Feb 26, 2025

View reviewed changes

datahub-cyborg bot added the needs-review Label for PRs that need review from a maintainer. label Feb 26, 2025

cleaning up

5dd6717

vercel bot deployed to Preview February 26, 2025 23:55 View deployment

chriscollins3456 approved these changes Mar 4, 2025

View reviewed changes

Merge branch 'master' into ui-update-icons

ace02f6

asikowitz added merge-pending-ci A PR that has passed review and should be merged once CI is green. and removed needs-review Label for PRs that need review from a maintainer. labels Mar 4, 2025

vercel bot deployed to Preview March 4, 2025 22:53 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(ui/v2): Update icons and search bars on schema tab, glossary search, domain search #12740

refactor(ui/v2): Update icons and search bars on schema tab, glossary search, domain search #12740

asikowitz commented Feb 26, 2025 •

edited

Loading

asikowitz Feb 26, 2025

asikowitz Feb 26, 2025

asikowitz Feb 26, 2025

asikowitz Feb 26, 2025

asikowitz Feb 26, 2025

asikowitz Feb 26, 2025

asikowitz Feb 26, 2025

asikowitz Feb 26, 2025

asikowitz Feb 26, 2025

chriscollins3456 Mar 4, 2025

asikowitz Mar 4, 2025

asikowitz Mar 4, 2025

codecov bot commented Feb 27, 2025 •

edited

Loading

chriscollins3456 left a comment

chriscollins3456 Mar 4, 2025

		if (isCircle) return { padding: spacing.xsm };
		if (!hasChildren) return { padding: spacing.xsm };

refactor(ui/v2): Update icons and search bars on schema tab, glossary search, domain search #12740

Are you sure you want to change the base?

refactor(ui/v2): Update icons and search bars on schema tab, glossary search, domain search #12740

Conversation

asikowitz commented Feb 26, 2025 • edited Loading

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Feb 27, 2025 • edited Loading

Codecov Report

chriscollins3456 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

asikowitz commented Feb 26, 2025 •

edited

Loading

codecov bot commented Feb 27, 2025 •

edited

Loading