From a1fecb5aa2c0ff86f658f638384cbcdd776d2b10 Mon Sep 17 00:00:00 2001 From: Jorge Acosta Date: Wed, 31 Jan 2024 10:42:33 -0500 Subject: [PATCH 1/7] Added Class name to unavailable items in sku selector so they can be hidden by CSS2 --- react/components/SKUSelector/components/SelectorItem.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/react/components/SKUSelector/components/SelectorItem.tsx b/react/components/SKUSelector/components/SelectorItem.tsx index ea26f4ce5..3fa755095 100644 --- a/react/components/SKUSelector/components/SelectorItem.tsx +++ b/react/components/SKUSelector/components/SelectorItem.tsx @@ -81,10 +81,13 @@ function SelectorItem({ { [`${handles.skuSelectorItemImage}`]: isImage, 'o-20': isImpossible, - } + }, + 'valueWrapper', + !isAvailable ? 'unavailable' : 'disableItem' ), [ isImage, + isAvailable, isSelected, isImpossible, variationValueOriginalName, From 7c368bb59ea65d8b5ae1dfcdd98899fcd1e7492a Mon Sep 17 00:00:00 2001 From: Jorge Acosta Date: Wed, 31 Jan 2024 10:44:36 -0500 Subject: [PATCH 2/7] Changelog --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index abfee1f20..21674b8d7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Added + +- Class name to 'unavailable' to unavailable items in sku selector so they can be hidden by CSS. + + ## [3.171.0] - 2024-01-09 ## [3.170.0] - 2023-11-28 From d88b95c0a812f11d9c6d54887fe4017c6cc37a97 Mon Sep 17 00:00:00 2001 From: Jorge Acosta Date: Wed, 31 Jan 2024 10:48:48 -0500 Subject: [PATCH 3/7] Changed class name --- CHANGELOG.md | 2 +- react/components/SKUSelector/components/SelectorItem.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 21674b8d7..9610b706f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Added -- Class name to 'unavailable' to unavailable items in sku selector so they can be hidden by CSS. +- Class name to 'unavailableSkuSelectorPDP' to unavailable items in sku selector so they can be hidden by CSS. ## [3.171.0] - 2024-01-09 diff --git a/react/components/SKUSelector/components/SelectorItem.tsx b/react/components/SKUSelector/components/SelectorItem.tsx index 3fa755095..109504dfa 100644 --- a/react/components/SKUSelector/components/SelectorItem.tsx +++ b/react/components/SKUSelector/components/SelectorItem.tsx @@ -83,7 +83,7 @@ function SelectorItem({ 'o-20': isImpossible, }, 'valueWrapper', - !isAvailable ? 'unavailable' : 'disableItem' + !isAvailable ? 'unavailableSkuSelectorPDP' : 'disableItem' ), [ isImage, From 82d8844aa3a46f3c5884b78a54dc3c07c04b3ec0 Mon Sep 17 00:00:00 2001 From: Jorge Acosta Date: Wed, 31 Jan 2024 10:53:39 -0500 Subject: [PATCH 4/7] Changed class name back to unavailable --- CHANGELOG.md | 2 +- react/components/SKUSelector/components/SelectorItem.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9610b706f..0d4e3c1c4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Added -- Class name to 'unavailableSkuSelectorPDP' to unavailable items in sku selector so they can be hidden by CSS. +- Class name to 'unavailable' in order to unavailable items in sku selector so they can be hidden by CSS. ## [3.171.0] - 2024-01-09 diff --git a/react/components/SKUSelector/components/SelectorItem.tsx b/react/components/SKUSelector/components/SelectorItem.tsx index 109504dfa..3fa755095 100644 --- a/react/components/SKUSelector/components/SelectorItem.tsx +++ b/react/components/SKUSelector/components/SelectorItem.tsx @@ -83,7 +83,7 @@ function SelectorItem({ 'o-20': isImpossible, }, 'valueWrapper', - !isAvailable ? 'unavailableSkuSelectorPDP' : 'disableItem' + !isAvailable ? 'unavailable' : 'disableItem' ), [ isImage, From 725a9780ad3c1403de3c70f61bf27f498b61d2e2 Mon Sep 17 00:00:00 2001 From: Jorge Acosta Date: Fri, 2 Feb 2024 14:25:47 -0500 Subject: [PATCH 5/7] added handles --- CHANGELOG.md | 2 +- react/components/SKUSelector/components/SelectorItem.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0d4e3c1c4..3a5b5e1f4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Added -- Class name to 'unavailable' in order to unavailable items in sku selector so they can be hidden by CSS. +- CSS Handle for unavailable products. ## [3.171.0] - 2024-01-09 diff --git a/react/components/SKUSelector/components/SelectorItem.tsx b/react/components/SKUSelector/components/SelectorItem.tsx index 3fa755095..8eb774976 100644 --- a/react/components/SKUSelector/components/SelectorItem.tsx +++ b/react/components/SKUSelector/components/SelectorItem.tsx @@ -38,6 +38,7 @@ export const CSS_HANDLES = [ 'frameAround', 'valueWrapper', 'diagonalCross', + 'unavailable', 'skuSelectorItem', 'skuSelectorBadge', 'skuSelectorItemImage', @@ -83,7 +84,7 @@ function SelectorItem({ 'o-20': isImpossible, }, 'valueWrapper', - !isAvailable ? 'unavailable' : 'disableItem' + !isAvailable ? `${handles.unavailable}` : 'disableItem' ), [ isImage, @@ -93,6 +94,7 @@ function SelectorItem({ variationValueOriginalName, withModifiers, handles.skuSelectorItemImage, + handles.unavailable, ] ) From b941daa636e80002c285e6641f8b4dac6f78281f Mon Sep 17 00:00:00 2001 From: Jorge Acosta Date: Fri, 2 Feb 2024 18:41:11 -0500 Subject: [PATCH 6/7] Updated handle --- react/components/SKUSelector/components/SelectorItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/components/SKUSelector/components/SelectorItem.tsx b/react/components/SKUSelector/components/SelectorItem.tsx index 8eb774976..801ba642e 100644 --- a/react/components/SKUSelector/components/SelectorItem.tsx +++ b/react/components/SKUSelector/components/SelectorItem.tsx @@ -84,7 +84,7 @@ function SelectorItem({ 'o-20': isImpossible, }, 'valueWrapper', - !isAvailable ? `${handles.unavailable}` : 'disableItem' + !isAvailable ? `${handles.unavailable}` : '' ), [ isImage, From 5dfa247e410d01a56b7e701bba451348d6f0f41c Mon Sep 17 00:00:00 2001 From: Jorge Acosta Date: Fri, 2 Feb 2024 18:44:20 -0500 Subject: [PATCH 7/7] Updated changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3a5b5e1f4..d70c3c497 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Added -- CSS Handle for unavailable products. +- CSS Handle for unavailable products update. ## [3.171.0] - 2024-01-09