feat(selectable search): add isCondensed prop to SelectableSearchInput component

[jmcreasman]

Adding a new boolean isCondensed prop that when set to true condenses the input height, font size and icon size for the following component:

SelectableSearchInput
isCondensed is false

isCondensed is true

[changeset-bot]

🦋 Changeset detected

Latest commit: b3dc39c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 96 packages

Name	Type
@commercetools-uikit/selectable-search-input	Minor
@commercetools-uikit/inputs	Minor
@commercetools-frontend/ui-kit	Minor
@commercetools-uikit/design-system	Minor
@commercetools-uikit/calendar-time-utils	Minor
@commercetools-uikit/calendar-utils	Minor
@commercetools-uikit/hooks	Minor
@commercetools-uikit/i18n	Minor
@commercetools-uikit/localized-utils	Minor
@commercetools-uikit/utils	Minor
@commercetools-uikit/accessible-hidden	Minor
@commercetools-uikit/avatar	Minor
@commercetools-uikit/card	Minor
@commercetools-uikit/collapsible-motion	Minor
@commercetools-uikit/collapsible-panel	Minor
@commercetools-uikit/collapsible	Minor
@commercetools-uikit/constraints	Minor
@commercetools-uikit/data-table-manager	Minor
@commercetools-uikit/data-table	Minor
@commercetools-uikit/field-errors	Minor
@commercetools-uikit/field-label	Minor
@commercetools-uikit/field-warnings	Minor
@commercetools-uikit/grid	Minor
@commercetools-uikit/icons	Minor
@commercetools-uikit/label	Minor
@commercetools-uikit/link	Minor
@commercetools-uikit/loading-spinner	Minor
@commercetools-uikit/messages	Minor
@commercetools-uikit/notifications	Minor
@commercetools-uikit/pagination	Minor
@commercetools-uikit/primary-action-dropdown	Minor
@commercetools-uikit/progress-bar	Minor
@commercetools-uikit/stamp	Minor
@commercetools-uikit/tag	Minor
@commercetools-uikit/text	Minor
@commercetools-uikit/tooltip	Minor
@commercetools-uikit/view-switcher	Minor
@commercetools-uikit/accessible-button	Minor
@commercetools-uikit/flat-button	Minor
@commercetools-uikit/icon-button	Minor
@commercetools-uikit/link-button	Minor
@commercetools-uikit/primary-button	Minor
@commercetools-uikit/secondary-button	Minor
@commercetools-uikit/secondary-icon-button	Minor
@commercetools-uikit/dropdown-menu	Minor
@commercetools-uikit/async-creatable-select-field	Minor
@commercetools-uikit/async-select-field	Minor
@commercetools-uikit/creatable-select-field	Minor
@commercetools-uikit/date-field	Minor
@commercetools-uikit/date-range-field	Minor
@commercetools-uikit/date-time-field	Minor
@commercetools-uikit/localized-multiline-text-field	Minor
@commercetools-uikit/localized-text-field	Minor
@commercetools-uikit/money-field	Minor
@commercetools-uikit/multiline-text-field	Minor
@commercetools-uikit/number-field	Minor
@commercetools-uikit/password-field	Minor
@commercetools-uikit/radio-field	Minor
@commercetools-uikit/search-select-field	Minor
@commercetools-uikit/select-field	Minor
@commercetools-uikit/text-field	Minor
@commercetools-uikit/time-field	Minor
@commercetools-uikit/async-creatable-select-input	Minor
@commercetools-uikit/async-select-input	Minor
@commercetools-uikit/checkbox-input	Minor
@commercetools-uikit/creatable-select-input	Minor
@commercetools-uikit/date-input	Minor
@commercetools-uikit/date-range-input	Minor
@commercetools-uikit/date-time-input	Minor
@commercetools-uikit/input-utils	Minor
@commercetools-uikit/localized-money-input	Minor
@commercetools-uikit/localized-multiline-text-input	Minor
@commercetools-uikit/localized-rich-text-input	Minor
@commercetools-uikit/localized-text-input	Minor
@commercetools-uikit/money-input	Minor
@commercetools-uikit/multiline-text-input	Minor
@commercetools-uikit/number-input	Minor
@commercetools-uikit/password-input	Minor
@commercetools-uikit/radio-input	Minor
@commercetools-uikit/rich-text-input	Minor
@commercetools-uikit/rich-text-utils	Minor
@commercetools-uikit/search-select-input	Minor
@commercetools-uikit/search-text-input	Minor
@commercetools-uikit/select-input	Minor
@commercetools-uikit/select-utils	Minor
@commercetools-uikit/text-input	Minor
@commercetools-uikit/time-input	Minor
@commercetools-uikit/toggle-input	Minor
@commercetools-uikit/spacings-inline	Minor
@commercetools-uikit/spacings-inset-squish	Minor
@commercetools-uikit/spacings-inset	Minor
@commercetools-uikit/spacings-stack	Minor
@commercetools-uikit/buttons	Minor
@commercetools-uikit/fields	Minor
@commercetools-uikit/spacings	Minor
visual-testing-app	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui-kit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 13, 2024 11:49am

[jmcreasman]

@ddouglasz
I'm running into a problem with this component getting the left dropdown height to shrink (see picture). Everything else is done but that. It sure seems like the styling is coming from components/inputs/selectable-search-input/src/selectable-search-input.styles.ts with createSelectableSelectStyles yet I can’t seem to figure out where to set height and get it to work. Played around with inspect for a good deal of time too and still no luck.

