Skip to content

Commit 28db966

Browse files
nkrantznkrantz
authored
chore: in page nav and tabs updates (#3579)
1 parent 701995f commit 28db966

File tree

28 files changed

+473
-75
lines changed

28 files changed

+473
-75
lines changed

‎.changeset/itchy-rats-do.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/tabs": minor
3+
"@twilio-paste/core": minor
4+
---
5+
6+
[Tabs] Update styles of vertical and horizontal tabs, add new variants full_width and inverse_full_width which do the same thing as fitted tabs, but are more appropriately named.

‎.changeset/lucky-carrots-design.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/in-page-navigation": minor
3+
"@twilio-paste/core": minor
4+
---
5+
6+
[In Page Navigation] Add vertical styles and update horizontal styles. Updated horizontal styles include a bottom border. Adds a new prop `hideBottomBorder` for specific cases when the bottom border shouldn't be visible.

‎.changeset/tidy-jeans-switch.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/design-tokens": minor
3+
"@twilio-paste/core": minor
4+
---
5+
6+
[Design tokens] Add three new box shadow tokens, shadow-border-top-primary, shadow-border-top-inverse-strongest, and shadow-border-top-primary-strongest for use in the tabs package. Add new background color, color-background-inverse-strongest.

‎.changeset/two-numbers-shake.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/box": minor
3+
"@twilio-paste/core": minor
4+
---
5+
6+
[Box] Add four new pseudo prop style selectors for use in the tabs package: `_selected_after`, `_focus_selected_after`, `_selected_hover_after`, `_focus_selected_hover_after`.

‎.eslintrc.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,8 @@ module.exports = {
6868
"_selected_hover",
6969
"_selected_focus",
7070
"_selected_focusVisible",
71+
"_selected_after",
72+
"_focus_selected_after",
7173
"_pressed_focus",
7274
"_pressed_hover",
7375
"_pressed_disabled",

‎packages/paste-core/components/code-block/type-docs.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6409,7 +6409,7 @@
64096409
"externalProp": true
64106410
},
64116411
"variant": {
6412-
"type": "\"fitted\" | \"inverse\" | \"inverse_fitted\"",
6412+
"type": "| \"fitted\"\n | \"inverse\"\n | \"inverse_fitted\"\n | \"full_width\"\n | \"inverse_full_width\"",
64136413
"defaultValue": null,
64146414
"required": false,
64156415
"externalProp": false,

‎packages/paste-core/components/in-page-navigation/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "4.2.0",
44
"category": "navigation",
55
"status": "production",
6-
"description": "An In Page Navigation is a group of styled links that lets users navigate between related pages.",
6+
"description": "In Page Navigation is a set of links that lets users navigate between related pages.",
77
"author": "Twilio Inc.",
88
"license": "MIT",
99
"main:dev": "src/index.tsx",

‎packages/paste-core/components/in-page-navigation/src/InPageNavigation.tsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,21 @@ export interface InPageNavigationProps extends Omit<HTMLPasteProps<"div">, "chil
3636
* @memberof InPageNavigationProps
3737
*/
3838
variant?: Variants;
39+
/**
40+
* InPageNavigation orientation
41+
*
42+
* @type {Orientation}
43+
* @memberof InPageNavigationProps
44+
*/
3945
orientation?: Orientation;
46+
/**
47+
* Use sparingly
48+
*
49+
* @type {boolean}
50+
* @default false
51+
* @memberof InPageNavigationProps
52+
*/
53+
hideBottomBorder?: boolean;
4054
}
4155

4256
const InPageNavigation = React.forwardRef<HTMLDivElement, InPageNavigationProps>(
@@ -46,6 +60,7 @@ const InPageNavigation = React.forwardRef<HTMLDivElement, InPageNavigationProps>
4660
variant = "default",
4761
orientation = "horizontal",
4862
marginBottom,
63+
hideBottomBorder = false,
4964
children,
5065
...props
5166
},
@@ -65,8 +80,7 @@ const InPageNavigation = React.forwardRef<HTMLDivElement, InPageNavigationProps>
6580
flexDirection="column"
6681
margin="space0"
6782
padding="space0"
68-
minWidth="size20"
69-
maxWidth="size40"
83+
width="100%"
7084
rowGap="space20"
7185
>
7286
{children}
@@ -85,10 +99,13 @@ const InPageNavigation = React.forwardRef<HTMLDivElement, InPageNavigationProps>
8599
element={`${element}_ITEMS`}
86100
display="flex"
87101
justifyContent={isFullWidth ? "space-evenly" : "flex-start"}
88-
columnGap={!isFullWidth ? "space80" : "space0"}
102+
columnGap={!isFullWidth ? "space50" : "space0"}
89103
padding="space0"
90104
margin="space0"
91105
marginBottom={marginBottom || "space60"}
106+
borderBottomWidth={hideBottomBorder ? "borderWidth0" : "borderWidth10"}
107+
borderBottomStyle={hideBottomBorder ? "none" : "solid"}
108+
borderBottomColor="colorBorderWeaker"
92109
>
93110
{children}
94111
</Box>

‎packages/paste-core/components/in-page-navigation/src/InPageNavigationItem.tsx‎

Lines changed: 46 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,11 @@ const BASE_STYLES: BoxStyleProps = {
2020
textDecoration: "none",
2121
_hover: {
2222
borderBottomColor: "colorBorderPrimaryStronger",
23+
borderLeftColor: "colorBorderPrimaryStronger",
2324
color: "colorTextLinkStronger",
2425
},
2526
_focus: {
26-
boxShadow: "shadowFocus",
27+
boxShadow: "shadowFocusInset",
2728
outline: "none",
2829
borderRadius: "borderRadius20",
2930
},
@@ -37,38 +38,59 @@ const HORIZONTAL_BASE_STYLES: BoxStyleProps = {
3738
borderBottomStyle: "solid",
3839
borderBottomWidth: "borderWidth10",
3940
paddingBottom: "space40",
40-
paddingLeft: "space20",
41-
paddingRight: "space20",
41+
paddingLeft: "space30",
42+
paddingRight: "space30",
4243
paddingTop: "space40",
44+
borderTopLeftRadius: "borderRadius30",
45+
borderTopRightRadius: "borderRadius30",
46+
_focus: {
47+
borderTopLeftRadius: "borderRadius30",
48+
borderTopRightRadius: "borderRadius30",
49+
boxShadow: "shadowFocusInset",
50+
outline: "none",
51+
},
4352
};
4453
const VERTICAL_BASE_STYLES: BoxStyleProps = {
4554
...BASE_STYLES,
4655
width: "auto",
47-
display: "inline-block",
56+
display: "block",
4857
borderLeftColor: "transparent",
4958
borderLeftStyle: "solid",
5059
borderLeftWidth: "borderWidth10",
5160
paddingBottom: "space30",
5261
paddingTop: "space30",
5362
paddingLeft: "space50",
5463
paddingRight: "space50",
64+
borderBottomRightRadius: "borderRadius30",
65+
borderTopRightRadius: "borderRadius30",
66+
_focus: {
67+
boxShadow: "shadowFocusInset",
68+
outline: "none",
69+
borderTopRightRadius: "borderRadius30",
70+
borderBottomRightRadius: "borderRadius30",
71+
},
5572
};
5673

5774
const CURRENT_PAGE_STYLES: BoxStyleProps = {
5875
borderBottomColor: "colorBorderPrimary",
5976
borderLeftColor: "colorBorderPrimary",
6077
color: "colorTextLink",
78+
_focus: {
79+
borderBottom: "none",
80+
boxShadow: "shadowFocusInset",
81+
outline: "none",
82+
},
6183
};
6284

6385
const INVERSE_STYLES: BoxStyleProps = {
6486
color: "colorTextInverseWeaker",
6587
_focus: {
66-
boxShadow: "shadowFocusInverse",
88+
boxShadow: "shadowFocusInverseInset",
6789
outline: "none",
68-
borderRadius: "borderRadius20",
6990
},
7091
_hover: {
7192
borderBottomColor: "colorBorderInverse",
93+
borderLeftColor: "colorBorderInverse",
7294
color: "colorTextInverseWeaker",
7395
},
7496
};
@@ -77,6 +99,11 @@ const INVERSE_CURRENT_PAGE_STYLES: BoxStyleProps = {
7799
borderBottomColor: "colorBorderInverseStrong",
78100
borderLeftColor: "colorBorderInverseStrong",
79101
color: "colorTextInverse",
102+
_focus: {
103+
borderBottom: "none",
104+
boxShadow: "shadowFocusInverseInset",
105+
outline: "none",
106+
},
80107
};
81108

82109
export interface InPageNavigationItemProps extends HTMLPasteProps<"a"> {
@@ -96,6 +123,13 @@ export interface InPageNavigationItemProps extends HTMLPasteProps<"a"> {
96123
* @memberof InPageNavigationItemProps
97124
*/
98125
href: string;
126+
/**
127+
* Accessible title for when the InPageNavigationItem is truncated. Usage is strongly recommended on all InPageNavigationItems, but especially when the text might be truncated (in vertical InPageNavigations or horizontal ones with more than 3 items).
128+
*
129+
* @type {string}
130+
* @memberof InPageNavigationItemProps
131+
*/
132+
title?: string;
99133
/**
100134
* Overrides the default element name to apply unique styles with the Customization Provider
101135
*
@@ -107,7 +141,7 @@ export interface InPageNavigationItemProps extends HTMLPasteProps<"a"> {
107141
}
108142

109143
const InPageNavigationItem = React.forwardRef<HTMLLIElement, InPageNavigationItemProps>(
110-
({ element = "IN_PAGE_NAVIGATION_ITEM", currentPage = false, href, children, ...props }, ref) => {
144+
({ element = "IN_PAGE_NAVIGATION_ITEM", currentPage = false, href, children, title, ...props }, ref) => {
111145
const { variant, orientation } = React.useContext(InPageNavigationContext);
112146
const isFullWidth = variant === "fullWidth" || variant === "inverse_fullWidth";
113147
const isInverse = variant === "inverse" || variant === "inverse_fullWidth";
@@ -120,7 +154,7 @@ const InPageNavigationItem = React.forwardRef<HTMLLIElement, InPageNavigationIte
120154

121155
if (orientation === "vertical") {
122156
return (
123-
<Box as="li" ref={ref} element={element} minWidth="size0" marginBottom="space20" display="inline-flex">
157+
<Box as="li" ref={ref} element={element} minWidth="size0" marginBottom="space20">
124158
<Box
125159
{...secureExternalLink(href)}
126160
{...safelySpreadBoxProps(props)}
@@ -132,6 +166,9 @@ const InPageNavigationItem = React.forwardRef<HTMLLIElement, InPageNavigationIte
132166
element={`${element}_ANCHOR`}
133167
aria-current={currentPage ? "page" : undefined}
134168
href={href}
169+
width="100%"
170+
textAlign="start"
171+
title={title}
135172
>
136173
{children}
137174
</Box>
@@ -161,6 +198,7 @@ const InPageNavigationItem = React.forwardRef<HTMLLIElement, InPageNavigationIte
161198
element={`${element}_ANCHOR`}
162199
aria-current={currentPage ? "page" : undefined}
163200
href={href}
201+
title={title}
164202
>
165203
{children}
166204
</Box>

‎packages/paste-core/components/in-page-navigation/stories/index.stories.tsx‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,18 @@ export const Default: StoryFn = () => {
2525
);
2626
};
2727

28+
export const NoBottomBorder: StoryFn = () => {
29+
/* using UID here to make unique labels for landmarks in Storybook for axe testing */
30+
return (
31+
<InPageNavigation aria-label={`get started ${useUID()}`} hideBottomBorder>
32+
<InPageNavigationItem href="#" currentPage>
33+
Super SIM
34+
</InPageNavigationItem>
35+
<InPageNavigationItem href="#">Programmable Wireless</InPageNavigationItem>
36+
</InPageNavigation>
37+
);
38+
};
39+
2840
export const FullWidth: StoryFn = () => {
2941
/* using UID here to make unique labels for landmarks in Storybook for axe testing */
3042
return (
@@ -75,13 +87,27 @@ export const LinkOverflowExample: StoryFn = () => {
7587
<InPageNavigationItem href="#" currentPage>
7688
Super SIM
7789
</InPageNavigationItem>
78-
<InPageNavigationItem href="#">Programmable Wireless</InPageNavigationItem>
79-
<InPageNavigationItem href="#">Super Duper SIM</InPageNavigationItem>
80-
<InPageNavigationItem href="#">Programmable Wirefull</InPageNavigationItem>
81-
<InPageNavigationItem href="#">Super SIM</InPageNavigationItem>
82-
<InPageNavigationItem href="#">Programmable Wireless</InPageNavigationItem>
83-
<InPageNavigationItem href="#">Super Duper SIM</InPageNavigationItem>
84-
<InPageNavigationItem href="#">Programmable Wirefull</InPageNavigationItem>
90+
<InPageNavigationItem href="#" title="Programmable Wireless">
91+
Programmable Wireless
92+
</InPageNavigationItem>
93+
<InPageNavigationItem href="#" title="Super Duper SIM">
94+
Super Duper SIM
95+
</InPageNavigationItem>
96+
<InPageNavigationItem href="#" title="Programmable Wirefull">
97+
Programmable Wirefull
98+
</InPageNavigationItem>
99+
<InPageNavigationItem href="#" title="Super SIM">
100+
Super SIM
101+
</InPageNavigationItem>
102+
<InPageNavigationItem href="#" title="Programmable Wireless">
103+
Programmable Wireless
104+
</InPageNavigationItem>
105+
<InPageNavigationItem href="#" title="Super Duper SIM">
106+
Super Duper SIM
107+
</InPageNavigationItem>
108+
<InPageNavigationItem href="#" title="Programmable Wirefull">
109+
Programmable Wirefull
110+
</InPageNavigationItem>
85111
</InPageNavigation>
86112
);
87113
};

0 commit comments

Comments
 (0)