[CSL-3088] - fix issue with conflicting styles

[martinrajdl]

What this change include?

• removes sentence cased classnames from section list items & moves to data-cnstrc-display-name
• prefixes kebab cased classname like so cio-section-kebab-case-item-section
• keeps main classname
  Before:

After: - removes unnecessary classname from section item

• task also includes criteria to "Make sectionName camelcase" but it already is 🤔

[Mudaafi]

This is looking good, thanks for working on this!

Since we're surfacing sectionTitle as data-cnstrc-display-name, lets add some tests to check for them as well. We should probably rename sectionTitle to sectionClassName sectionDisplayName as well to add clarity.

[Mudaafi]

These do run but they're aren't using the Components we export. These classes are found in the /src/stories/Autocomplete/Hook/index.tsx#HooksTemplate. We should probably update them there to be consistent in terms of our docs.

[Mudaafi]

This is (type) broken currently but we still need it. Sections can be one of type autocomplete | recommendations | custom, but the type on autocomplete is optional meaning it can be undefined.

There's two ways to fix this:

1. Define an additional type that mimics AutocompleteConfiguration but with no type
2. Empty the default clause here. Add an if-conditional above to check if type===undefined
3. Assign the type during convertLegacyParametersAndAddDefaults in useCioAutocomplete (preferred)

I'll pull up a separate PR for this.

[mocca102]

which part you mean "This is (type) broken currently"? @Mudaafi

[Mudaafi]

@mocca102 Might be my configuration, but since we've explicitly defined the type Section to be one of three things and the switch statement accounts for all three, the final default type is never. TS then throws the error Property 'indexSectionName' does not exist on type 'never'

[mocca102]

Is there a way we can get this from getSectionProps since this same logic is being duplicated
https://github.com/Constructor-io/constructorio-ui-autocomplete/pull/128/files#diff-7f1c987b478566cc9cf82a2afc2ee7a7a150ec6047a7801e0ac01c410f7ce453R218

[Mudaafi]

We could. The reason why its included here is because we've rendered a separate div with the relevant classes in Line 154 so we kind of have to duplicate the logic to get the required values here.

Took a look at our history and it might be something we've included prior to creating getSectionProps so we might be good to omit this entirely from the story. @esezen would love to get your thoughts here since you touched it previously.

[Mudaafi]

In terms of passing this variable via getSectionProps itself, I thought getSectionProps is meant to contain only the attributes we're going to render into the HTML? I would be against adding something in specifically for our Storybook.

[mocca102]

Same for sectionTitle. Is there a way we can get this from getSectionProps instead?

[mocca102]

Styles not affected, Logic looks solid, just left two comments

[Mudaafi]

Changes are now backwards compatible. I've documented the classnames we're discontinuing here: https://github.com/Constructor-io/constructorio-ui-autocomplete/wiki/%5BWIP%5D-V2-Migration-Guide

[esezen]

LGTM!