Any thoughts? Could be I've just looked at the wrong part too long and am missing the obvious...

[jmcreasman]

@ddouglasz I'm running into a problem with this component getting the left dropdown height to shrink (see picture). Everything else is done but that. It sure seems like the styling is coming from components/inputs/selectable-search-input/src/selectable-search-input.styles.ts with createSelectableSelectStyles yet I can’t seem to figure out where to set height and get it to work. Played around with inspect for a good deal of time too and still no luck.

Any thoughts? Could be I've just looked at the wrong part too long and am missing the obvious...

This has been resolved now but about to leave a couple comments on some curiosities we had.

[jmcreasman]

Is there a reason select (from react) is being used/imported here instead of the select component already set up in UI Kit? Then all that would be needed is just to pass in the isCondensed instead of re-setting up the conditional styling again.

[jmcreasman]

We saw something similar with create-select-styles.ts and selectable-search-input.styles.ts where basically the same functions were both being written and the conditional styling had to be duplicated. However other instances pulled from the same function and all that had to be done was just pass the prop in. Maybe out of scope for this initiative but just something we noticed as we worked on the select input based components.

[ddouglasz]

Hey @jmcreasman 👋
Sorry I totally missed your previous mentions. Regarding your observation above, thats a good question. I think that is a viable option as it seems they are similar components. However, I guess it is either these use cases are not ideal for the outcome we want using a SelectInput or they were just implemented in this isolated form. I can confirm this when I have some time to investigate further.

[CarlosCortizasCT]

Thanks @jmcreasman for your feedback 👍

I remember we run into som issues we couldn't overcome when we first tried to implement the SelectableSearchInput using the SelectInput component, although I don't remember the exact reason.

I agree with you that it's weird not all selectable components share more code and that's something that we would like to address in one of the initiatives we already discussed within the team for the future on ui-kit, however, we need to find the time to kickstart that initiative and I don't think that's going to happen this or next quarter.

Anyway, we really appreciate the feedback so it helps us to confirm what we already had in mind for improving this area of ui-kit.

[ddouglasz]

Thank you 🙏🏾

[CarlosCortizasCT]

Looks good to me 👍

Thanks!

[FilPob]

@jmcreasman thanks, looks good so far. One thing that is missing:

One of the requirements was to also decreae the font-size inside the dropdown menu when isCondensed=true This was done already in the SelecInput component as well

[jmcreasman]

@jmcreasman thanks, looks good so far. One thing that is missing:

One of the requirements was to also decreae the font-size inside the dropdown menu when isCondensed=true This was done already in the SelecInput component as well

I see what you mean, I had thought they were condensed too but after a second glance realize they are not. I'll take a look today and ping you when it's ready for your review. Thanks for the catch!

[jmcreasman]

isCondensed false:

isCondensed true:

[FilPob]

@jmcreasman that looks correct. I dont see it in the preview link though

[CarlosCortizasCT]

@jmcreasman that looks correct. I dontt see it in the preview link though

I don't see it neither, even when pulling the branch and running it locally.

@jmcreasman could it be you have some locally uncommitted/unpushed changes?

[jmcreasman]

@FilPob / @CarlosCortizasCT
I apologize, I committed the code but never pushed it. Sorry about that it should be there now.

[FilPob]

@jmcreasman Nice! the condensed one looks great now. However somehow there is also an unexpected change in the non-condensed version. The padding for each select item seems to be decreased. The non-condensed version should stay as it is currently.

[jmcreasman]

@jmcreasman Nice! the condensed one looks great now. However somehow there is also an unexpected change in the non-condensed version. The padding for each select item seems to be decreased. The non-condensed version should stay as it is currently.

@CarlosCortizasCT / @ddouglasz
Any idea what's going on here? So in order to get the drop down menu font to resize when isCondensed is true I had to add
option to createSelectableSelectStyles (which already had control/singleValue/dropdownIndicator). When I added option initially, all the styling was stripped from the drop down menu, but when I passed in base: TBase it looked like all the originally styling came back, only not all of it as @FilPob pointed out the padding now seems off. Is there something else that should be passed in too? Thanks!

[CarlosCortizasCT]

@jmcreasman Nice! the condensed one looks great now. However somehow there is also an unexpected change in the non-condensed version. The padding for each select item seems to be decreased. The non-condensed version should stay as it is currently.

@CarlosCortizasCT / @ddouglasz Any idea what's going on here? So in order to get the drop down menu font to resize when isCondensed is true I had to add option to createSelectableSelectStyles (which already had control/singleValue/dropdownIndicator). When I added option initially, all the styling was stripped from the drop down menu, but when I passed in base: TBase it looked like all the originally styling came back, only not all of it as @FilPob pointed out the padding now seems off. Is there something else that should be passed in too? Thanks!

Hi @jmcreasman

So the issue here is that we are already creating some custom styles for the select component here:

const selectStyles = createSelectStyles({
    hasWarning,
    hasError,
    menuPortalZIndex,
    isDisabled,
    isReadOnly,
    horizontalConstraint,
  });

selectStyles contains an object with the base customized styles we want to apply to all select inputs (we add them to the result of this function here).

That shared function (createSelectStyles) already contains the styles we need to apply to the option property and it already handles the condensed version but we're not passing the isCondensed value to that function so it can return the adjusted styles.

I just pushed a commit to adjust that and it seems to work fine.

@FilPob will you take another look when you have the time? 🙏

[jmcreasman]

Thanks @CarlosCortizasCT that makes sense

[FilPob]

Looks good now. Thank you all!