diff --git a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.stories.tsx b/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.stories.tsx
index 80a38f455..1dca514f7 100644
--- a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.stories.tsx
+++ b/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.stories.tsx
@@ -72,6 +72,17 @@ export default {
},
control: { type: 'boolean' },
},
+ hideCountParenthesis: {
+ defaultValue: false,
+ description: 'Hide facet option count parenthesis',
+ table: {
+ type: {
+ summary: 'boolean',
+ },
+ defaultValue: { summary: false },
+ },
+ control: { type: 'boolean' },
+ },
previewOnFocus: {
description: 'Invoke facet value preview upon focus',
table: {
diff --git a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.test.tsx b/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.test.tsx
index 88518c163..f7adbbffa 100644
--- a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.test.tsx
+++ b/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.test.tsx
@@ -70,6 +70,21 @@ describe('ListValue Component hiding checkbox and count', () => {
});
describe('FacetListOptions generic props work', () => {
+ it('can hide count parenthesis', () => {
+ const rendered = render();
+
+ const listOption = rendered.container.querySelectorAll('.ss__facet-list-options__option');
+
+ expect(listOption).toHaveLength(listFacetMock.values!.length);
+
+ expect(listOption[0]).toHaveTextContent(listFacetMock.values![0].label!);
+
+ const optionCount = listOption[0].querySelector('.ss__facet-list-options__option__value__count');
+ expect(optionCount).toHaveTextContent(listFacetMock.values![0].count!.toString());
+ expect(optionCount).not.toHaveTextContent('(');
+ expect(optionCount).not.toHaveTextContent(')');
+ });
+
it('can disable styling', () => {
const rendered = render();
diff --git a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.tsx b/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.tsx
index 580c15239..f9b0c3c65 100644
--- a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.tsx
+++ b/packages/snap-preact-components/src/components/Molecules/FacetListOptions/FacetListOptions.tsx
@@ -52,7 +52,8 @@ export const FacetListOptions = observer((properties: FacetListOptionsProps): JS
...properties.theme?.components?.facetListOptions,
};
- const { values, hideCheckbox, hideCount, onClick, previewOnFocus, valueProps, facet, disableStyles, className, style } = props;
+ const { values, hideCheckbox, hideCount, hideCountParenthesis, onClick, previewOnFocus, valueProps, facet, disableStyles, className, style } =
+ props;
const subProps: FacetListOptionsSubProps = {
checkbox: {
@@ -102,7 +103,9 @@ export const FacetListOptions = observer((properties: FacetListOptionsProps): JS
{!hideCheckbox && }
{value.label}
- {!hideCount && value?.count > 0 && ({value.count})}
+ {!hideCount && value?.count > 0 && (
+ {hideCountParenthesis ? `${value.count}` : `(${value.count})`}
+ )}
))}
@@ -117,6 +120,7 @@ export interface FacetListOptionsProps extends ComponentProps {
values?: FacetValue[];
hideCheckbox?: boolean;
hideCount?: boolean;
+ hideCountParenthesis?: boolean;
facet?: ValueFacet;
onClick?: (e: React.MouseEvent) => void;
previewOnFocus?: boolean;
diff --git a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/readme.md b/packages/snap-preact-components/src/components/Molecules/FacetListOptions/readme.md
index 8d75bcbe4..f8e9954ee 100644
--- a/packages/snap-preact-components/src/components/Molecules/FacetListOptions/readme.md
+++ b/packages/snap-preact-components/src/components/Molecules/FacetListOptions/readme.md
@@ -38,6 +38,13 @@ The `hideCount` prop will disable the facet count values.
```
+### hideCountParenthesis
+The `hideCountParenthesis` prop will disable the facet count parenthesis from rendering.
+
+```jsx
+
+```
+
### previewOnFocus
If using within Autocomplete, the `previewOnFocus` prop will invoke the `value.preview()` method when the value has been hovered over.
diff --git a/packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.stories.tsx b/packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.stories.tsx
index 1b5fe0677..d7f14cb52 100644
--- a/packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.stories.tsx
+++ b/packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.stories.tsx
@@ -64,6 +64,17 @@ export default {
},
action: 'onSelect',
},
+ hideSelectedOptionParentheses: {
+ defaultValue: false,
+ description: 'Hide selected option parenthesis',
+ table: {
+ type: {
+ summary: 'boolean',
+ },
+ defaultValue: { summary: false },
+ },
+ control: { type: 'boolean' },
+ },
...componentArgs,
},
};
diff --git a/packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.tsx b/packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.tsx
index 8c621578f..bd91dbd1c 100644
--- a/packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.tsx
+++ b/packages/snap-preact-components/src/components/Molecules/VariantSelection/VariantSelection.tsx
@@ -72,7 +72,7 @@ export const VariantSelection = observer((properties: VariantSelectionProps): JS
...properties.theme?.components?.variantSelection,
};
- const { type, selection, onSelect, disableStyles, className, style } = props;
+ const { type, selection, onSelect, hideSelectedOptionParentheses, disableStyles, className, style } = props;
const onSelectHandler = (e: React.MouseEvent, option: ListOption) => {
if (onSelect) {
@@ -171,7 +171,9 @@ export const VariantSelection = observer((properties: VariantSelectionProps): JS
{selection.label}
{selection.selected ? (
- ({selection.selected.value})
+
+ {hideSelectedOptionParentheses ? `${selection.selected.value}` : `(${selection.selected.value})`}
+
) : (
<>>
)}
@@ -241,4 +243,5 @@ export interface VariantSelectionProps extends ComponentProps {
selection: VariantSelectionType;
type?: 'dropdown' | 'swatches' | 'list';
onSelect?: (e: React.MouseEvent, option: ListOption) => void;
+ hideSelectedOptionParentheses: boolean;
}
diff --git a/packages/snap-preact-components/src/components/Molecules/VariantSelection/readme.md b/packages/snap-preact-components/src/components/Molecules/VariantSelection/readme.md
index 2b1b465b2..1dc993455 100644
--- a/packages/snap-preact-components/src/components/Molecules/VariantSelection/readme.md
+++ b/packages/snap-preact-components/src/components/Molecules/VariantSelection/readme.md
@@ -33,4 +33,11 @@ The `onSelect` prop allows you to provide a callback function that is triggered
```jsx
console.log(e, val)}/>
+```
+
+### hideSelectedOptionParentheses
+The `hideSelectedOptionParentheses` prop will disable the selected option parenthesis from rendering.
+
+```jsx
+
```
\ No newline at end of file