twilio-labs · SiTaggart · Jun 29, 2023 · May 5, 2023 · May 5, 2023 · May 5, 2023
diff --git a/.changeset/cuddly-wolves-rhyme.md b/.changeset/cuddly-wolves-rhyme.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/product-switcher': patch
+'@twilio-paste/core': patch
+---
+
+[Product Switcher] minor change to the size of the trigger button
diff --git a/.changeset/few-poems-film.md b/.changeset/few-poems-film.md
@@ -0,0 +1,5 @@
+---
+'@twilio-paste/icons': patch
+---
+
+Update the notification, Debugger and Alarms icons
diff --git a/.changeset/neat-mugs-call.md b/.changeset/neat-mugs-call.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/sidebar': patch
+'@twilio-paste/core': patch
+---
+
+[Sidebar] `SidebarBetaBadge` no longer passes `onClick` when `as="span"`. Other miscellaneous typescript fixes.
diff --git a/.changeset/purple-terms-add.md b/.changeset/purple-terms-add.md
@@ -0,0 +1,5 @@
+---
+'@twilio-paste/codemods': patch
+---
+
+Updating core exports list
diff --git a/.changeset/selfish-chefs-kneel.md b/.changeset/selfish-chefs-kneel.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/sidebar': patch
+'@twilio-paste/core': patch
+---
+
+[Sidebar] Style updates to the Sidebar navigation components
diff --git a/.changeset/shaggy-seas-drum.md b/.changeset/shaggy-seas-drum.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/topbar': patch
+'@twilio-paste/core': patch
+---
+
+[Topbar] Update to the size of the User Dialog trigger for better alignment with other topbar related components
diff --git a/.changeset/tricky-rabbits-tie.md b/.changeset/tricky-rabbits-tie.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/combobox': patch
+'@twilio-paste/core': patch
+---
+
+[Combobox]: ability to have a truly visually hidden label for search comboboxes
diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts
@@ -66,6 +66,7 @@ export const SITEMAP = [
   '/components/screen-reader-only/',
   '/components/select/',
   '/components/separator/',
+  '/components/sidebar/',
   '/components/stack/',
   '/components/status-badge/',
   '/components/status-menu/',

diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json
@@ -220,9 +220,10 @@
   "useSideModalState": "@twilio-paste/core/side-modal",
   "Sidebar": "@twilio-paste/core/sidebar",
   "SidebarBetaBadge": "@twilio-paste/core/sidebar",
+  "SidebarBody": "@twilio-paste/core/sidebar",
   "SidebarCollapseButton": "@twilio-paste/core/sidebar",
-  "SidebarCollapseButtonWrapper": "@twilio-paste/core/sidebar",
   "SidebarContext": "@twilio-paste/core/sidebar",
+  "SidebarFooter": "@twilio-paste/core/sidebar",
   "SidebarHeader": "@twilio-paste/core/sidebar",
   "SidebarHeaderIconButton": "@twilio-paste/core/sidebar",
   "SidebarHeaderLabel": "@twilio-paste/core/sidebar",
@@ -232,6 +233,7 @@
   "SidebarNavigationDisclosureHeading": "@twilio-paste/core/sidebar",
   "SidebarNavigationDisclosureHeadingWrapper": "@twilio-paste/core/sidebar",
   "SidebarNavigationItem": "@twilio-paste/core/sidebar",
+  "SidebarNavigationSeparator": "@twilio-paste/core/sidebar",
   "SidebarOverlayContentWrapper": "@twilio-paste/core/sidebar",
   "SidebarPushContentWrapper": "@twilio-paste/core/sidebar",
   "useSidebarNavigationDisclosureState": "@twilio-paste/core/sidebar",
@@ -279,6 +281,7 @@
   "Tooltip": "@twilio-paste/core/tooltip",
   "useTooltipState": "@twilio-paste/core/tooltip",
   "Topbar": "@twilio-paste/core/topbar",
+  "TopbarActions": "@twilio-paste/core/topbar",
   "UserDialog": "@twilio-paste/core/topbar",
   "UserDialogContainer": "@twilio-paste/core/topbar",
   "UserDialogContext": "@twilio-paste/core/topbar",

diff --git a/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx b/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx
@@ -40,6 +40,7 @@ const Combobox = React.forwardRef<HTMLInputElement, ComboboxProps>(
       disabled,
       element = 'COMBOBOX',
       hasError,
+      hideVisibleLabel,
       helpText,
       initialSelectedItem,
       disabledItems,
@@ -145,9 +146,11 @@ const Combobox = React.forwardRef<HTMLInputElement, ComboboxProps>(
 
     return (
       <Box position="relative" element={`${element}_WRAPPER`}>
-        <Label disabled={disabled} required={required} variant={variant} {...getLabelProps()}>
-          {labelText}
-        </Label>
+        {!hideVisibleLabel && (
+          <Label disabled={disabled} required={required} variant={variant} {...getLabelProps()}>
+            {labelText}
+          </Label>
+        )}
         <InputBox
           disabled={disabled}
           element={element}
@@ -165,6 +168,7 @@ const Combobox = React.forwardRef<HTMLInputElement, ComboboxProps>(
               {...(!autocomplete ? {onChange: (event: React.ChangeEvent) => event.preventDefault()} : undefined)}
               autocomplete={autocomplete}
               aria-describedby={helpTextId}
+              aria-label={hideVisibleLabel ? labelText : null}
               element={`${element}_ELEMENT`}
             />
             {!autocomplete && (

diff --git a/packages/paste-core/components/combobox/src/types.ts b/packages/paste-core/components/combobox/src/types.ts
@@ -51,6 +51,7 @@ export interface ComboboxProps
   variant?: InputVariants;
   disabledItems?: any[];
   emptyState?: React.FC;
+  hideVisibleLabel?: boolean;
 
   // Downshift useCombobox Hook Props. Thes are mainly covered in https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md#advanced-props docs
   initialIsOpen?: UseComboboxPrimitiveProps<any>['initialIsOpen'];
@@ -92,6 +93,8 @@ export interface MultiselectComboboxProps
     | 'getA11yStatusMessage'
     | 'getA11ySelectionMessage'
     | 'state'
+    // until such time as we have a usecase for hidden multi-select comboboxes
+    | 'hideVisibleLabel'
   > {
   initialSelectedItems?: any[];
   onSelectedItemsChange?: (newSelectedItems: any[]) => void;

diff --git a/packages/paste-core/components/combobox/stories/Combobox.stories.tsx b/packages/paste-core/components/combobox/stories/Combobox.stories.tsx
@@ -278,6 +278,12 @@ export const ComboboxAutocomplete: StoryFn = () => {
 
 ComboboxAutocomplete.storyName = 'Combobox - Autocomplete';
 
+export const ComboboxHiddenLabel: StoryFn = () => {
+  return <Combobox items={items} labelText="Choose a component:" hideVisibleLabel helpText="This is the help text" />;
+};
+
+ComboboxHiddenLabel.storyName = 'Combobox - Non-visble label';
+
 export const ComboboxRequired: StoryFn = () => {
   return <Combobox items={items} labelText="Choose a component:" helpText="This is the help text" required />;
 };

diff --git a/packages/paste-core/components/product-switcher/src/ProductSwitcherButton.tsx b/packages/paste-core/components/product-switcher/src/ProductSwitcherButton.tsx
@@ -11,7 +11,7 @@ export interface ProductSwitcherButtonProps extends Omit<MenuButtonProps, 'varia
 const ProductSwitcherButton = React.forwardRef<HTMLButtonElement, ProductSwitcherButtonProps>(
   ({element = 'PRODUCT_SWITCHER_BUTTON', i18nButtonLabel, ...props}, ref) => {
     return (
-      <MenuButton element={element} {...props} variant="secondary_icon" size="icon_small" ref={ref}>
+      <MenuButton element={element} {...props} variant="secondary_icon" size="reset" ref={ref}>
         <ProductSwitcherIcon decorative={true} />
         <ScreenReaderOnly>{i18nButtonLabel}</ScreenReaderOnly>
       </MenuButton>

diff --git a/packages/paste-core/components/sidebar/CHANGELOG.md b/packages/paste-core/components/sidebar/CHANGELOG.md
@@ -18,7 +18,7 @@
 
 ### Minor Changes
 
-- [`d1d3088ca`](https://github.com/twilio-labs/paste/commit/d1d3088ca0c300740f640f80ebfc532168b35263) [#3160](https://github.com/twilio-labs/paste/pull/3160) Thanks [@nkrantz](https://github.com/nkrantz)! - [Sidebar] Add `SidebarCollapseButton` and `SidebarCollapseButtonWrapper` components. Renamed ContentWrappers
+- [`d1d3088ca`](https://github.com/twilio-labs/paste/commit/d1d3088ca0c300740f640f80ebfc532168b35263) [#3160](https://github.com/twilio-labs/paste/pull/3160) Thanks [@nkrantz](https://github.com/nkrantz)! - [Sidebar] Add `SidebarCollapseButton` and `SidebarFooter` components. Renamed ContentWrappers
 
 * [`0c3861824`](https://github.com/twilio-labs/paste/commit/0c38618244d1494c7153b341cfd4e486afafc47d) [#3154](https://github.com/twilio-labs/paste/pull/3154) Thanks [@TheSisb](https://github.com/TheSisb)! - [Sidebar] add new Sidebar component with several variant styles
 

diff --git a/packages/paste-core/components/sidebar/__tests__/index.spec.tsx b/packages/paste-core/components/sidebar/__tests__/index.spec.tsx
@@ -11,7 +11,7 @@ import {
   SidebarHeaderLabel,
   SidebarHeaderIconButton,
   SidebarCollapseButton,
-  SidebarCollapseButtonWrapper,
+  SidebarFooter,
   SidebarPushContentWrapper,
   SidebarOverlayContentWrapper,
   SidebarBetaBadge,
@@ -29,14 +29,14 @@ const MockPushSidebar = ({
     <Theme.Provider theme="twilio">
       <Sidebar aria-label="main" collapsed={collapsed} variant={variant}>
         <SidebarHeader>
-          <SidebarHeaderIconButton>
+          <SidebarHeaderIconButton as="button">
             <ProductFlexIcon size="sizeIcon20" decorative={false} title="Go to Flex product homepage" />
           </SidebarHeaderIconButton>
           <SidebarHeaderLabel>Twilio Flex</SidebarHeaderLabel>
         </SidebarHeader>
-        <SidebarCollapseButtonWrapper>
+        <SidebarFooter>
           <SidebarCollapseButton i18nCollapseLabel="Close sidebar" i18nExpandLabel="Open sidebar" />
-        </SidebarCollapseButtonWrapper>
+        </SidebarFooter>
       </Sidebar>
       <SidebarPushContentWrapper collapsed={collapsed} variant={variant}>
         <div>Content area</div>
@@ -56,14 +56,14 @@ const MockOverlaySidebar = ({
     <Theme.Provider theme="twilio">
       <Sidebar aria-label="main" collapsed={collapsed} variant={variant}>
         <SidebarHeader>
-          <SidebarHeaderIconButton>
+          <SidebarHeaderIconButton as="button">
             <ProductFlexIcon size="sizeIcon20" decorative={false} title="Go to Flex product homepage" />
           </SidebarHeaderIconButton>
           <SidebarHeaderLabel>Twilio Flex</SidebarHeaderLabel>
         </SidebarHeader>
-        <SidebarCollapseButtonWrapper>
+        <SidebarFooter>
           <SidebarCollapseButton i18nCollapseLabel="Close sidebar" i18nExpandLabel="Open sidebar" />
-        </SidebarCollapseButtonWrapper>
+        </SidebarFooter>
       </Sidebar>
       <SidebarOverlayContentWrapper collapsed={collapsed} variant={variant}>
         <div>Content area</div>
@@ -224,7 +224,7 @@ describe('Sidebar', () => {
             SIDEBAR_COLLAPSE_BUTTON: {
               padding: 'space40',
             },
-            SIDEBAR_COLLAPSE_BUTTON_WRAPPER: {
+            SIDEBAR_FOOTER: {
               padding: 'space40',
             },
             SIDEBAR_PUSH_CONTENT_WRAPPER: {backgroundColor: 'colorBackgroundPrimary', margin: 'space50'},
@@ -236,9 +236,9 @@ describe('Sidebar', () => {
           <Sidebar aria-label="main" variant="compact" data-testid="aaa">
             <Box color="colorTextInverse">Sidebar header</Box>
             <SidebarBetaBadge as="span">Beta</SidebarBetaBadge>
-            <SidebarCollapseButtonWrapper data-testid="collapseButtonWrapper">
+            <SidebarFooter data-testid="collapseButtonWrapper">
               <SidebarCollapseButton i18nCollapseLabel="Close sidebar" i18nExpandLabel="Open sidebar" />
-            </SidebarCollapseButtonWrapper>
+            </SidebarFooter>
           </Sidebar>
 
           {/* Must wrap content area */}
@@ -289,13 +289,13 @@ describe('Sidebar', () => {
             <SidebarBetaBadge as="span" element="XSIDE_BETA_BADGE">
               Beta
             </SidebarBetaBadge>
-            <SidebarCollapseButtonWrapper element="XSIDE_COLLAPSE_BUTTON_WRAPPER" data-testid="collapseButtonWrapper">
+            <SidebarFooter element="XSIDE_COLLAPSE_BUTTON_WRAPPER" data-testid="collapseButtonWrapper">
               <SidebarCollapseButton
                 element="XSIDE_COLLAPSE_BUTTON"
                 i18nCollapseLabel="Close sidebar"
                 i18nExpandLabel="Open sidebar"
               />
-            </SidebarCollapseButtonWrapper>
+            </SidebarFooter>
           </Sidebar>
 
           {/* Must wrap content area */}