chore: merge branch 'v2-release/2.6.0' into v2

.github/workflows/ci.yml

@@ -137,7 +137,7 @@ jobs:
       - name: Pre-Cypress (build all dependencies)
         run: yarn test:ci-pre:vue
       - name: Cypress run
-        uses: cypress-io/github-action@v5.7.2
+        uses: cypress-io/github-action@v5.8.4
         with:
           browser: chrome
           working-directory: apps/test/vue
@@ -172,7 +172,7 @@ jobs:
       - name: Pre-Cypress (build all dependencies)
         run: yarn test:ci-pre:react
       - name: Cypress run
-        uses: cypress-io/github-action@v5.7.2
+        uses: cypress-io/github-action@v5.8.4
         with:
           browser: chrome
           working-directory: apps/test/react

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require("@vue-storefront/prettier-config")

.yarnrc.yml

@@ -4,4 +4,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: '@yarnpkg/plugin-workspace-tools'
 
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
+yarnPath: .yarn/releases/yarn-3.6.3.cjs

CONTRIBUTING.md

@@ -19,8 +19,12 @@ We're very excited to see that **you are thinking about contribution to Storefro
 ## Pull Request Guidelines
 
 - Learn about our branch structure [here](https://docs.vuestorefront.io/v2/contributing/branching-model.html).
+  <br>
+  **Important:**
+  <br>
+  For SFUI2 `main` branch is called `v2` and `develop` is `v2-develop`. `develop` and `master` branches **are used for SFUI1 maintenance**.
 
-- Checkout a topic branch from the relevant branch, e.g. `develop`, and merge back against that branch.
+- Checkout a topic branch from the relevant branch, e.g. `v2-develop`, and merge back against that branch.
 
 - Work in relevant place of repository and follow our [development guide](https://github.com/vuestorefront/storefront-ui/blob/v2/apps/docs/development/hello.md).
 

apps/docs/components/.vuepress/components/Generate.vue

@@ -13,6 +13,10 @@ export default {
       type: String,
       default: undefined,
     },
+    noScale: {
+      type: Boolean,
+      default: false
+    },
     noPaddings: {
       type: Boolean,
       default: false
@@ -30,8 +34,9 @@ export default {
   mounted: function() {
     const iframeElement = this.$refs.iframeRef;
     window.addEventListener('message', (e) => {
-      if(e.data === 'loaded' && this.noPaddings) {
-        iframeElement?.contentWindow?.postMessage('no-paddings', "*")
+      if (e.data === 'loaded') {
+        if (this.noPaddings) iframeElement?.contentWindow?.postMessage('no-paddings', "*")
+        else if (this.noScale) iframeElement?.contentWindow?.postMessage('no-scale', "*"); 
       }
     }, false);
   },

apps/docs/components/.vuepress/components/Showcase.vue

@@ -25,7 +25,7 @@
         @touchstart="eventDownListener"
       >
         <div class="absolute inset-0" v-show="isHandlerDragging"></div>
-        <Generate :showcase-path="showcaseName" :allow="allow" class="flex-grow rounded" style="margin-top: 0" :no-paddings="noPaddings"/>
+        <Generate :showcase-path="showcaseName" :allow="allow" class="flex-grow rounded" style="margin-top: 0" :no-paddings="noPaddings" :no-scale="noScale"/>
         <div ref="handlerRef" class="select-none rounded-tr items-center hidden sm:flex" style="cursor: ew-resize">
           <iconify-icon icon="akar-icons:drag-vertical" class="pointer-events-none" />
         </div>
@@ -50,6 +50,10 @@ export default {
       type: Boolean,
       default: false
     },
+    noScale: {
+      type: Boolean,
+      default: false
+    },
     allow: {
       type: String,
       default: undefined,

apps/docs/components/.vuepress/components/TypographyList.vue

@@ -44,9 +44,11 @@ const typographyClasses = [
   ['error-lg', 'fontSize.lg', 'lineHeight.7'],
   ['error-base', 'fontSize.base', 'lineHeight.6'],
   ['error-sm', 'fontSize.sm', 'lineHeight.5'],
+  ['error-xs', 'fontSize.xs', 'lineHeight.4'],
   ['hint-lg', 'fontSize.lg', 'lineHeight.7'],
   ['hint-base', 'fontSize.base', 'lineHeight.6'],
   ['hint-sm', 'fontSize.sm', 'lineHeight.5'],
+  ['hint-xs', 'fontSize.xs', 'lineHeight.4'],
 ];
 
 export default {

apps/docs/components/.vuepress/config.js

@@ -27,6 +27,7 @@ const reactMenu = [
       ['/react/customization/theming', 'Theming'],
       ['/react/customization/overriding-default-styles', 'Overriding Default Styles'],
       ['/react/customization/typography', 'Typography'],
+      ['/react/customization/prose', 'Prose'],
     ],
   },
   {
@@ -74,6 +75,7 @@ const vueMenu = [
       ['/vue/customization/theming', 'Theming'],
       ['/vue/customization/overriding-default-styles', 'Overriding Default Styles'],
       ['/vue/customization/typography', 'Typography'],
+      ['/vue/customization/prose', 'Prose'],
     ],
   },
   {

apps/docs/components/blocks/Card.md

@@ -1,7 +1,7 @@
 ---
 layout: DefaultLayout
 hideBreadcrumbs: true
-description: The Card component contains content and actions that inform about a single subject. 
+description: The Card component contains content and actions that inform about a single subject.
 hideToc: true
 ---
 # Card
@@ -12,6 +12,10 @@ hideToc: true
 
 The default card view with a rectangle shaped image, a title, a description and a button for some additional actions.
 
+::: tip
+This block contain empty `anchor` element, this specific manipulation adds possibility to navigate with `tab` through whole card. With this structure we can click buttons inside or whole card itself. If root card element would be `anchor` element, we would not have possibility to click `button` inside.
+:::
+
 <Showcase showcase-name="Card/CardDefault" style="min-height: 600px">
 
 <!-- vue -->

apps/docs/components/blocks/Combobox.md

@@ -11,6 +11,10 @@ The Combobox is a specialized input field designed for selecting from the option
 
 It allows users to speed up selecting by searching from limited number of options provided.
 
+::: read-more
+If you need to make this field required, it is crucial to communicate this intention clearly to your end users. You can find more information about [required form fields in our guide here](../blocks/FormFields.html).
+:::
+
 ## Accessibility notes
 
 The Combobox supports the use of the keyboard. The focus move from input field into the dropdown list and inside it is provided by arrow up/down keys. On escape key press you can go back to the input field, but when pressed inside input field it resets its content. 

apps/docs/components/blocks/SelectDropdown.md

@@ -10,6 +10,10 @@ The SelectDropdown is a visually customized version of the Select component, eli
 
 Please note that the example block provided can also serve as a base component, offering flexibility for implementation within the project based on specific requirements and design considerations.
 
+::: read-more
+If you need to make this field required, it is crucial to communicate this intention clearly to your end users. You can find more information about [required form fields in our guide here](../blocks/FormFields.html).
+:::
+
 ## Accessibility notes
 
 The SelectDropdown fully supports the use of the keyboard.
@@ -42,21 +46,6 @@ Adding placeholder might be helpful and informative for end users.
 <!-- end react -->
 </Showcase>
 
-## With required text
-
-By adding a sublabel, the user can easily see if this field is required. Remember to add `aria-required` to help users that use assistive technologies.
-
-<Showcase showcase-name="SelectDropdown/SelectDropdownRequired" style="min-height:300px">
-
-<!-- vue -->
-<<<../../preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownRequired.vue
-<!-- end vue -->
-<!-- react -->
-<<<../../preview/next/pages/showcases/SelectDropdown/SelectDropdownRequired.tsx#source
-<!-- end react -->
-
-</Showcase>
-
 ## Invalid state
 
 Provide visual cues for end users to indicate occuring error.

apps/docs/components/components/checkbox.md

@@ -5,12 +5,16 @@ description: A checkbox is an input that has three possible values - true, false
 ---
 # Checkbox
 
-::: slot usage
+:::::: slot usage
 
 `SfCheckbox` is a wrapper around `<input type="checkbox">` with additional styles for different states . It can be used for forms or expressing consents. 
 
 The root element is an `<input>` so any attributes that can be used on an `<input>` can be used on `SfCheckbox`.
 
+::: read-more
+If you need to make this field required, it is crucial to communicate this intention clearly to your end users. You can find more information about [required form fields in our guide here](../blocks/FormFields.html).
+:::
+
 ## Examples
 
 ### Checkbox without label
@@ -65,7 +69,7 @@ It's focusable and can be toggled with `Space`.
 
 <Generate style="height: 450px" />
 
-:::
+::::::
 
 ::: slot api
 

apps/docs/components/components/drawer.md

@@ -36,7 +36,7 @@ By default, `SfDrawer` will <!-- vue -->emit `update:modelValue`<!-- end vue -->
 
 You can wrap `SfDrawer` in a <!-- vue -->[`<transition>`](https://vuejs.org/guide/built-ins/transition.html#the-transition-component)<!-- end vue --><!-- react -->[`<CSSTransition>`](https://reactcommunity.org/react-transition-group/css-transition)<!-- end react --> component to add enter/exit animations. Additionally, you can use the `useTrapFocus` <!-- vue -->composable<!-- end vue --><!-- react -->hook<!-- end react --> for better control of focusable elements inside.
 
-<Showcase showcase-name="Drawer/TransitionAndCloseButton" style="min-height: 400px;">
+<Showcase showcase-name="Drawer/TransitionAndCloseButton" style="min-height: 400px;" no-scale>
 
 <!-- vue -->
 

apps/docs/components/components/input.md

@@ -4,10 +4,14 @@ hideBreadcrumbs: true
 ---
 # Input
 
-::: slot usage
+:::::: slot usage
 
 `SfInput` is a single-line text field allows users to enter any combination of letters, numbers, or symbols. It adds default styles to the native `<input type="text">` and supports supports adding content before/after the text input.
 
+::: read-more
+If you need to make this field required, it is crucial to communicate this intention clearly to your end users. You can find more information about [required form fields in our guide here](../blocks/FormFields.html).
+:::
+
 ## Examples
 
 
@@ -113,7 +117,7 @@ Avoid adding `div` tags to slots. If an input element is wrapped in `label` tag
 
 <Generate style="height: 600px;"/>
 
-:::
+::::::
 
 ::: slot api
 

apps/docs/components/components/listitem.md

@@ -87,14 +87,16 @@ ListItem component can be rendered as an `<li>` or `<a>` or any other tag by pro
 | `disabled ` | `boolean`        | `false`       |                          |
 | `selected`  | `boolean`        | `false`       |                          |
 <!-- vue -->
-| `tag` | `string` | `'li'` | any tag name |
+| `tag`                | `string`        | `'li'`           | any tag name               |
+| `childrenTag`        | `string`        | `'span'`            | any tag name               |
 <!-- end vue -->
 <!-- react -->
-| `as` | `ReactElement` | `'li'` | any tag name |
-| `children` | `ReactNode` | | label content |
-| `slotPrefix` | `ReactNode` | | right side content |
-| `slotSuffix` | `ReactNode` | | left side content |
-| `className` | `string` | | |
+| `as`                 | `ReactElement`  | `'li'`            | any tag name               |
+| `children`           | `ReactNode`     |               | label content              |
+| `childrenTag`        | `ReactElement`  | `'span'`            | any tag name               |
+| `slotPrefix`         | `ReactNode`     |               | right side content         |
+| `slotSuffix`         | `ReactNode`     |               | left side content          |
+| `className`          | `string`        |               |                            |
 <!-- end react -->
 
 <!-- vue -->

apps/docs/components/components/radio.md

@@ -4,10 +4,14 @@ hideBreadcrumbs: true
 ---
 # Radio
 
-::: slot usage
+:::::: slot usage
 
 `SfRadio` provides additional styles for different states of `<input type="radio">`. It can be used for choosing between a list of values when only one option can be selected at a time.
 
+::: read-more
+If you need to make this field required, it is crucial to communicate this intention clearly to your end users. You can find more information about [required form fields in our guide here](../blocks/FormFields.html).
+:::
+
 ## Examples
 
 ### Basic Usage
@@ -102,7 +106,7 @@ If you have an element that is not an `<input type="radio">`, you should set the
 
 <Generate />
 
-:::
+::::::
 
 ::: slot api
 

apps/docs/components/components/scrollable.md

@@ -15,14 +15,10 @@ This component is shipped in our NPM package, but its API might change based on
 ::: read-more
 
 <!-- react -->
-
 Learn more about `useScrollable` hook in the [Hooks > useScrollable docs](/react/hooks/useScrollable.html).
-
 <!-- end react -->
 <!-- vue -->
-
 Learn more about `useScrollable` composable in the [Composables > useScrollable docs](/vue/hooks/useScrollable.html).
-
 <!-- end vue -->
 
 :::
@@ -36,14 +32,10 @@ Can be setup that will be without scrollbar
 <Showcase showcase-name="Scrollable/HideScrollbar" style="min-height:240px">
 
 <!-- vue -->
-
 <<<../../preview/nuxt/pages/showcases/Scrollable/HideScrollbar.vue
-
 <!-- end vue -->
 <!-- react -->
-
 <<<../../preview/next/pages/showcases/Scrollable/HideScrollbar.tsx#source
-
 <!-- end react -->
 
 </Showcase>
@@ -55,14 +47,10 @@ Can be setup that will be without scrollbar
 <Showcase showcase-name="Scrollable/SnapCenter" style="min-height:260px">
 
 <!-- vue -->
-
 <<<../../preview/nuxt/pages/showcases/Scrollable/SnapCenter.vue
-
 <!-- end vue -->
 <!-- react -->
-
 <<<../../preview/next/pages/showcases/Scrollable/SnapCenter.tsx#source
-
 <!-- end react -->
 
 </Showcase>
@@ -74,14 +62,10 @@ By default `SfScrollable` scroll by one page of items, but can be modified that
 <Showcase showcase-name="Scrollable/ScrollByOneItem" style="min-height:260px">
 
 <!-- vue -->
-
 <<<../../preview/nuxt/pages/showcases/Scrollable/ScrollByOneItem.vue
-
 <!-- end vue -->
 <!-- react -->
-
 <<<../../preview/next/pages/showcases/Scrollable/ScrollByOneItem.tsx#source
-
 <!-- end react -->
 
 </Showcase>
@@ -157,14 +141,11 @@ The previous and next buttons have `aria-label` attributes (`buttonPrevAriaLabel
 <SourceCode>
 
 <!-- vue -->
-
 <<<../../../packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue
-
 <!-- end vue -->
 <!-- react -->
-
 <<< ../../../packages/sfui/frameworks/react/components/SfScrollable/SfScrollable.tsx
-
 <!-- end react -->
+
 </SourceCode>
 ::::::