From b5b2e4a05535f370705287ac3f316e0e365f2325 Mon Sep 17 00:00:00 2001 From: Isabella Fagioli Date: Fri, 11 Apr 2025 09:49:53 -0300 Subject: [PATCH 1/4] addd opt to change aria-label --- docs/README.md | 1 + react/index.tsx | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/docs/README.md b/docs/README.md index 40f9b44..02512e1 100644 --- a/docs/README.md +++ b/docs/README.md @@ -30,6 +30,7 @@ This means `flex-layout.row#viewone` will appear on the bottom, `flex-layout.row | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | | `blockClass` | `string` | Allows to pass a custom name to be added to component CSS classes. | `null` | | `zIndexOffset` | `number` | An offset to be passed to the zIndex of the children of the stack layout. If you pass `3`, the first children will have `zIndex` of 3, and the next layer will have `zIndex` of 4, and so on. | `0` | +| `arialabel` | `string` | A value to customize the aria-label property | `null` | ## Customization diff --git a/react/index.tsx b/react/index.tsx index 3759ede..d70831e 100644 --- a/react/index.tsx +++ b/react/index.tsx @@ -4,17 +4,19 @@ import { useCssHandles, applyModifiers } from 'vtex.css-handles' const CSS_HANDLES = ['stackContainer', 'stackItem'] as const interface Props { - zIndexOffset?: number + zIndexOffset?: number, + arialabel?: string } const StackLayout: StorefrontFunctionComponent = ({ children, - zIndexOffset = 0 + zIndexOffset = 0, + arialabel }) => { const handles = useCssHandles(CSS_HANDLES) const intl = useIntl() return ( -
{React.Children.toArray(children).map((child, idx) => { From 6e4e9be5214f821ffd9d9691152044d82c920451 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Seixas?= Date: Wed, 16 Jul 2025 16:01:21 -0300 Subject: [PATCH 2/4] update actions/cache version --- .github/workflows/pull-request.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 3c8e966..eeb0e68 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -32,7 +32,7 @@ jobs: - name: Get yarn cache directory path id: yarn-cache-dir-path run: 'echo "::set-output name=dir::$(yarn cache dir)"' - - uses: actions/cache@v1 + - uses: actions/cache@v4 id: yarn-cache with: path: '${{ steps.yarn-cache-dir-path.outputs.dir }}' @@ -54,7 +54,7 @@ jobs: - name: Get yarn cache directory path id: yarn-cache-dir-path run: 'echo "::set-output name=dir::$(yarn cache dir)"' - - uses: actions/cache@v1 + - uses: actions/cache@v4 id: yarn-cache with: path: '${{ steps.yarn-cache-dir-path.outputs.dir }}' From cdcdb34de3ffd52a8e5c37b40c8bd2393fd9f08c Mon Sep 17 00:00:00 2001 From: isabellafagioli <80909346+isabellafagioli@users.noreply.github.com> Date: Thu, 17 Jul 2025 14:23:03 +0100 Subject: [PATCH 3/4] Update react/index.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Vinícius Seixas --- react/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/index.tsx b/react/index.tsx index d70831e..0ab07e0 100644 --- a/react/index.tsx +++ b/react/index.tsx @@ -16,7 +16,7 @@ const StackLayout: StorefrontFunctionComponent = ({ const handles = useCssHandles(CSS_HANDLES) const intl = useIntl() return ( -
{React.Children.toArray(children).map((child, idx) => { From a250baf4f0647864a4f3510a0be731d5ae9cf55a Mon Sep 17 00:00:00 2001 From: isabellafagioli <80909346+isabellafagioli@users.noreply.github.com> Date: Thu, 17 Jul 2025 14:25:38 +0100 Subject: [PATCH 4/4] Update CHANGELOG.md --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c5ae151..ba56947 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] + + ### Fixed ++ - option for client to pass aria-label as a variable + + ### Added + - aria-label property for stack layout