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

fix: update segmented tab styling #29652

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
+18 −12
Open

fix: update segmented tab styling #29652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7c9c1e6
fix: :lipstick: update segmented tab styling
matteoscurati Jan 13, 2025
205c1e5
fix: :rotating_light: fix lint error
matteoscurati Jan 13, 2025
7a8dd9a
test: :white_check_mark: update two snapshots
matteoscurati Jan 13, 2025
65564b8
Merge branch 'main' into fix/update-segmented-tab-styling
matteoscurati Jan 15, 2025
3cc080a
Merge branch 'main' into fix/update-segmented-tab-styling
matteoscurati Jan 16, 2025
a64d59b
Merge branch 'main' into fix/update-segmented-tab-styling
matteoscurati Jan 20, 2025
58e969a
Merge branch 'main' into fix/update-segmented-tab-styling
matteoscurati Jan 24, 2025
1fb3e90
Merge branch 'main' into fix/update-segmented-tab-styling
matteoscurati Jan 24, 2025
5a22026
Merge branch 'main' into fix/update-segmented-tab-styling
matteoscurati Jan 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions ui/components/multichain/account-overview/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@
@include design-system.H6;

flex-grow: 1;
color: var(--color-icon-default);
font-weight: 500;
}

&__tab--active {
Expand Down
2 changes: 1 addition & 1 deletion ui/components/multichain/pages/send/__snapshots__/send.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ exports[`SendPage render and initialization should render correctly even when a
class="box tabs box--flex-direction-row"
>
<ul
class="box tabs__list box--display-flex box--gap-1 box--flex-direction-row box--justify-content-flex-start box--background-color-background-default"
class="box tabs__list box--display-flex box--flex-direction-row box--justify-content-flex-start box--background-color-background-default"
>
<li
class="box tab tab--active box--flex-direction-row"
Expand Down
1 change: 0 additions & 1 deletion ui/components/ui/tabs/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
-moz-transform: translateZ(0);

&__list {
border-bottom: 1px solid var(--color-border-default);
position: sticky;
top: 0;
z-index: 2;
Expand Down
10 changes: 10 additions & 0 deletions ui/components/ui/tabs/tab/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
.tab {
border-bottom: 2px solid var(--color-border-muted);
color: var(--color-text-muted);
font-weight: 500;

button {
min-width: 50px;
background-color: unset;
color: unset;
font-weight: 500;
}

&--single {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I’ve added this style to update the appearance in case a tab list has only one tab

color: var(--color-text-default);
border-bottom: none;
}

&--active {
Expand Down
3 changes: 3 additions & 0 deletions ui/components/ui/tabs/tab/tab.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const Tab = (props) => {
className,
'data-testid': dataTestId,
isActive,
isSingleTab,
name,
onClick,
tabIndex,
Expand All @@ -32,6 +33,7 @@ const Tab = (props) => {
<Box
as="li"
className={classnames('tab', className, {
'tab--single': isSingleTab,
'tab--active': isActive,
[activeClassName]: activeClassName && isActive,
})}
Expand Down Expand Up @@ -64,6 +66,7 @@ Tab.propTypes = {
className: PropTypes.string,
'data-testid': PropTypes.string,
isActive: PropTypes.bool, // required, but added using React.cloneElement
isSingleTab: PropTypes.bool, // required, but added using React.cloneElement
name: PropTypes.node.isRequired,
tabKey: PropTypes.string.isRequired, // for Tabs selection purpose
onClick: PropTypes.func,
Expand Down
4 changes: 3 additions & 1 deletion ui/components/ui/tabs/tabs.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,14 @@ const Tabs = ({

return React.Children.map(_getValidChildren(), (child, index) => {
const tabKey = child?.props.tabKey;
const isSingleTab = numberOfTabs === 1;
return (
child &&
React.cloneElement(child, {
onClick: (idx) => handleTabClick(idx, tabKey),
tabIndex: index,
isActive: numberOfTabs > 1 && index === activeTabIndex,
isSingleTab,
})
);
});
Expand Down Expand Up @@ -81,7 +83,7 @@ const Tabs = ({
justifyContent={JustifyContent.flexStart}
backgroundColor={BackgroundColor.backgroundDefault}
className={classnames('tabs__list', tabsClassName)}
gap={1}
gap={0}
>
{renderTabs()}
</Box>
Expand Down
2 changes: 1 addition & 1 deletion ...onfirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
class="box tabs box--flex-direction-row"
>
<ul
class="box tabs__list box--display-flex box--gap-1 box--flex-direction-row box--justify-content-flex-start box--background-color-background-default"
class="box tabs__list box--display-flex box--flex-direction-row box--justify-content-flex-start box--background-color-background-default"
>
<li
class="box tab confirm-page-container-content__tab tab--active box--flex-direction-row"
Expand Down
6 changes: 0 additions & 6 deletions ui/pages/notifications/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,6 @@
@include design-system.H6;

flex-grow: 1;
color: var(--color-icon-default);
font-weight: 500;
}

&__tab--active {
color: var(--color-primary-default);
}

&__tab button {
Expand Down
Loading