feat(quantic): Fix the styling of the quantic sort component when inside refine modal

[SimonMilord]

SFINT-4897

ISSUE:

The styling of the quanticSort component does not match what we do for the filters and Atomic's. Changing this styling is not as simple however. The lightning-combobox does not expose selectors to change its styling such as height, border, etc.

SOLUTION PROPOSED:

• Used variants for both "default" and "refineModal". When in variant "refineModal", it will display the sort label differently and take the whole width.
• Also deleted some of the deemed useless tests we had in quantic: should construct itself without throwing

LIMITATIONS:

• Although not perfect (ie: the height of the dropdown could be the same as filters, shadowbox, etc.), this solution is simple and leverages SLDS design system. So we know it works well and is accessible.

POTENTIAL ALTERNATIVES:

• The alternative would be to create a custom dropdown component whenever the quanticSort is in the refineModal. This is far more complicated as we will no longer have access to the built-in functionalities of the lightning-combobox for accessibility and so on. It make the quanticSort component a bit more complex than it needs to be.
• Another thing I tried was playing with the container's styling, but it ended up being worse IMO.

BEFORE:

AFTER:

Screen.Recording.2024-11-08.at.1.57.34.PM.mov

TESTS:

[github-actions]

Pull Request Report

PR Title

❌ Title should follow the conventional commit spec:
<type>(optional scope): <description>

Example: feat(headless): add result-list controller

Live demo links

• Storybook

• Playwright report

Bundle Size

File	Old (kb)	New (kb)	Change (%)
case-assist	236.8	236.8	0
commerce	341.5	341.5	0
search	412.8	412.8	0
insight	402.1	402.1	0
recommendation	249.1	249.1	0
ssr	406.3	406.3	0
ssr-commerce	353.7	353.7	0

SSR Progress

Use case	SSR (#)	CSR (#)	Progress (%)
search	39	44	89
recommendation	0	4	0
case-assist	0	6	0
insight	0	27	0
commerce	0	15	0

Detailed logs

search : buildInteractiveResult
search : buildInteractiveInstantResult
search : buildInteractiveRecentResult
search : buildInteractiveCitation
search : buildGeneratedAnswer
recommendation : missing SSR support
case-assist : missing SSR support
insight : missing SSR support
commerce : missing SSR support

[mmitiche]

As an initial comment, the variant values need to be something generic and reflect the changes that would occur on the component it self and not where the component would be used.

that's why the variant value refineModal is not ideal. it can happen that a client or us need to use this version of the component in another place other than the refine modal, in that case having a the value refineModal would not make sense.

A better used values could be default and large or compact.

[SimonMilord]

As an initial comment, the variant values need to be something generic and reflect the changes that would occur on the component it self and not where the component would be used.

that's why the variant value refineModal is not ideal. it can happen that a client or us need to use this version of the component in another place other than the refine modal, in that case having a the value refineModal would not make sense.

A better used values could be default and large or compact.

Good point, changed it to "wide" since it takes the whole width

[erocheleau]

Some suggestions on the code structure, but overall it seems to be working fine

[mmitiche]

Changes required for better scalability of the sort component that requires avoid mixing the size of the sort input with the label.

[mmitiche]

Do you think we can also improve the border shadow to match the facet cards in the refine modal content?

Yeah improved it:

[mmitiche]

Nice job 👌 The final result blends well in the refine modal

[erocheleau]

Slight changes and some unused code I think?

[erocheleau]

Can you do this instead?

Suggested change

	@api variant = 'default';
	@api variant = SORT_VARIANTS.DEFAULT;

[SimonMilord]

nah I tried, its giving me a type error:

either I set the @type to string, or leave it as is and set the default value to 'default'

[erocheleau]

Perfect!