-
Notifications
You must be signed in to change notification settings - Fork 25
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
base: main
Are you sure you want to change the base?
Conversation
…ct when used in a filter component
…ct when used in a filter component
…ct when used in a filter component
🦋 Changeset detectedLatest commit: 66e84c2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 98 packages
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 |
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
? 'Search' | ||
: intl.formatMessage(messages.placeholder); | ||
|
||
// TODO: uncomment to replace placeholder logic once select-input PR for this has been merged. |
There was a problem hiding this comment.
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.
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, | |||
}; | |||
|
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -144,3 +144,35 @@ BasicExample.args = { | |||
showOptionGroupDivider: false, | |||
iconLeft: undefined, | |||
}; | |||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// const placeholder = | ||
// props.appearance === 'filter' && !props.placeholder | ||
// ? intl.formatMessage(messages.selectInputAsFilterPlaceholder) | ||
// : props.placeholder || intl.formatMessage(messages.placeholder); |
There was a problem hiding this comment.
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);
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
some leftover
There was a problem hiding this comment.
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
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. |
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.Filter-specific changes: