fix(quantic): Sort dropdown and tooltip partially hidden by Salesforce container #4028

SimonMilord · 2024-05-29T20:47:02Z

SFINT-5552

For all issues: The main culprit was the component container in Salesforce. We don't have control over that and it also makes it virtually impossible to precisely know where the end of the container is since Salesforce doesn't seem to allow us to target it. So we can't quite use JS to get coordinates of elements and do some math to figure out when the component is hidden or not.... I therefore had to find crafty solutions...

ISSUE 1: Sort component

Before:

After:

Solution:

The lightning-combobox had the class: slds-dropdown_fluid automatically added by Salesforce which was adding the following properties: min-width 12rem, max-width: 100% and width: 100% which was causing the dropdown to overflow on the container.
The solution here is essentially to create a CSS class sort__combobox which overrides the properties set by slds-dropdown_fluid. I could not just remove the min-width, because then the labels would be truncated.

ISSUE 2: Toggle for GEN AI

Before:

After:

Solution:

The solution found here was to change the label to something shorter so that it doesn't get hidden. I replaced the old label by ON/OFF since its already pretty obvious we are talking of the generatedAnswer component.
Why I think this is acceptable: We will eventually remove this toggle button so why overthink this and also the copy to clipboard label : copy is also small enough to not get hidden when we do remove the toggle.

ISSUE 3: Tooltips getting partially hidden on the top

Will be fixed in a seperate PR in the C4SF package

… with padding and spacing

…he side of the screen

github-actions · 2024-05-29T20:53:16Z

Pull Request Report

PR Title

❌ Title should follow the conventional commit spec:

(optional scope):

Example:

feat(headless): add result-list controller

Bundle Size

File	Old (kb)	New (kb)
case-assist	202.8	202.8
commerce	285.5	285.5
search	367.4	367.4
insight	347.8	347.8
product-listing	262.3	262.3
product-recommendation	171.9	171.9
recommendation	215.8	215.8
ssr	360.3	360.3

SSR Progress

Use case	SSR (#)	CSR (#)	Progress (%)
search	39	44	89
recommendation	0	4	0
product-recommendation	0	10	0
product-listing	0	13	0
case-assist	0	6	0
insight	0	27	0
commerce	0	7	0

Detailed logs

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

mmitiche

Solutions 1 and 2 look good to me, however I disagree with solution 3.

I don't think we should change the behaviour/design of the tooltip because of a padding issue, I would qualify this as a minor issue that I think we could easily find ways around it without making significant changes in our components.

In the Quantic components, one of the goals is to create components that have the same look and feel as native Salesforce components.
Thus, when building/modifying Quantic components our reference is the SLDS design system and not Atomic.

In the SLDS design system, the tooltip is presented as the following: https://www.lightningdesignsystem.com/components/tooltips/
We should not get far from the tooltip behaviour inside Salesforce by removing the arrow.

packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswer/quanticGeneratedAnswer.css

github-actions · 2024-05-30T18:03:27Z

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

Bundle Size

File	Old (kb)	New (kb)
case-assist	202.8	202.8
commerce	285.9	285.9
search	367.5	367.5
insight	347.8	347.8
product-listing	262.3	262.3
product-recommendation	171.9	171.9
recommendation	215.8	215.8
ssr	360.3	360.3

SSR Progress

Use case	SSR (#)	CSR (#)	Progress (%)
search	39	44	89
recommendation	0	4	0
product-recommendation	0	10	0
product-listing	0	13	0
case-assist	0	6	0
insight	0	27	0
commerce	0	7	0

Detailed logs

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

mmitiche · 2024-05-30T18:28:13Z

packages/quantic/force-app/main/default/lwc/quanticSort/quanticSort.html

@@ -10,7 +10,7 @@
          <lightning-formatted-text value={labels.sortBy}></lightning-formatted-text>
        </lightning-layout-item>
        <lightning-layout-item>
-          <lightning-combobox name="sort" value={value} variant="label-hidden" label={labels.sortBy} placeholder={labels.relevancy} options={options} onchange={handleChange}>
+          <lightning-combobox class="sort__combobox" name="sort" value={value} variant="label-hidden" label={labels.sortBy} placeholder={labels.relevancy} options={options} onchange={handleChange}>


I'm not sure how is this CSS class is overriding the Salesforce CSS class defined inside the lightning-combobox component since this class you are adding is in a higher level than the SF class. are you sure it is overriding it?

In another note I suggest trying the following solution to see if it works:

The lightning-combobox component has a public property called: dropdown-alignment it specifies where the drop-down list is aligned. One of the values that this property could take is auto which will let the component determine where to open the list based on space available.
So it's worth trying to see if this component by it self is able to adapt according to the SF boundaries.

ref: https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox/specification

Yes I checked it is overriding it.

I already tried that when I was experimenting with the potential idea to make it dynamically aligned-right and auto doesnt work :( It was still overflowing... I think it might not account properly for the side of the container or something

Yea I would suggested replacing simply the dropdown-alignment to set it to dropdown-alignment="right" It makes more sense that the dropdown fits by being right aligned instead of limiting the width etc.

packages/quantic/force-app/main/translations/fr.translation-meta.xml

erocheleau

The thing that's hiding the overflow btw is the .hosted-search-page_layout[c-hostedSearchPageRenderer_hostedSearchPageRenderer] This is the class that has the overflow: hidden on it, so I don't know why we can't just change that?

erocheleau · 2024-05-31T16:07:54Z

packages/quantic/force-app/main/default/lwc/quanticSort/quanticSort.html

@@ -10,7 +10,7 @@
          <lightning-formatted-text value={labels.sortBy}></lightning-formatted-text>
        </lightning-layout-item>
        <lightning-layout-item>
-          <lightning-combobox name="sort" value={value} variant="label-hidden" label={labels.sortBy} placeholder={labels.relevancy} options={options} onchange={handleChange}>
+          <lightning-combobox class="sort__combobox" name="sort" value={value} variant="label-hidden" label={labels.sortBy} placeholder={labels.relevancy} options={options} onchange={handleChange}>


Yea I would suggested replacing simply the dropdown-alignment to set it to dropdown-alignment="right" It makes more sense that the dropdown fits by being right aligned instead of limiting the width etc.

erocheleau · 2024-05-31T16:10:05Z

packages/quantic/force-app/main/default/labels/CustomLabels.labels-meta.xml

@@ -1409,14 +1413,14 @@
  </labels>
  <labels>
    <fullName>quantic_GeneratedAnswerOn</fullName>
-    <value>Generated answer ON</value>
+    <value>ON</value>


We can't change the values just because they'd fit better xD

Also please don't run prettier on this file it looks stupid to have text on multiple lines.

SimonMilord added 4 commits May 29, 2024 12:32

fix toggle tooltip issue by shortening the label

1f1255e

fixed issue with the tooltip hidden on top by removing arrow, playing…

f610a51

… with padding and spacing

fixed issue with the sort dropdown component being partly hidden on t…

f19c926

…he side of the screen

forgot one thing

ad43047

SimonMilord force-pushed the SFINT-5552 branch from c70ae6f to ad43047 Compare May 29, 2024 20:53

SimonMilord marked this pull request as ready for review May 29, 2024 20:53

SimonMilord requested a review from a team as a code owner May 29, 2024 20:53

SimonMilord requested review from erocheleau and mmitiche May 29, 2024 20:53

mmitiche reviewed May 29, 2024

View reviewed changes

re-worked solution to the tooltip being hidden vertically

b33b547

SimonMilord force-pushed the SFINT-5552 branch from fa02962 to b33b547 Compare May 30, 2024 15:04

SimonMilord requested a review from mmitiche May 30, 2024 15:08

mmitiche reviewed May 30, 2024

View reviewed changes

packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswer/quanticGeneratedAnswer.css Outdated Show resolved Hide resolved

reverted change, will make seperate PR for the last fix

4ee03de

SimonMilord force-pushed the SFINT-5552 branch from 0c71cca to 4ee03de Compare May 30, 2024 15:31

SimonMilord requested a review from mmitiche May 30, 2024 15:34

SimonMilord temporarily deployed to PR Artifacts May 30, 2024 17:58 — with GitHub Actions Inactive

mmitiche reviewed May 30, 2024

View reviewed changes

fix some labels

96be5d5

SimonMilord force-pushed the SFINT-5552 branch from 6417680 to 96be5d5 Compare May 30, 2024 19:20

SimonMilord had a problem deploying to PR Artifacts May 30, 2024 19:20 — with GitHub Actions Error

SimonMilord requested a review from mmitiche May 30, 2024 19:20

SimonMilord temporarily deployed to PR Artifacts May 30, 2024 19:20 — with GitHub Actions Inactive

SimonMilord temporarily deployed to PR Artifacts May 31, 2024 15:45 — with GitHub Actions Inactive

erocheleau requested changes May 31, 2024

View reviewed changes

reverted changes, fixing in sfint

9ea2ebb

SimonMilord force-pushed the SFINT-5552 branch from 1c68227 to 9ea2ebb Compare May 31, 2024 17:11

SimonMilord temporarily deployed to PR Artifacts May 31, 2024 17:11 — with GitHub Actions Inactive

erocheleau added the Quantic label May 31, 2024

SimonMilord closed this May 31, 2024

SimonMilord temporarily deployed to PR Artifacts May 31, 2024 17:43 — with GitHub Actions Inactive

louis-bompart deleted the SFINT-5552 branch August 26, 2024 16:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(quantic): Sort dropdown and tooltip partially hidden by Salesforce container #4028

fix(quantic): Sort dropdown and tooltip partially hidden by Salesforce container #4028

SimonMilord commented May 29, 2024 •

edited

Loading

github-actions bot commented May 29, 2024 •

edited

Loading

mmitiche left a comment

github-actions bot commented May 30, 2024 •

edited

Loading

mmitiche May 30, 2024

mmitiche May 30, 2024

SimonMilord May 30, 2024

erocheleau May 31, 2024

erocheleau left a comment

erocheleau May 31, 2024

erocheleau May 31, 2024

fix(quantic): Sort dropdown and tooltip partially hidden by Salesforce container #4028

fix(quantic): Sort dropdown and tooltip partially hidden by Salesforce container #4028

Conversation

SimonMilord commented May 29, 2024 • edited Loading

ISSUE 1: Sort component

Before:

After:

Solution:

ISSUE 2: Toggle for GEN AI

Before:

After:

Solution:

ISSUE 3: Tooltips getting partially hidden on the top

github-actions bot commented May 29, 2024 • edited Loading

mmitiche left a comment

Choose a reason for hiding this comment

github-actions bot commented May 30, 2024 • edited Loading

Pull Request Report

PR Title

Live demo links

Bundle Size

SSR Progress

mmitiche May 30, 2024

Choose a reason for hiding this comment

mmitiche May 30, 2024

Choose a reason for hiding this comment

SimonMilord May 30, 2024

Choose a reason for hiding this comment

erocheleau May 31, 2024

Choose a reason for hiding this comment

erocheleau left a comment

Choose a reason for hiding this comment

erocheleau May 31, 2024

Choose a reason for hiding this comment

erocheleau May 31, 2024

Choose a reason for hiding this comment

SimonMilord commented May 29, 2024 •

edited

Loading

github-actions bot commented May 29, 2024 •

edited

Loading

github-actions bot commented May 30, 2024 •

edited

Loading