feat(sidebar): add SidebarNavigation elements (#3224)

* fix(sidebar): use flexbox to space apart navigation header, nav, footer

* feat(sidebar): checkpoint sidebar navigation

* fix: smol fixes

* fix(sidebar): `SidebarNavigation` fixes and animation

* fix: many fixes and improvements

* chore: changeset

* fix: small fixes

* fix: story

* chore: add dep

* fix: checkpoint improvements

* fix(button): allow passing styles to reset button

* fix: sidebar navigation item to use button under the hood

* feat: icon on compact collapsed

* fix: incorrect padding on SidebarNavigation

* fix(button): set width=100% on button's inner span to fix truncating content

* fix(sidebar): finalize compact icon api

* test(sidebar): mostly finish writing tests for SidebarNavigation

* chore: pr review

* chore(website): fix multiselect combobox airtable endpoint

* fix: move disclosure icon on hover

* fix(icon): apply flex-shrink 0 by default

* chore: many styles fixes from pr review

* chore: ci fixes

* chore: add missing packages

* fix: regular and nested disclosures both flexGrow 1

* fix: style issues

* test: update snapshot

* fix: use correct focus styles

.changeset/forty-insects-eat.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/button': patch
+'@twilio-paste/core': patch
+---
+
+[Button] allow passing all style props to Button with variant="reset", effectively making it a Button primitive.

.changeset/fresh-grapes-drop.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/sidebar': minor
+'@twilio-paste/core': minor
+---
+
+[Sidebar] add SidebarNavigation and all relevant sub-components

.changeset/moody-deers-obey.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': patch
+'@twilio-paste/design-tokens': patch
+---
+
+[Design tokens] update the `shadowFocusInverseInset` token in the `twilio` and `twilio-dark` themes

.changeset/new-wolves-crash.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/codemods': patch
+'@twilio-paste/core': patch
+---
+
+[Codemods] add SidebarNavigation components

.changeset/tiny-poems-smash.md

@@ -0,0 +1,5 @@
+---
+'@twilio-paste/icons': patch
+---
+
+[Icons] apply `flex-shrink: 0` to IconWrapper by default, as we never want icons to be compressed unexpectedly

packages/paste-codemods/tools/.cache/mappings.json

@@ -226,8 +226,15 @@
   "SidebarHeader": "@twilio-paste/core/sidebar",
   "SidebarHeaderIconButton": "@twilio-paste/core/sidebar",
   "SidebarHeaderLabel": "@twilio-paste/core/sidebar",
+  "SidebarNavigation": "@twilio-paste/core/sidebar",
+  "SidebarNavigationDisclosure": "@twilio-paste/core/sidebar",
+  "SidebarNavigationDisclosureContent": "@twilio-paste/core/sidebar",
+  "SidebarNavigationDisclosureHeading": "@twilio-paste/core/sidebar",
+  "SidebarNavigationDisclosureHeadingWrapper": "@twilio-paste/core/sidebar",
+  "SidebarNavigationItem": "@twilio-paste/core/sidebar",
   "SidebarOverlayContentWrapper": "@twilio-paste/core/sidebar",
   "SidebarPushContentWrapper": "@twilio-paste/core/sidebar",
+  "useSidebarNavigationDisclosureState": "@twilio-paste/core/sidebar",
   "SkeletonLoader": "@twilio-paste/core/skeleton-loader",
   "Spinner": "@twilio-paste/core/spinner",
   "StatusBadge": "@twilio-paste/core/status",

packages/paste-core/components/button/src/ResetButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type {BoxStyleProps} from '@twilio-paste/box';
-import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
+import {Box} from '@twilio-paste/box';
 import merge from 'deepmerge';
 
 import {SizeStyles, BaseStyles} from './styles';
@@ -29,9 +29,9 @@ const ResetButton = React.forwardRef<HTMLButtonElement, DirectButtonProps>(
       <Box
         ref={ref}
         width={fullWidth ? '100%' : 'auto'}
-        {...safelySpreadBoxProps(props)}
         {...ButtonStyleMapping[buttonState]}
         {...SizeStyles[size]}
+        {...(props as any)}
       />
     );
   }

packages/paste-core/components/button/src/index.tsx

@@ -153,6 +153,7 @@ const ButtonContents: React.FC<React.PropsWithChildren<ButtonContentsProps>> = (
         justifyContent={buttonVariantHasBoundingBox ? null : 'center'}
         columnGap="space20"
         alignItems="center"
+        width="100%"
       >
         {children}
       </Box>