Skip to content

Commit 9449889

Browse files
FRSgitFRSgit
committed
chore: merge branch 'v2-release/2.6.0' into v2
2 parents 1a3cd3c + 174cf93 commit 9449889

File tree

394 files changed

+2429
-1901
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

394 files changed

+2429
-1901
lines changed

‎.github/workflows/ci.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ jobs:
137137
- name: Pre-Cypress (build all dependencies)
138138
run: yarn test:ci-pre:vue
139139
- name: Cypress run
140-
uses: cypress-io/github-action@v5.7.2
140+
uses: cypress-io/github-action@v5.8.4
141141
with:
142142
browser: chrome
143143
working-directory: apps/test/vue
@@ -172,7 +172,7 @@ jobs:
172172
- name: Pre-Cypress (build all dependencies)
173173
run: yarn test:ci-pre:react
174174
- name: Cypress run
175-
uses: cypress-io/github-action@v5.7.2
175+
uses: cypress-io/github-action@v5.8.4
176176
with:
177177
browser: chrome
178178
working-directory: apps/test/react

‎.prettierrc

-10
This file was deleted.

‎.prettierrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require("@vue-storefront/prettier-config")

‎.yarn/releases/yarn-3.6.1.cjs ‎.yarn/releases/yarn-3.6.3.cjs

+201-201
Large diffs are not rendered by default.

‎.yarnrc.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ plugins:
44
- path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
55
spec: '@yarnpkg/plugin-workspace-tools'
66

7-
yarnPath: .yarn/releases/yarn-3.6.1.cjs
7+
yarnPath: .yarn/releases/yarn-3.6.3.cjs

‎CONTRIBUTING.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,12 @@ We're very excited to see that **you are thinking about contribution to Storefro
1919
## Pull Request Guidelines
2020

2121
- Learn about our branch structure [here](https://docs.vuestorefront.io/v2/contributing/branching-model.html).
22+
<br>
23+
**Important:**
24+
<br>
25+
For SFUI2 `main` branch is called `v2` and `develop` is `v2-develop`. `develop` and `master` branches **are used for SFUI1 maintenance**.
2226

23-
- Checkout a topic branch from the relevant branch, e.g. `develop`, and merge back against that branch.
27+
- Checkout a topic branch from the relevant branch, e.g. `v2-develop`, and merge back against that branch.
2428

2529
- Work in relevant place of repository and follow our [development guide](https://github.com/vuestorefront/storefront-ui/blob/v2/apps/docs/development/hello.md).
2630

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

+7-2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ export default {
1313
type: String,
1414
default: undefined,
1515
},
16+
noScale: {
17+
type: Boolean,
18+
default: false
19+
},
1620
noPaddings: {
1721
type: Boolean,
1822
default: false
@@ -30,8 +34,9 @@ export default {
3034
mounted: function() {
3135
const iframeElement = this.$refs.iframeRef;
3236
window.addEventListener('message', (e) => {
33-
if(e.data === 'loaded' && this.noPaddings) {
34-
iframeElement?.contentWindow?.postMessage('no-paddings', "*")
37+
if (e.data === 'loaded') {
38+
if (this.noPaddings) iframeElement?.contentWindow?.postMessage('no-paddings', "*")
39+
else if (this.noScale) iframeElement?.contentWindow?.postMessage('no-scale', "*");
3540
}
3641
}, false);
3742
},

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

+5-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
@touchstart="eventDownListener"
2626
>
2727
<div class="absolute inset-0" v-show="isHandlerDragging"></div>
28-
<Generate :showcase-path="showcaseName" :allow="allow" class="flex-grow rounded" style="margin-top: 0" :no-paddings="noPaddings"/>
28+
<Generate :showcase-path="showcaseName" :allow="allow" class="flex-grow rounded" style="margin-top: 0" :no-paddings="noPaddings" :no-scale="noScale"/>
2929
<div ref="handlerRef" class="select-none rounded-tr items-center hidden sm:flex" style="cursor: ew-resize">
3030
<iconify-icon icon="akar-icons:drag-vertical" class="pointer-events-none" />
3131
</div>
@@ -50,6 +50,10 @@ export default {
5050
type: Boolean,
5151
default: false
5252
},
53+
noScale: {
54+
type: Boolean,
55+
default: false
56+
},
5357
allow: {
5458
type: String,
5559
default: undefined,

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

+2
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,11 @@ const typographyClasses = [
4444
['error-lg', 'fontSize.lg', 'lineHeight.7'],
4545
['error-base', 'fontSize.base', 'lineHeight.6'],
4646
['error-sm', 'fontSize.sm', 'lineHeight.5'],
47+
['error-xs', 'fontSize.xs', 'lineHeight.4'],
4748
['hint-lg', 'fontSize.lg', 'lineHeight.7'],
4849
['hint-base', 'fontSize.base', 'lineHeight.6'],
4950
['hint-sm', 'fontSize.sm', 'lineHeight.5'],
51+
['hint-xs', 'fontSize.xs', 'lineHeight.4'],
5052
];
5153
5254
export default {

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

+2
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const reactMenu = [
2727
['/react/customization/theming', 'Theming'],
2828
['/react/customization/overriding-default-styles', 'Overriding Default Styles'],
2929
['/react/customization/typography', 'Typography'],
30+
['/react/customization/prose', 'Prose'],
3031
],
3132
},
3233
{
@@ -74,6 +75,7 @@ const vueMenu = [
7475
['/vue/customization/theming', 'Theming'],
7576
['/vue/customization/overriding-default-styles', 'Overriding Default Styles'],
7677
['/vue/customization/typography', 'Typography'],
78+
['/vue/customization/prose', 'Prose'],
7779
],
7880
},
7981
{

‎apps/docs/components/blocks/Card.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: DefaultLayout
33
hideBreadcrumbs: true
4-
description: The Card component contains content and actions that inform about a single subject.
4+
description: The Card component contains content and actions that inform about a single subject.
55
hideToc: true
66
---
77
# Card
@@ -12,6 +12,10 @@ hideToc: true
1212

1313
The default card view with a rectangle shaped image, a title, a description and a button for some additional actions.
1414

15+
::: tip
16+
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.
17+
:::
18+
1519
<Showcase showcase-name="Card/CardDefault" style="min-height: 600px">
1620

1721
<!-- vue -->

‎apps/docs/components/blocks/Combobox.md

+4
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ The Combobox is a specialized input field designed for selecting from the option
1111

1212
It allows users to speed up selecting by searching from limited number of options provided.
1313

14+
::: read-more
15+
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).
16+
:::
17+
1418
## Accessibility notes
1519

1620
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

+4-15
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ The SelectDropdown is a visually customized version of the Select component, eli
1010

1111
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.
1212

13+
::: read-more
14+
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).
15+
:::
16+
1317
## Accessibility notes
1418

1519
The SelectDropdown fully supports the use of the keyboard.
@@ -42,21 +46,6 @@ Adding placeholder might be helpful and informative for end users.
4246
<!-- end react -->
4347
</Showcase>
4448

45-
## With required text
46-
47-
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.
48-
49-
<Showcase showcase-name="SelectDropdown/SelectDropdownRequired" style="min-height:300px">
50-
51-
<!-- vue -->
52-
<<<../../preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownRequired.vue
53-
<!-- end vue -->
54-
<!-- react -->
55-
<<<../../preview/next/pages/showcases/SelectDropdown/SelectDropdownRequired.tsx#source
56-
<!-- end react -->
57-
58-
</Showcase>
59-
6049
## Invalid state
6150

6251
Provide visual cues for end users to indicate occuring error.

‎apps/docs/components/components/checkbox.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,16 @@ description: A checkbox is an input that has three possible values - true, false
55
---
66
# Checkbox
77

8-
::: slot usage
8+
:::::: slot usage
99

1010
`SfCheckbox` is a wrapper around `<input type="checkbox">` with additional styles for different states . It can be used for forms or expressing consents.
1111

1212
The root element is an `<input>` so any attributes that can be used on an `<input>` can be used on `SfCheckbox`.
1313

14+
::: read-more
15+
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).
16+
:::
17+
1418
## Examples
1519

1620
### Checkbox without label
@@ -65,7 +69,7 @@ It's focusable and can be toggled with `Space`.
6569

6670
<Generate style="height: 450px" />
6771

68-
:::
72+
::::::
6973

7074
::: slot api
7175

‎apps/docs/components/components/drawer.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ By default, `SfDrawer` will <!-- vue -->emit `update:modelValue`<!-- end vue -->
3636

3737
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.
3838

39-
<Showcase showcase-name="Drawer/TransitionAndCloseButton" style="min-height: 400px;">
39+
<Showcase showcase-name="Drawer/TransitionAndCloseButton" style="min-height: 400px;" no-scale>
4040

4141
<!-- vue -->
4242

‎apps/docs/components/components/input.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,14 @@ hideBreadcrumbs: true
44
---
55
# Input
66

7-
::: slot usage
7+
:::::: slot usage
88

99
`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.
1010

11+
::: read-more
12+
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).
13+
:::
14+
1115
## Examples
1216

1317

@@ -113,7 +117,7 @@ Avoid adding `div` tags to slots. If an input element is wrapped in `label` tag
113117

114118
<Generate style="height: 600px;"/>
115119

116-
:::
120+
::::::
117121

118122
::: slot api
119123

‎apps/docs/components/components/listitem.md

+8-6
Original file line numberDiff line numberDiff line change
@@ -87,14 +87,16 @@ ListItem component can be rendered as an `<li>` or `<a>` or any other tag by pro
8787
| `disabled ` | `boolean` | `false` | |
8888
| `selected` | `boolean` | `false` | |
8989
<!-- vue -->
90-
| `tag` | `string` | `'li'` | any tag name |
90+
| `tag` | `string` | `'li'` | any tag name |
91+
| `childrenTag` | `string` | `'span'` | any tag name |
9192
<!-- end vue -->
9293
<!-- react -->
93-
| `as` | `ReactElement` | `'li'` | any tag name |
94-
| `children` | `ReactNode` | | label content |
95-
| `slotPrefix` | `ReactNode` | | right side content |
96-
| `slotSuffix` | `ReactNode` | | left side content |
97-
| `className` | `string` | | |
94+
| `as` | `ReactElement` | `'li'` | any tag name |
95+
| `children` | `ReactNode` | | label content |
96+
| `childrenTag` | `ReactElement` | `'span'` | any tag name |
97+
| `slotPrefix` | `ReactNode` | | right side content |
98+
| `slotSuffix` | `ReactNode` | | left side content |
99+
| `className` | `string` | | |
98100
<!-- end react -->
99101

100102
<!-- vue -->

‎apps/docs/components/components/radio.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,14 @@ hideBreadcrumbs: true
44
---
55
# Radio
66

7-
::: slot usage
7+
:::::: slot usage
88

99
`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.
1010

11+
::: read-more
12+
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).
13+
:::
14+
1115
## Examples
1216

1317
### Basic Usage
@@ -102,7 +106,7 @@ If you have an element that is not an `<input type="radio">`, you should set the
102106

103107
<Generate />
104108

105-
:::
109+
::::::
106110

107111
::: slot api
108112

‎apps/docs/components/components/scrollable.md

+1-20
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,10 @@ This component is shipped in our NPM package, but its API might change based on
1515
::: read-more
1616

1717
<!-- react -->
18-
1918
Learn more about `useScrollable` hook in the [Hooks > useScrollable docs](/react/hooks/useScrollable.html).
20-
2119
<!-- end react -->
2220
<!-- vue -->
23-
2421
Learn more about `useScrollable` composable in the [Composables > useScrollable docs](/vue/hooks/useScrollable.html).
25-
2622
<!-- end vue -->
2723

2824
:::
@@ -36,14 +32,10 @@ Can be setup that will be without scrollbar
3632
<Showcase showcase-name="Scrollable/HideScrollbar" style="min-height:240px">
3733

3834
<!-- vue -->
39-
4035
<<<../../preview/nuxt/pages/showcases/Scrollable/HideScrollbar.vue
41-
4236
<!-- end vue -->
4337
<!-- react -->
44-
4538
<<<../../preview/next/pages/showcases/Scrollable/HideScrollbar.tsx#source
46-
4739
<!-- end react -->
4840

4941
</Showcase>
@@ -55,14 +47,10 @@ Can be setup that will be without scrollbar
5547
<Showcase showcase-name="Scrollable/SnapCenter" style="min-height:260px">
5648

5749
<!-- vue -->
58-
5950
<<<../../preview/nuxt/pages/showcases/Scrollable/SnapCenter.vue
60-
6151
<!-- end vue -->
6252
<!-- react -->
63-
6453
<<<../../preview/next/pages/showcases/Scrollable/SnapCenter.tsx#source
65-
6654
<!-- end react -->
6755

6856
</Showcase>
@@ -74,14 +62,10 @@ By default `SfScrollable` scroll by one page of items, but can be modified that
7462
<Showcase showcase-name="Scrollable/ScrollByOneItem" style="min-height:260px">
7563

7664
<!-- vue -->
77-
7865
<<<../../preview/nuxt/pages/showcases/Scrollable/ScrollByOneItem.vue
79-
8066
<!-- end vue -->
8167
<!-- react -->
82-
8368
<<<../../preview/next/pages/showcases/Scrollable/ScrollByOneItem.tsx#source
84-
8569
<!-- end react -->
8670

8771
</Showcase>
@@ -157,14 +141,11 @@ The previous and next buttons have `aria-label` attributes (`buttonPrevAriaLabel
157141
<SourceCode>
158142

159143
<!-- vue -->
160-
161144
<<<../../../packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue
162-
163145
<!-- end vue -->
164146
<!-- react -->
165-
166147
<<< ../../../packages/sfui/frameworks/react/components/SfScrollable/SfScrollable.tsx
167-
168148
<!-- end react -->
149+
169150
</SourceCode>
170151
::::::

0 commit comments

Comments
 (0)