chore: release 3.0.0

.changeset/five-geese-serve.md

@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/vue': major
+---
+
+Breaking Change - Padding size for square variant of SfButton changed

.changeset/flat-radios-do.md

@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/vue': major
+---
+
+Breaking Change - removed flex classes from wrapper for slot in SfListItem

.changeset/fresh-emus-care.md

@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/vue': major
+---
+
+Breaking Change - Padding left and right in SfSelect changed from 14px and 16px to 12px

.changeset/mighty-monkeys-occur.md

@@ -0,0 +1,8 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/vue': major
+---
+
+BREAKING CHANGE: Deprecated option `arrowKeysOn` from `useTrapFocus` is removed.
+This option was separated and replaced by two more specialised options `arrowKeysLeftRight` and `arrowKeysUpDown`.
+In order to migrate please one of those options or both.

apps/docs/components/hooks/useTrapFocus.md

@@ -73,11 +73,6 @@ useTrapFocus(focusTrapElementRef)
 
 :::::: slot api
 
-<!-- TODO: remove arrowKeysOn before 3.0.0 release -->
-::: warning DEPRECATION
-Parameter `arrowKeysOn` will be deprecated since version 2.3 and removed in next major version.
-:::
-
 ## Parameters
 
 | Name      | Type                  | Default value | Description |
@@ -98,7 +93,6 @@ Parameter `arrowKeysOn` will be deprecated since version 2.3 and removed in next
 | activeState  | `boolean` | `true`              | Mount `useTrapFocus` when active is `true`  |
 <!-- end react -->
 | initialFocus    | `number | 'autofocus' | 'container'` | `0`       | index number of desired focus element on init, `autofocus` for first marked element with attribute `autofocus`, `container` so `refElement` would be initially focused, `false` for disabling this option  |
-| arrowKeysOn | `boolean`    | `false`      | (deprecated) Enable/Disable possibility of using keyboard arrows `left`/`right` for jumping through focusable elements              |
 | arrowKeysLeftRight | `boolean`    | `false`      | Enable/Disable possibility of using keyboard arrows `left | up`/`right | down` for jumping through focusable elements              |
 | arrowKeysUpDown | `boolean`    | `false`      | Enable/Disable possibility of using keyboard arrows `up`/`down` for jumping through focusable elements              |
 | initialFocusContainerFallback | `boolean`  | `false`     | Fallback for initial focus           |

apps/preview/next/pages/showcases/Checkout/CheckoutDeliveryOptions.tsx

@@ -39,7 +39,7 @@ export default function DeliveryOptions() {
           className="!items-start max-w-sm border rounded-md border-neutral-200 first-of-type:mr-4 first-of-type:mb-4"
         >
           {name}
-          <span className="text-xs text-gray-500 break-words">{date}</span>
+          <span className="block text-xs text-gray-500 break-words">{date}</span>
         </SfListItem>
       ))}
     </div>

apps/preview/next/pages/showcases/ListItem/ListItemSlots.tsx

@@ -5,11 +5,11 @@ import { SfListItem, SfCounter, SfIconChevronRight, SfIconTune } from '@storefro
 export default function ListItemSlots() {
   return (
     <SfListItem className="max-w-sm" slotPrefix={<SfIconTune />} slotSuffix={<SfIconChevronRight />}>
-      <div className="break-words">
+      <span className="break-words">
         Label
         <SfCounter className="ml-2">123</SfCounter>
-      </div>
-      <span className="text-xs break-words text-neutral-500">Secondary text</span>
+      </span>
+      <span className="block text-xs break-words text-neutral-500">Secondary text</span>
     </SfListItem>
   );
 }

apps/preview/next/pages/showcases/SelectDropdown/SelectDropdownDisabled.tsx

@@ -42,7 +42,8 @@ export default function SelectDropdownDisabled() {
   const { refs, style: dropdownStyle } = useDropdown({ isOpen, onClose: close });
 
   useTrapFocus(refs.floating, {
-    arrowKeysOn: true,
+    arrowKeysLeftRight: true,
+    arrowKeysUpDown: true,
     activeState: isOpen,
     initialFocusContainerFallback: true,
   });

apps/preview/nuxt/pages/showcases/Checkout/CheckoutDeliveryOptions.vue

@@ -6,7 +6,7 @@
     class="!items-start max-w-sm border rounded-md border-neutral-200 first-of-type:mr-4 first-of-type:mb-4"
   >
     {{ name }}
-    <span class="text-xs text-gray-500 break-words">{{ date }}</span>
+    <span class="block text-xs text-gray-500 break-words">{{ date }}</span>
     <template #prefix>
       <SfRadio v-model="radioModel" :value="name" name="delivery-options" />
     </template>

apps/preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue

@@ -548,7 +548,8 @@ const {
 });
 
 useTrapFocus(floatingRef as Ref<HTMLUListElement>, {
-  arrowKeysOn: true,
+  arrowKeysLeftRight: true,
+  arrowKeysUpDown: true,
   activeState: dropdownOpen,
   initialFocusContainerFallback: true,
 });

apps/preview/nuxt/pages/showcases/ListItem/ListItemSlots.vue

@@ -5,7 +5,7 @@
       Label
       <SfCounter class="ml-2">123</SfCounter>
     </span>
-    <span class="text-xs break-words text-neutral-500">Secondary text</span>
+    <span class="block text-xs break-words text-neutral-500">Secondary text</span>
     <template #suffix><SfIconChevronRight /></template>
   </SfListItem>
 </template>

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

@@ -17,7 +17,7 @@ const getSizeClasses = (size: SfButtonProps['size'], square: SfButtonProps['squa
     case SfButtonSize.sm:
       return [square ? 'p-1.5' : 'leading-5 text-sm py-1.5 px-3', 'gap-1.5'];
     case SfButtonSize.lg:
-      return [square ? 'p-4' : 'py-3 leading-6 px-6', 'gap-3'];
+      return [square ? 'p-3' : 'py-3 leading-6 px-6', 'gap-3'];
     default:
       return [square ? 'p-2' : 'py-2 leading-6 px-4', 'gap-2'];
   }

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

@@ -42,7 +42,7 @@ const SfListItem = polymorphicForwardRef<typeof defaultListItemTag, SfListItemPr
       {...attributes}
     >
       {slotPrefix && <span className={disabled ? 'text-disabled-500' : 'text-neutral-500'}>{slotPrefix}</span>}
-      <span className="flex flex-col w-full min-w-0">{children}</span>
+      <span className="w-full min-w-0">{children}</span>
       {slotSuffix && <span className={disabled ? 'text-disabled-500' : 'text-neutral-500'}>{slotSuffix}</span>}
     </Tag>
   );

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

@@ -45,7 +45,7 @@ export default function SfSelect(props: SfSelectProps) {
         required={required}
         disabled={disabled}
         className={classNames(
-          'appearance-none disabled:cursor-not-allowed cursor-pointer pl-4 pr-3.5 text-neutral-900 focus:ring-primary-700 focus:ring-2 outline-none bg-transparent rounded-md ring-1 ring-inset ring-neutral-300 hover:ring-primary-700 active:ring-2 active:ring-primary-700 disabled:bg-disabled-100 disabled:text-disabled-900 disabled:ring-disabled-200',
+          'appearance-none disabled:cursor-not-allowed cursor-pointer px-3 text-neutral-900 focus:ring-primary-700 focus:ring-2 outline-none bg-transparent rounded-md ring-1 ring-inset ring-neutral-300 hover:ring-primary-700 active:ring-2 active:ring-primary-700 disabled:bg-disabled-100 disabled:text-disabled-900 disabled:ring-disabled-200',
           {
             'py-1.5': size === SfSelectSize.sm,
             'py-2': size === SfSelectSize.base,

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

@@ -15,11 +15,6 @@ type UseTrapFocusOptions = TabbableOptions &
     activeState?: boolean;
     initialFocus?: number | `${InitialFocusType}` | false;
     initialFocusContainerFallback?: boolean;
-    /**
-     * Enabling both `left` | `up` | `right` | `down` arrow keys.
-     * @deprecated Since version 2.3. Use arrowKeysLeftRight or/and arrowKeysUpDown options instead.
-     */
-    arrowKeysOn?: boolean;
     arrowKeysLeftRight?: boolean;
     arrowKeysUpDown?: boolean;
   };
@@ -29,7 +24,6 @@ const defaultOptions = {
   activeState: true,
   initialFocus: 0,
   initialFocusContainerFallback: false,
-  arrowKeysOn: false,
   arrowKeysLeftRight: false,
   arrowKeysUpDown: false,
 };
@@ -41,7 +35,6 @@ export const useTrapFocus = (containerElementRef: RefObject<HTMLElement | null>,
     includeContainer,
     activeState,
     initialFocus,
-    arrowKeysOn,
     arrowKeysLeftRight,
     arrowKeysUpDown,
     initialFocusContainerFallback,
@@ -86,9 +79,6 @@ export const useTrapFocus = (containerElementRef: RefObject<HTMLElement | null>,
         arrowFocusGroupSelector && containerElementRef.current?.querySelector(arrowFocusGroupSelector);
       const additionalData = isAnyGroupElement ? { arrowFocusGroupSelector } : {};
 
-      if (arrowKeysOn && (event.key === 'ArrowLeft' || event.key === 'ArrowUp')) focusPreviousItem({ additionalData });
-      if (arrowKeysOn && (event.key === 'ArrowRight' || event.key === 'ArrowDown')) focusNextItem({ additionalData });
-
       if (arrowKeysLeftRight && event.key === 'ArrowLeft') focusPreviousItem({ additionalData });
       if (arrowKeysLeftRight && event.key === 'ArrowRight') focusNextItem({ additionalData });
       if (arrowKeysUpDown && event.key === 'ArrowUp') focusPreviousItem({ additionalData });

packages/sfui/frameworks/vue/components/SfButton/SfButton.vue

@@ -43,7 +43,7 @@ const sizeClasses = computed(() => {
     case SfButtonSize.sm:
       return [square.value ? 'p-1.5' : 'leading-5 text-sm py-1.5 px-3', 'gap-1.5'];
     case SfButtonSize.lg:
-      return [square.value ? 'p-4' : 'py-3 leading-6 px-6', 'gap-3'];
+      return [square.value ? 'p-3' : 'py-3 leading-6 px-6', 'gap-3'];
     default:
       return [square.value ? 'p-2' : 'py-2 leading-6 px-4', 'gap-2'];
   }

packages/sfui/frameworks/vue/components/SfListItem/SfListItem.vue

@@ -44,7 +44,7 @@ defineProps({
     <span v-if="$slots.prefix" :class="disabled ? 'text-disabled-500' : 'text-neutral-500'">
       <slot name="prefix" />
     </span>
-    <span class="flex flex-col w-full min-w-0">
+    <span class="w-full min-w-0">
       <slot />
     </span>
     <span v-if="$slots.suffix" :class="disabled ? 'text-disabled-500' : 'text-neutral-500'">

packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue

@@ -73,7 +73,7 @@ const changedValue = (event: Event) => {
       :required="required"
       :disabled="disabled"
       :class="[
-        'appearance-none disabled:cursor-not-allowed cursor-pointer pl-4 pr-3.5 text-neutral-900 ring-inset focus:ring-primary-700 focus:ring-2 outline-none bg-transparent rounded-md ring-1 ring-neutral-300 hover:ring-primary-700 active:ring-2 active:ring-primary-700 disabled:bg-disabled-100 disabled:text-disabled-900 disabled:ring-disabled-200',
+        'appearance-none disabled:cursor-not-allowed cursor-pointer px-3 text-neutral-900 ring-inset focus:ring-primary-700 focus:ring-2 outline-none bg-transparent rounded-md ring-1 ring-neutral-300 hover:ring-primary-700 active:ring-2 active:ring-primary-700 disabled:bg-disabled-100 disabled:text-disabled-900 disabled:ring-disabled-200',
         {
           'py-1.5': size === SfSelectSize.sm,
           'py-2': size === SfSelectSize.base,

packages/sfui/frameworks/vue/composables/useTrapFocus/useTrapFocus.ts

@@ -16,11 +16,6 @@ type UseTrapFocusOptions = TabbableOptions &
     activeState?: Ref<boolean>;
     initialFocus?: number | `${InitialFocusType}` | false;
     initialFocusContainerFallback?: boolean;
-    /**
-     * Enabling both `left` | `up` | `right` | `down` arrow keys.
-     * @deprecated Since version 2.3. Use arrowKeysLeftRight or/and arrowKeysUpDown options instead.
-     */
-    arrowKeysOn?: boolean;
     arrowKeysLeftRight?: boolean;
     arrowKeysUpDown?: boolean;
   };
@@ -38,7 +33,6 @@ const defaultOptions = {
   activeState: ref(true),
   initialFocus: 0,
   initialFocusContainerFallback: false,
-  arrowKeysOn: false,
   arrowKeysLeftRight: false,
   arrowKeysUpDown: false,
 };
@@ -53,7 +47,6 @@ export const useTrapFocus = (
     includeContainer,
     activeState,
     initialFocus,
-    arrowKeysOn,
     arrowKeysLeftRight,
     arrowKeysUpDown,
     initialFocusContainerFallback,
@@ -101,9 +94,6 @@ export const useTrapFocus = (
     const isAnyGroupElement = arrowFocusGroupSelector && containerHTMLElement?.querySelector(arrowFocusGroupSelector);
     const additionalData = isAnyGroupElement ? { arrowFocusGroupSelector } : {};
 
-    if (arrowKeysOn && (event.key === 'ArrowLeft' || event.key === 'ArrowUp')) focusPreviousItem({ additionalData });
-    if (arrowKeysOn && (event.key === 'ArrowRight' || event.key === 'ArrowDown')) focusNextItem({ additionalData });
-
     if (arrowKeysLeftRight && event.key === 'ArrowLeft') focusPreviousItem({ additionalData });
     if (arrowKeysLeftRight && event.key === 'ArrowRight') focusNextItem({ additionalData });
     if (arrowKeysUpDown && event.key === 'ArrowUp') focusPreviousItem({ additionalData });

packages/tests/components/SfButton/SfButton.PageObject.ts

@@ -11,8 +11,13 @@ export default class SfButtonBaseObject extends BasePage {
     return this;
   }
 
-  isSquare(value) {
+  hasClass(value: string) {
     this.container.should('have.class', value);
     return this;
   }
+
+  doesNotHaveType() {
+    this.container.should('not.have.attr', 'type');
+    return this;
+  }
 }