chore: in page nav and tabs updates (#3579)

twilio-labs · Oct 31, 2023 · 28db966 · 28db966
1 parent 701995f
commit 28db966
Show file tree

Hide file tree

Showing 28 changed files with 473 additions and 75 deletions.
diff --git a/.changeset/itchy-rats-do.md b/.changeset/itchy-rats-do.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/tabs": minor
+"@twilio-paste/core": minor
+---
+
+[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.
diff --git a/.changeset/lucky-carrots-design.md b/.changeset/lucky-carrots-design.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/in-page-navigation": minor
+"@twilio-paste/core": minor
+---
+
+[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.
diff --git a/.changeset/tidy-jeans-switch.md b/.changeset/tidy-jeans-switch.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/design-tokens": minor
+"@twilio-paste/core": minor
+---
+
+[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.
diff --git a/.changeset/two-numbers-shake.md b/.changeset/two-numbers-shake.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/box": minor
+"@twilio-paste/core": minor
+---
+
+[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`.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -68,6 +68,8 @@ module.exports = {
           "_selected_hover",
           "_selected_focus",
           "_selected_focusVisible",
+          "_selected_after",
+          "_focus_selected_after",
           "_pressed_focus",
           "_pressed_hover",
           "_pressed_disabled",

diff --git a/packages/paste-core/components/code-block/type-docs.json b/packages/paste-core/components/code-block/type-docs.json
@@ -6409,7 +6409,7 @@
       "externalProp": true
     },
     "variant": {
-      "type": "\"fitted\" | \"inverse\" | \"inverse_fitted\"",
+      "type": "| \"fitted\"\n  | \"inverse\"\n  | \"inverse_fitted\"\n  | \"full_width\"\n  | \"inverse_full_width\"",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-core/components/in-page-navigation/package.json b/packages/paste-core/components/in-page-navigation/package.json
@@ -3,7 +3,7 @@
   "version": "4.2.0",
   "category": "navigation",
   "status": "production",
-  "description": "An In Page Navigation is a group of styled links that lets users navigate between related pages.",
+  "description": "In Page Navigation is a set of links that lets users navigate between related pages.",
   "author": "Twilio Inc.",
   "license": "MIT",
   "main:dev": "src/index.tsx",

diff --git a/packages/paste-core/components/in-page-navigation/src/InPageNavigation.tsx b/packages/paste-core/components/in-page-navigation/src/InPageNavigation.tsx
@@ -36,7 +36,21 @@ export interface InPageNavigationProps extends Omit<HTMLPasteProps<"div">, "chil
    * @memberof InPageNavigationProps
    */
   variant?: Variants;
+  /**
+   * InPageNavigation orientation
+   *
+   * @type {Orientation}
+   * @memberof InPageNavigationProps
+   */
   orientation?: Orientation;
+  /**
+   * Use sparingly
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof InPageNavigationProps
+   */
+  hideBottomBorder?: boolean;
 }
 
 const InPageNavigation = React.forwardRef<HTMLDivElement, InPageNavigationProps>(
@@ -46,6 +60,7 @@ const InPageNavigation = React.forwardRef<HTMLDivElement, InPageNavigationProps>
       variant = "default",
       orientation = "horizontal",
       marginBottom,
+      hideBottomBorder = false,
       children,
       ...props
     },
@@ -65,8 +80,7 @@ const InPageNavigation = React.forwardRef<HTMLDivElement, InPageNavigationProps>
               flexDirection="column"
               margin="space0"
               padding="space0"
-              minWidth="size20"
-              maxWidth="size40"
+              width="100%"
               rowGap="space20"
             >
               {children}
@@ -85,10 +99,13 @@ const InPageNavigation = React.forwardRef<HTMLDivElement, InPageNavigationProps>
             element={`${element}_ITEMS`}
             display="flex"
             justifyContent={isFullWidth ? "space-evenly" : "flex-start"}
-            columnGap={!isFullWidth ? "space80" : "space0"}
+            columnGap={!isFullWidth ? "space50" : "space0"}
             padding="space0"
             margin="space0"
             marginBottom={marginBottom || "space60"}
+            borderBottomWidth={hideBottomBorder ? "borderWidth0" : "borderWidth10"}
+            borderBottomStyle={hideBottomBorder ? "none" : "solid"}
+            borderBottomColor="colorBorderWeaker"
           >
             {children}
           </Box>

diff --git a/packages/paste-core/components/in-page-navigation/src/InPageNavigationItem.tsx b/packages/paste-core/components/in-page-navigation/src/InPageNavigationItem.tsx
@@ -20,10 +20,11 @@ const BASE_STYLES: BoxStyleProps = {
   textDecoration: "none",
   _hover: {
     borderBottomColor: "colorBorderPrimaryStronger",
+    borderLeftColor: "colorBorderPrimaryStronger",
     color: "colorTextLinkStronger",
   },
   _focus: {
-    boxShadow: "shadowFocus",
+    boxShadow: "shadowFocusInset",
     outline: "none",
     borderRadius: "borderRadius20",
   },
@@ -37,38 +38,59 @@ const HORIZONTAL_BASE_STYLES: BoxStyleProps = {
   borderBottomStyle: "solid",
   borderBottomWidth: "borderWidth10",
   paddingBottom: "space40",
-  paddingLeft: "space20",
-  paddingRight: "space20",
+  paddingLeft: "space30",
+  paddingRight: "space30",
   paddingTop: "space40",
+  borderTopLeftRadius: "borderRadius30",
+  borderTopRightRadius: "borderRadius30",
+  _focus: {
+    borderTopLeftRadius: "borderRadius30",
+    borderTopRightRadius: "borderRadius30",
+    boxShadow: "shadowFocusInset",
+    outline: "none",
+  },
 };
 const VERTICAL_BASE_STYLES: BoxStyleProps = {
   ...BASE_STYLES,
   width: "auto",
-  display: "inline-block",
+  display: "block",
   borderLeftColor: "transparent",
   borderLeftStyle: "solid",
   borderLeftWidth: "borderWidth10",
   paddingBottom: "space30",
   paddingTop: "space30",
   paddingLeft: "space50",
   paddingRight: "space50",
+  borderBottomRightRadius: "borderRadius30",
+  borderTopRightRadius: "borderRadius30",
+  _focus: {
+    boxShadow: "shadowFocusInset",
+    outline: "none",
+    borderTopRightRadius: "borderRadius30",
+    borderBottomRightRadius: "borderRadius30",
+  },
 };
 
 const CURRENT_PAGE_STYLES: BoxStyleProps = {
   borderBottomColor: "colorBorderPrimary",
   borderLeftColor: "colorBorderPrimary",
   color: "colorTextLink",
+  _focus: {
+    borderBottom: "none",
+    boxShadow: "shadowFocusInset",
+    outline: "none",
+  },
 };
 
 const INVERSE_STYLES: BoxStyleProps = {
   color: "colorTextInverseWeaker",
   _focus: {
-    boxShadow: "shadowFocusInverse",
+    boxShadow: "shadowFocusInverseInset",
     outline: "none",
-    borderRadius: "borderRadius20",
   },
   _hover: {
     borderBottomColor: "colorBorderInverse",
+    borderLeftColor: "colorBorderInverse",
     color: "colorTextInverseWeaker",
   },
 };
@@ -77,6 +99,11 @@ const INVERSE_CURRENT_PAGE_STYLES: BoxStyleProps = {
   borderBottomColor: "colorBorderInverseStrong",
   borderLeftColor: "colorBorderInverseStrong",
   color: "colorTextInverse",
+  _focus: {
+    borderBottom: "none",
+    boxShadow: "shadowFocusInverseInset",
+    outline: "none",
+  },
 };
 
 export interface InPageNavigationItemProps extends HTMLPasteProps<"a"> {
@@ -96,6 +123,13 @@ export interface InPageNavigationItemProps extends HTMLPasteProps<"a"> {
    * @memberof InPageNavigationItemProps
    */
   href: string;
+  /**
+   * 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).
+   *
+   * @type {string}
+   * @memberof InPageNavigationItemProps
+   */
+  title?: string;
   /**
    * Overrides the default element name to apply unique styles with the Customization Provider
    *
@@ -107,7 +141,7 @@ export interface InPageNavigationItemProps extends HTMLPasteProps<"a"> {
 }
 
 const InPageNavigationItem = React.forwardRef<HTMLLIElement, InPageNavigationItemProps>(
-  ({ element = "IN_PAGE_NAVIGATION_ITEM", currentPage = false, href, children, ...props }, ref) => {
+  ({ element = "IN_PAGE_NAVIGATION_ITEM", currentPage = false, href, children, title, ...props }, ref) => {
     const { variant, orientation } = React.useContext(InPageNavigationContext);
     const isFullWidth = variant === "fullWidth" || variant === "inverse_fullWidth";
     const isInverse = variant === "inverse" || variant === "inverse_fullWidth";
@@ -120,7 +154,7 @@ const InPageNavigationItem = React.forwardRef<HTMLLIElement, InPageNavigationIte
 
     if (orientation === "vertical") {
       return (
-        <Box as="li" ref={ref} element={element} minWidth="size0" marginBottom="space20" display="inline-flex">
+        <Box as="li" ref={ref} element={element} minWidth="size0" marginBottom="space20">
           <Box
             {...secureExternalLink(href)}
             {...safelySpreadBoxProps(props)}
@@ -132,6 +166,9 @@ const InPageNavigationItem = React.forwardRef<HTMLLIElement, InPageNavigationIte
             element={`${element}_ANCHOR`}
             aria-current={currentPage ? "page" : undefined}
             href={href}
+            width="100%"
+            textAlign="start"
+            title={title}
           >
             {children}
           </Box>
@@ -161,6 +198,7 @@ const InPageNavigationItem = React.forwardRef<HTMLLIElement, InPageNavigationIte
           element={`${element}_ANCHOR`}
           aria-current={currentPage ? "page" : undefined}
           href={href}
+          title={title}
         >
           {children}
         </Box>

diff --git a/packages/paste-core/components/in-page-navigation/stories/index.stories.tsx b/packages/paste-core/components/in-page-navigation/stories/index.stories.tsx
@@ -25,6 +25,18 @@ export const Default: StoryFn = () => {
   );
 };
 
+export const NoBottomBorder: StoryFn = () => {
+  /* using UID here to make unique labels for landmarks in Storybook for axe testing */
+  return (
+    <InPageNavigation aria-label={`get started ${useUID()}`} hideBottomBorder>
+      <InPageNavigationItem href="#" currentPage>
+        Super SIM
+      </InPageNavigationItem>
+      <InPageNavigationItem href="#">Programmable Wireless</InPageNavigationItem>
+    </InPageNavigation>
+  );
+};
+
 export const FullWidth: StoryFn = () => {
   /* using UID here to make unique labels for landmarks in Storybook for axe testing */
   return (
@@ -75,13 +87,27 @@ export const LinkOverflowExample: StoryFn = () => {
       <InPageNavigationItem href="#" currentPage>
         Super SIM
       </InPageNavigationItem>
-      <InPageNavigationItem href="#">Programmable Wireless</InPageNavigationItem>
-      <InPageNavigationItem href="#">Super Duper SIM</InPageNavigationItem>
-      <InPageNavigationItem href="#">Programmable Wirefull</InPageNavigationItem>
-      <InPageNavigationItem href="#">Super SIM</InPageNavigationItem>
-      <InPageNavigationItem href="#">Programmable Wireless</InPageNavigationItem>
-      <InPageNavigationItem href="#">Super Duper SIM</InPageNavigationItem>
-      <InPageNavigationItem href="#">Programmable Wirefull</InPageNavigationItem>
+      <InPageNavigationItem href="#" title="Programmable Wireless">
+        Programmable Wireless
+      </InPageNavigationItem>
+      <InPageNavigationItem href="#" title="Super Duper SIM">
+        Super Duper SIM
+      </InPageNavigationItem>
+      <InPageNavigationItem href="#" title="Programmable Wirefull">
+        Programmable Wirefull
+      </InPageNavigationItem>
+      <InPageNavigationItem href="#" title="Super SIM">
+        Super SIM
+      </InPageNavigationItem>
+      <InPageNavigationItem href="#" title="Programmable Wireless">
+        Programmable Wireless
+      </InPageNavigationItem>
+      <InPageNavigationItem href="#" title="Super Duper SIM">
+        Super Duper SIM
+      </InPageNavigationItem>
+      <InPageNavigationItem href="#" title="Programmable Wirefull">
+        Programmable Wirefull
+      </InPageNavigationItem>
     </InPageNavigation>
   );
 };

diff --git a/packages/paste-core/components/in-page-navigation/stories/vertical.stories.tsx b/packages/paste-core/components/in-page-navigation/stories/vertical.stories.tsx
@@ -16,12 +16,25 @@ export default {
 export const Default: StoryFn = () => {
   /* using UID here to make unique labels for landmarks in Storybook for axe testing */
   return (
-    <InPageNavigation aria-label={`get started ${useUID()}`} orientation="vertical">
-      <InPageNavigationItem href="#" currentPage>
-        Super SIM
-      </InPageNavigationItem>
-      <InPageNavigationItem href="#">Programmable Wireless</InPageNavigationItem>
-    </InPageNavigation>
+    <Box display="flex" flexDirection="row" width="100%">
+      <InPageNavigation aria-label={`get started ${useUID()}`} orientation="vertical">
+        <InPageNavigationItem href="#" currentPage>
+          Super SIM
+        </InPageNavigationItem>
+        <InPageNavigationItem href="#">Programmable Wireless wireless</InPageNavigationItem>
+      </InPageNavigation>
+      <Box
+        borderColor="colorBorder"
+        borderStyle="solid"
+        borderWidth="borderWidth20"
+        minWidth="size40"
+        width="100%"
+        height="size10"
+        padding="space50"
+      >
+        ...page content...
+      </Box>
+    </Box>
   );
 };
 
@@ -71,12 +84,23 @@ export const InverseFullWidth: StoryFn = () => {
 export const LinkOverflowExample: StoryFn = () => {
   /* using UID here to make unique labels for landmarks in Storybook for axe testing */
   return (
-    <InPageNavigation aria-label={`get started ${useUID()}`} orientation="vertical">
-      <InPageNavigationItem href="#" currentPage>
-        Super SIMSuper SIMSuper SIM - Telephony Overflow Please Work
-      </InPageNavigationItem>
-      <InPageNavigationItem href="#">Programmable Wireless Telephony Overflow Please Work</InPageNavigationItem>
-    </InPageNavigation>
+    <Box display="flex" flexDirection="row">
+      <Box maxWidth="size30">
+        <InPageNavigation aria-label={`get started ${useUID()}`} orientation="vertical">
+          <InPageNavigationItem
+            href="#"
+            currentPage
+            title="Super SIMSuper SIMSuper SIM - Telephony Overflow Please Work"
+          >
+            Super SIMSuper SIMSuper SIM - Telephony Overflow Please Work
+          </InPageNavigationItem>
+          <InPageNavigationItem href="#" title="Programmable Wireless Telephony Overflow Please Work">
+            Programmable Wireless Telephony Overflow Please Work
+          </InPageNavigationItem>
+        </InPageNavigation>
+      </Box>
+      <Box backgroundColor="colorBackgroundAvailable" minWidth="size70" width="100%" height="size10" />
+    </Box>
   );
 };