feat: batch up for components (#3292)

Author: Szymon-dziewonski

apps/preview/next/pages/showcases/Breadcrumbs/Breadcrumbs.tsx

@@ -26,7 +26,7 @@ export function Showcase() {
 
   return (
     <nav className="inline-flex font-normal font-body typography-text-sm">
-      <ol className="flex items-center w-auto leading-none group md:flex-wrap">
+      <ol className="flex items-center w-auto leading-none md:flex-wrap">
         <li className="flex items-center sm:hidden text-neutral-500">
           <SfDropdown
             trigger={

apps/preview/nuxt/pages/showcases/Breadcrumbs/Breadcrumbs.vue

@@ -1,6 +1,6 @@
 <template>
   <nav class="inline-flex items-center text-sm font-normal font-body">
-    <ol class="flex w-auto leading-none group md:flex-wrap">
+    <ol class="flex w-auto leading-none md:flex-wrap">
       <li class="flex items-center sm:hidden text-neutral-500">
         <SfDropdown v-model="dropdownOpened" strategy="absolute" placement="bottom-start" @update:model-value="close">
           <template #trigger>

packages/sfui/frameworks/react/components/SfAccordionItem/SfAccordionItem.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import type { SfAccordionItemProps } from '@storefront-ui/react';
 
 const SfAccordionItem = forwardRef<HTMLDetailsElement, SfAccordionItemProps>((props, ref) => {
-  const { open, onToggle, children, summary, summaryClassName, ...attributes } = props;
+  const { open, onToggle, children, summary, summaryClassName, summaryAttrs, ...attributes } = props;
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {
     event.preventDefault();
@@ -15,6 +15,7 @@ const SfAccordionItem = forwardRef<HTMLDetailsElement, SfAccordionItemProps>((pr
   return (
     <details ref={ref} open={open} data-testid="accordion-item" {...attributes}>
       <summary
+        {...summaryAttrs}
         onClick={handleClick}
         className={classNames(
           summaryClassName,

packages/sfui/frameworks/react/components/SfAccordionItem/types.ts

@@ -1,9 +1,10 @@
-import type { ReactNode, PropsWithChildren, DetailsHTMLAttributes } from 'react';
+import type { ReactNode, PropsWithChildren, DetailsHTMLAttributes, HTMLAttributes } from 'react';
 
 export interface SfAccordionItemProps
   extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, 'onToggle'>,
     PropsWithChildren {
   onToggle?: (isOpen: boolean) => void;
   summary?: ReactNode;
   summaryClassName?: string;
+  summaryAttrs?: HTMLAttributes<HTMLElement>;
 }

packages/sfui/frameworks/react/components/SfDropdown/SfDropdown.tsx

@@ -4,7 +4,15 @@ import { useDropdown } from '@storefront-ui/react';
 import type { SfDropdownProps } from '@storefront-ui/react';
 
 export default function SfDropdown(props: SfDropdownProps) {
-  const { children, trigger, open: isOpen = false, className, style: containerStyle, ...dropdownOptions } = props;
+  const {
+    children,
+    trigger,
+    open: isOpen = false,
+    className,
+    style: containerStyle,
+    wrapperClass,
+    ...dropdownOptions
+  } = props;
   const { refs, style: dropdownStyle } = useDropdown({ isOpen, ...dropdownOptions });
 
   return (
@@ -16,7 +24,13 @@ export default function SfDropdown(props: SfDropdownProps) {
     >
       {trigger}
       {isOpen && (
-        <div ref={refs.setFloating} style={dropdownStyle} aria-hidden={!isOpen} data-testid="dropdown-content">
+        <div
+          ref={refs.setFloating}
+          style={dropdownStyle}
+          aria-hidden={!isOpen}
+          data-testid="dropdown-content"
+          className={wrapperClass}
+        >
           {children}
         </div>
       )}

packages/sfui/frameworks/react/components/SfDropdown/types.ts

@@ -4,4 +4,5 @@ import type { UseDropdownOptions, PropsWithStyle } from '@storefront-ui/react';
 export interface SfDropdownProps extends Omit<UseDropdownOptions, 'isOpen'>, PropsWithStyle, PropsWithChildren {
   open?: boolean;
   trigger: ReactNode;
+  wrapperClass?: string;
 }

packages/sfui/frameworks/react/components/SfListItem/SfListItem.tsx

@@ -22,6 +22,8 @@ const SfListItem = polymorphicForwardRef<typeof defaultListItemTag, SfListItemPr
     as,
     childrenTag,
     children,
+    prefixClassName,
+    suffixClassName,
     ...attributes
   } = props;
 
@@ -45,11 +47,15 @@ const SfListItem = polymorphicForwardRef<typeof defaultListItemTag, SfListItemPr
       {...attributes}
     >
       {slotPrefix && (
-        <ChildrenTag className={disabled ? 'text-disabled-500' : 'text-neutral-500'}>{slotPrefix}</ChildrenTag>
+        <ChildrenTag className={classNames(disabled ? 'text-disabled-500' : 'text-neutral-500', prefixClassName)}>
+          {slotPrefix}
+        </ChildrenTag>
       )}
       <ChildrenTag className="flex flex-col w-full min-w-0">{children}</ChildrenTag>
       {slotSuffix && (
-        <ChildrenTag className={disabled ? 'text-disabled-500' : 'text-neutral-500'}>{slotSuffix}</ChildrenTag>
+        <ChildrenTag className={classNames(disabled ? 'text-disabled-500' : 'text-neutral-500', suffixClassName)}>
+          {slotSuffix}
+        </ChildrenTag>
       )}
     </Tag>
   );

packages/sfui/frameworks/react/components/SfListItem/types.ts

@@ -11,4 +11,6 @@ export interface SfListItemProps extends PropsWithChildren, PropsWithStyle {
   slotPrefix?: ReactNode;
   role?: string;
   childrenTag?: ElementType;
+  prefixClassName?: string;
+  suffixClassName?: string;
 }

packages/sfui/frameworks/react/hooks/useTooltip/useTooltip.ts

@@ -76,6 +76,7 @@ export function useTooltip(options?: UseTooltipOptions) {
       floating: floatingStyle,
       arrow: arrowStyle(),
     },
+    middlewareData,
     isOpen,
     open,
     close,

packages/sfui/frameworks/vue/components/SfAccordionItem/SfAccordionItem.vue

@@ -1,12 +1,17 @@
 <script lang="ts" setup>
 import { ClassProp } from '@storefront-ui/vue';
+import { type HTMLAttributes, type PropType } from 'vue';
 
 defineProps({
   modelValue: {
     type: Boolean,
     default: false,
   },
   summaryClass: ClassProp,
+  summaryAttrs: {
+    type: Object as PropType<HTMLAttributes>,
+    default: () => ({}),
+  },
 });
 
 defineEmits<{
@@ -19,6 +24,7 @@ defineEmits<{
 <template>
   <details :open="modelValue" data-testid="accordion-item">
     <summary
+      v-bind="summaryAttrs"
       :class="[
         summaryClass,
         'list-none [&::-webkit-details-marker]:hidden cursor-pointer focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm',