Skip to content

Commit

Permalink
chore(tabs, in-page-nav): fix visual bugs (#3634)
Browse files Browse the repository at this point in the history 
* chore(in-page-nav): inverse border color fix

* feat(design-tokens): new and updated tokens for tabs

* feat(box): disabled focus after selector

* chore(tabs): visual bug fixes

* chore: type docs and snapshot

* chore: fix changeset

* chore: rename end to right
  • Loading branch information
@nkrantz
nkrantz committed Nov 29, 2023
1 parent 9b8b4c4 commit ecbba04
Show file tree
Hide file tree
Showing 15 changed files with 100 additions and 22 deletions.
6 changes: 6 additions & 0 deletions .changeset/cyan-sheep-mix.md
View file
@@ -0,0 +1,6 @@
---
"@twilio-paste/design-tokens": minor
"@twilio-paste/core": minor
---

[Design tokens] add new box shadow token "shadow-border-right-inverse-strong" for vertical Tabs, update values of "shadow-border-top-primary-strongest" tokens in dark themes.
6 changes: 6 additions & 0 deletions .changeset/flat-cherries-mate.md
View file
@@ -0,0 +1,6 @@
---
"@twilio-paste/tabs": patch
"@twilio-paste/core": patch
---

[Tabs] Minor styling bug fixes on horizontal and vertical tabs.
6 changes: 6 additions & 0 deletions .changeset/silver-tigers-hang.md
View file
@@ -0,0 +1,6 @@
---
"@twilio-paste/in-page-navigation": patch
"@twilio-paste/core": patch
---

[In Page Navigation] change border bottom color of In Page Nav Items to "colorBorderInverseWeaker" when using inverse variants for improved styling.
6 changes: 6 additions & 0 deletions .changeset/smooth-plants-march.md
View file
@@ -0,0 +1,6 @@
---
"@twilio-paste/box": minor
"@twilio-paste/core": minor
---

[Box] Add new pseydo prop style `_disabled_focus_after` for controlling styling of disabled tabs.
3 changes: 2 additions & 1 deletion packages/paste-core/components/in-page-navigation/src/InPageNavigation.tsx
View file
Expand Up @@ -67,6 +67,7 @@ const InPageNavigation = React.forwardRef<HTMLDivElement, InPageNavigationProps>
ref,
) => {
const isFullWidth = variant === "fullWidth" || variant === "inverse_fullWidth";
const isInverse = variant === "inverse" || variant === "inverse_fullWidth";

if (orientation === "vertical") {
return (
Expand Down Expand Up @@ -105,7 +106,7 @@ const InPageNavigation = React.forwardRef<HTMLDivElement, InPageNavigationProps>
marginBottom={marginBottom || "space60"}
borderBottomWidth={hideBottomBorder ? "borderWidth0" : "borderWidth10"}
borderBottomStyle={hideBottomBorder ? "none" : "solid"}
borderBottomColor="colorBorderWeaker"
borderBottomColor={isInverse ? "colorBorderInverseWeaker" : "colorBorderWeaker"}
>
{children}
</Box>
Expand Down
23 changes: 22 additions & 1 deletion packages/paste-core/components/tabs/src/Tab.tsx
View file
Expand Up @@ -29,7 +29,7 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
return {
color: isInverse ? "colorTextInverseWeak" : "colorTextWeak",
display: "block",
marginBottom: "space40",
marginBottom: "space30",
paddingBottom: "space30",
paddingLeft: "space50",
paddingRight: "space50",
Expand All @@ -42,10 +42,15 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
},
_hover: {
color: isInverse ? "colorTextInverse" : "colorTextLinkStronger",
boxShadow: isInverse ? "shadowBorderRightInverseStrong" : "none",
},
_disabled: {
borderLeftColor: "transparent",
color: isInverse ? "colorTextInverseWeakest" : "colorTextWeaker",
boxShadow: "none",
},
_disabled_focus: {
boxShadow: "none",
},
_focus: {
boxShadow: isInverse ? "shadowFocusInverseInset" : "shadowFocusInset",
Expand All @@ -64,6 +69,9 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
right: -1,
top: "10%",
},
_selected_hover: {
boxShadow: "none",
},
_selected_hover_after: {
content: '" "',
position: "absolute",
Expand All @@ -73,13 +81,25 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
borderTopLeftRadius: "borderRadius30",
borderBottomLeftRadius: "borderRadius30",
right: -1,
top: "10%",
},
_focus_selected_after: {
display: "none",
},
_focus_selected_hover_after: {
display: "none",
},
_disabled_focus_after: {
content: '" "',
position: "absolute",
height: "80%",
width: "4px",
backgroundColor: isInverse ? "colorBackgroundInverseStronger" : "colorBackgroundStrong",
borderTopLeftRadius: "borderRadius30",
borderBottomLeftRadius: "borderRadius30",
right: -1,
top: "10%",
},
};
case "horizontal":
default:
Expand Down Expand Up @@ -114,6 +134,7 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
/* Hover states */
_hover: {
color: isInverse ? "colorTextInverse" : "colorTextPrimaryStrongest",
borderBottomColor: isInverse ? "colorBorderInverseStrong" : "transparent",
},
_selected_hover: {
color: isInverse ? "colorTextInverse" : "colorTextPrimaryStronger",
Expand Down
32 changes: 18 additions & 14 deletions packages/paste-core/components/tabs/src/TabList.tsx
View file
Expand Up @@ -57,22 +57,26 @@ const HorizontalTabList: React.FC<React.PropsWithChildren<{ variant?: Variants;

HorizontalTabList.displayName = "HorizontalTabList";

const VerticalTabList: React.FC<React.PropsWithChildren<{ element?: BoxProps["element"] }>> = ({
const VerticalTabList: React.FC<React.PropsWithChildren<{ variant?: Variants; element?: BoxProps["element"] }>> = ({
children,
element,
}) => (
<Box
element={element}
marginRight="space110"
minWidth="size20"
maxWidth="size40"
borderRightStyle="solid"
borderRightWidth="borderWidth10"
borderRightColor="colorBorderWeak"
>
{children}
</Box>
);
variant,
}) => {
const isInverse = variant === "inverse" || variant === "inverse_fitted";
return (
<Box
element={element}
marginRight="space110"
minWidth="size20"
maxWidth="size40"
borderRightStyle="solid"
borderRightWidth="borderWidth10"
borderRightColor={isInverse ? "colorBorderInverseWeaker" : "colorBorderWeak"}
>
{children}
</Box>
);
};

VerticalTabList.displayName = "VerticalTabList";

Expand Down
1 change: 1 addition & 0 deletions packages/paste-core/primitives/box/src/PseudoPropStyles.ts
View file
Expand Up @@ -41,6 +41,7 @@ export const PseudoPropStyles = {
_focus_selected_after: "&[aria-selected=true]:focus:after",
_selected_hover_after: "&[aria-selected=true]:hover:after",
_focus_selected_hover_after: "&[aria-selected=true]:focus:hover:after",
_disabled_focus_after: "&:disabled:focus:after, &[aria-disabled=true]:focus:after",
_focusWithin: "&:focus-within",
_focusVisible: "&:focus-visible",
_placeholder: "&::placeholder",
Expand Down
8 changes: 7 additions & 1 deletion packages/paste-core/primitives/box/type-docs.json
View file
Expand Up @@ -72,6 +72,12 @@
"required": false,
"externalProp": false
},
"_disabled_focus_after": {
"type": "BoxBaseStyleProps",
"defaultValue": null,
"required": false,
"externalProp": false
},
"_even": {
"type": "BoxBaseStyleProps",
"defaultValue": null,
Expand Down Expand Up @@ -952,7 +958,7 @@
"description": "Responsive prop for the CSS `bottom` property"
},
"boxShadow": {
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomDecorative10Weaker\" | \"shadowBorderBottomDecorative20Weaker\" | \"shadowBorderBottomDecorative30Weaker\" | \"shadowBorderBottomDecorative40Weaker\" | ... 58 more ... | { ...; }",
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomDecorative10Weaker\" | \"shadowBorderBottomDecorative20Weaker\" | \"shadowBorderBottomDecorative30Weaker\" | \"shadowBorderBottomDecorative40Weaker\" | ... 59 more ... | { ...; }",
"defaultValue": null,
"required": false,
"externalProp": false,
Expand Down
8 changes: 7 additions & 1 deletion packages/paste-core/primitives/sibling-box/type-docs.json
View file
Expand Up @@ -138,6 +138,12 @@
"required": false,
"externalProp": false
},
"_disabled_focus_after": {
"type": "BoxBaseStyleProps",
"defaultValue": null,
"required": false,
"externalProp": false
},
"_disabledSibling": {
"type": "BoxStyleProps",
"defaultValue": null,
Expand Down Expand Up @@ -1054,7 +1060,7 @@
"description": "Responsive prop for the CSS `bottom` property"
},
"boxShadow": {
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomDecorative10Weaker\" | \"shadowBorderBottomDecorative20Weaker\" | \"shadowBorderBottomDecorative30Weaker\" | \"shadowBorderBottomDecorative40Weaker\" | ... 58 more ... | { ...; }",
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomDecorative10Weaker\" | \"shadowBorderBottomDecorative20Weaker\" | \"shadowBorderBottomDecorative30Weaker\" | \"shadowBorderBottomDecorative40Weaker\" | ... 59 more ... | { ...; }",
"defaultValue": null,
"required": false,
"externalProp": false,
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/primitives/text/type-docs.json
View file
Expand Up @@ -531,7 +531,7 @@
"description": "Responsive prop for the CSS `bottom` property"
},
"boxShadow": {
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomDecorative10Weaker\" | \"shadowBorderBottomDecorative20Weaker\" | \"shadowBorderBottomDecorative30Weaker\" | \"shadowBorderBottomDecorative40Weaker\" | ... 58 more ... | { ...; }",
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomDecorative10Weaker\" | \"shadowBorderBottomDecorative20Weaker\" | \"shadowBorderBottomDecorative30Weaker\" | \"shadowBorderBottomDecorative40Weaker\" | ... 59 more ... | { ...; }",
"defaultValue": null,
"required": false,
"externalProp": false,
Expand Down
9 changes: 7 additions & 2 deletions packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
View file
Expand Up @@ -159,10 +159,11 @@ exports[`Design Tokens matches the Dark theme 1`] = `
\\"shadow-focus-shadow-border\\": \\"0 0 0 4px #606b85, 0 0 0 1px #606b85\\",
\\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #5817bd\\",
\\"shadow-border-destructive-weak\\": \\"0 0 0 1px #394762\\",
\\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #030b5d\\",
\\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #ebf4ff\\",
\\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #750c0c\\",
\\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\",
\\"shadow-border\\": \\"0 0 0 1px #606b85\\",
\\"shadow-border-right-inverse-strong\\": \\"1px 0px #e1e3ea\\",
\\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #001489\\",
\\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #1f304c\\",
\\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\",
Expand Down Expand Up @@ -576,6 +577,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
\\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
\\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
\\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
\\"shadow-border-right-inverse-strong\\": \\"1px 0px #e1e3ea\\",
\\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
\\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\",
\\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
Expand Down Expand Up @@ -989,6 +991,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
\\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
\\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
\\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
\\"shadow-border-right-inverse-strong\\": \\"1px 0px #e1e3ea\\",
\\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
\\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\",
\\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
Expand Down Expand Up @@ -1398,10 +1401,11 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
\\"shadow-focus-shadow-border\\": \\"0 0 0 1px #394762, 0 0 0 3px #121c2d, 0 0 0 4px #ffffff, 0 0 0 6px rgba(255, 255, 255, 0.2)\\",
\\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #5817bd\\",
\\"shadow-border-destructive-weak\\": \\"0 0 0 1px #394762\\",
\\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #030b5d\\",
\\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #ebf4ff\\",
\\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #ad1111\\",
\\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\",
\\"shadow-border\\": \\"0 0 0 1px #606b85\\",
\\"shadow-border-right-inverse-strong\\": \\"1px 0px #e1e3ea\\",
\\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #043cb5\\",
\\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #1f304c\\",
\\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\",
Expand Down Expand Up @@ -1815,6 +1819,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
\\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #f58a8a\\",
\\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
\\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
\\"shadow-border-right-inverse-strong\\": \\"1px 0px #e1e3ea\\",
\\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #66b3ff\\",
\\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\",
\\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
Expand Down
6 changes: 5 additions & 1 deletion packages/paste-design-tokens/tokens/global/box-shadow.yml
View file
Expand Up @@ -158,6 +158,11 @@ props:
value: "0px -1px {!offset-0} {!palette-blue-90}"
comment: Top shadow border for selected hover status of horizontal tabs

# Right borders
shadow-border-right-inverse-strong:
value: "1px 0px {!palette-gray-20}"
comment: Right shadow border for hover status of vertical tabs on inverse backgrounds

# Bottom borders
shadow-border-bottom-primary:
value: "{!offset-0} 1px {!offset-0} {!palette-blue-55}"
Expand Down Expand Up @@ -195,7 +200,6 @@ props:
shadow-border-bottom-inverse-new-weaker:
value: "{!offset-0} 1px {!offset-0} {!palette-purple-70}"
comment: Bottom shadow border for the sidebar beta badge

# User
shadow-border-user:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-50}"
Expand Down
3 changes: 3 additions & 0 deletions packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
View file
Expand Up @@ -125,6 +125,9 @@ props:
shadow-border-inverse-new-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-70}"
comment: Shadow border for the sidebar beta badge.
shadow-border-top-primary-strongest:
value: "0px -1px {!offset-0} {!palette-blue-10}"
comment: Top shadow border for selected hover status of horizontal tabs.

# Badge
shadow-border-bottom-primary:
Expand Down
3 changes: 3 additions & 0 deletions packages/paste-design-tokens/tokens/themes/twilio-dark/global/box-shadow.yml
View file
Expand Up @@ -40,6 +40,9 @@ props:
shadow-border-inverse-new-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-70}"
comment: Shadow border for the sidebar beta badge.
shadow-border-top-primary-strongest:
value: "0px -1px {!offset-0} {!palette-blue-10}"
comment: Top shadow border for selected hover status of horizontal tabs.

# Badge
shadow-border-bottom-neutral-weaker:
Expand Down

1 comment on commit ecbba04

@vercel
Copy link

@vercel vercel bot commented on ecbba04 Nov 29, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

paste-remix – ./

paste-remix-twilio-developer-education.vercel.app
paste-remix-git-main-twilio-developer-education.vercel.app
paste-remix-theta.vercel.app
remix.twilio.design

Please sign in to comment.