Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

filters design modifications for async select input #2980

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

ddouglasz
Copy link
Contributor

@ddouglasz ddouglasz commented Oct 30, 2024

Summary

This pull request introduces new properties to handle optional styling for the async-select-input when used as a filter component. The most important changes include the addition of the filter appearance option and the incorporation of a search icon when this appearance is selected.

⚠️ This is a similar change to the ones in the select input PR, which should be merged first before this.

Filter-specific changes:

  • appearance: "filter" - new prop
  • optionStyle - new prop
  • always open options for select input
  • select input should not hold text
  • select utils updates for checkbox component
  • Replace "Select..." placeholder with "Search" when placeholder prop is not passed.
  • searchable options

@ddouglasz ddouglasz requested a review from a team as a code owner October 30, 2024 15:23
@ddouglasz ddouglasz requested review from stephsprinkle, jaikamat, tylermorrisford, ByronDWall and misama-ct and removed request for a team October 30, 2024 15:23
Copy link

changeset-bot bot commented Oct 30, 2024

🦋 Changeset detected

Latest commit: 66e84c2

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

This PR includes changesets to release 98 packages
Name Type
@commercetools-uikit/async-select-input Minor
@commercetools-uikit/select-utils Minor
@commercetools-uikit/data-table-manager Minor
@commercetools-uikit/async-select-field Minor
@commercetools-uikit/search-select-input Minor
@commercetools-uikit/inputs Minor
@commercetools-uikit/async-creatable-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/localized-money-input Minor
@commercetools-uikit/money-input Minor
@commercetools-uikit/select-input Minor
@commercetools-uikit/selectable-search-input Minor
@commercetools-uikit/data-table Minor
@commercetools-frontend/ui-kit Minor
@commercetools-uikit/fields Minor
@commercetools-uikit/search-select-field Minor
@commercetools-uikit/async-creatable-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/money-field Minor
@commercetools-uikit/filters Minor
@commercetools-uikit/pagination Minor
@commercetools-uikit/select-field 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/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/primary-action-dropdown Minor
@commercetools-uikit/progress-bar Minor
@commercetools-uikit/quick-filters 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/localized-multiline-text-field Minor
@commercetools-uikit/localized-text-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/text-field Minor
@commercetools-uikit/time-field Minor
@commercetools-uikit/input-utils Minor
@commercetools-uikit/localized-multiline-text-input Minor
@commercetools-uikit/localized-rich-text-input Minor
@commercetools-uikit/localized-text-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-text-input 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/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

Copy link

vercel bot commented Oct 30, 2024

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 Nov 1, 2024 10:28am

? 'Search'
: intl.formatMessage(messages.placeholder);

// TODO: uncomment to replace placeholder logic once select-input PR for this has been merged.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When the select-input PR is merged, I will uncomment this since they will be using the same messages keys.

@ddouglasz
Copy link
Contributor Author

There is a slight visual regression in the input field, which has been fixed in the select-uitils in here, so when that is merged, this will work as expected.

@@ -144,3 +144,35 @@ BasicExample.args = {
showOptionGroupDivider: false,
iconLeft: undefined,
};

Copy link
Contributor Author

@ddouglasz ddouglasz Oct 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is mainly for testing simplicity and will be removed before merging.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason, label/placeholder and input break lines after selection:

image
image

@@ -144,3 +144,35 @@ BasicExample.args = {
showOptionGroupDivider: false,
iconLeft: undefined,
};

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason, label/placeholder and input break lines after selection:

image
image

// const placeholder =
// props.appearance === 'filter' && !props.placeholder
// ? intl.formatMessage(messages.selectInputAsFilterPlaceholder)
// : props.placeholder || intl.formatMessage(messages.placeholder);
Copy link
Contributor

@misama-ct misama-ct Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can simplify this condition. Only if there is no props.placeholder you need to check which default-placeholder to pick:

const placeholder = props.placeholder || intl.formatMessage(props.appearance === 'filter' ? messages.selectInputAsFilterPlaceholder : messages.placeholder);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated here: 66e84c2
Thank you

? false
: props.controlShouldRenderValue
}
appea
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

some leftover

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated here: 66e84c2
Thank you

@ddouglasz
Copy link
Contributor Author

ddouglasz commented Nov 1, 2024

For some reason, label/placeholder and input break lines after selection:

Thank you, I mentioned it here 🙂. I fixed it in the utils in the first PR and since they all share the same util, I will wait for when that is merged and it will handle it in this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants