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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 15 commits into from
May 13, 2024
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
f29fd44
feat(selectable-search): add isCondensed prop to input
May 1, 2024
cdff306
feat(selectable-search-input): set height of SelectableSelect when is…
Sarah4VT May 2, 2024
d67698c
feat(selectable-search): add readme and changeset
May 3, 2024
49899ce
Merge branch 'main' into PANGOLIN-3713-Selectable-Search-Input-add-is…
jmcreasman May 3, 2024
9c110dc
Merge branch 'main' into PANGOLIN-3713-Selectable-Search-Input-add-is…
ddouglasz May 3, 2024
8c7d4c0
Merge branch 'main' into PANGOLIN-3713-Selectable-Search-Input-add-is…
jmcreasman May 7, 2024
e60401e
feat(selectable-search): add isCondensed fontsize for select dropdown…
May 7, 2024
2f99892
Merge branch 'main' into PANGOLIN-3713-Selectable-Search-Input-add-is…
jmcreasman May 8, 2024
06bfed6
fix(selectable-search-input): fix dropdown styles
CarlosCortizasCT May 9, 2024
796bd2d
refactor(selectable-search-input): simplify select styles
CarlosCortizasCT May 9, 2024
902c430
Merge branch 'main' into PANGOLIN-3713-Selectable-Search-Input-add-is…
jmcreasman May 9, 2024
79aaa66
Merge branch 'main' into PANGOLIN-3713-Selectable-Search-Input-add-is…
jmcreasman May 9, 2024
3460910
Merge branch 'main' into PANGOLIN-3713-Selectable-Search-Input-add-is…
jmcreasman May 9, 2024
cdeed86
Merge branch 'main' into PANGOLIN-3713-Selectable-Search-Input-add-is…
CarlosCortizasCT May 13, 2024
b3dc39c
Merge branch 'main' into PANGOLIN-3713-Selectable-Search-Input-add-is…
CarlosCortizasCT May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fresh-pens-study.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@commercetools-uikit/selectable-search-input': minor
---

Add isCondensed prop that when set to true, condenses the input height, icon size and font size.
1 change: 1 addition & 0 deletions packages/components/inputs/selectable-search-input/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ export default Example;
| `hasWarning` | `boolean` | | | Indicates if the input has warning values |
| `placeholder` | `string` | | | Placeholder text for the input |
| `isClearable` | `boolean` | | `true` | Indicates if the input should be cleared when the clear button is clicked.
Defaults to true. |
| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant |
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`10 , 11 , 12 , 13 , 14 , 15 , 16 , 'scale' , 'auto'` | | `'scale'` | Horizontal size limit of the input fields. |
| `options` | `union`<br/>Possible values:<br/>`TOption[] , TOptionObject[]` | | `[]` | Array of options that populate the select menu |
| `menuPortalZIndex` | `number` | | `1` | z-index value for the menu portal&#xA;<br>&#xA;Use in conjunction with `menuPortalTarget` |
Expand Down
1 change: 1 addition & 0 deletions packages/components/inputs/selectable-search-input/src/selectable-search-input.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ storiesOf('Components|Inputs', module)
isDisabled={boolean('isDisabled', false)}
isReadOnly={boolean('isReadOnly', false)}
isClearable={boolean('isClearable', true)}
isCondensed={boolean('isCondensed', false)}
showSubmitButton={boolean('showSubmitButton', true)}
hasError={boolean('hasError', false)}
hasWarning={boolean('hasWarning', false)}
Expand Down
11 changes: 10 additions & 1 deletion packages/components/inputs/selectable-search-input/src/selectable-search-input.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { designTokens } from '@commercetools-uikit/design-system';
import { createSelectStyles } from '@commercetools-uikit/select-utils';

type TInputProps = {
isCondensed?: boolean;
isDisabled?: boolean;
hasError?: boolean;
hasWarning?: boolean;
Expand Down Expand Up @@ -161,7 +162,9 @@ const getSelectableSearchInputContainerStyles = (props: TInputProps) => [
border: 1px solid ${getInputContainerBorderColor(props)};
border-radius: ${designTokens.borderRadiusForInput};
box-shadow: ${getInputBoxShadow(props)};
height: ${designTokens.heightForInput};
height: ${props.isCondensed
? `${designTokens.heightForInputAsSmall}`
: `${designTokens.heightForInput}`};
box-sizing: border-box;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
Expand Down Expand Up @@ -206,6 +209,7 @@ type TBase = {
};

type TCreateSelectableSelectStyles = {
isCondensed?: boolean;
isDisabled?: boolean;
hasError?: boolean;
hasWarning?: boolean;
Expand Down Expand Up @@ -234,6 +238,7 @@ type TCreateSelectableSelectStyles = {
const createSelectableSelectStyles = ({
hasWarning,
hasError,
isCondensed,
isDisabled,
isReadOnly,
menuPortalZIndex,
Expand All @@ -258,6 +263,10 @@ const createSelectableSelectStyles = ({
borderBottomRightRadius: '0',
borderRight: '0',
height: '100%',
fontSize: isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
minHeight: isCondensed
? designTokens.heightForInputAsSmall
: designTokens.heightForInput,
borderColor: (() => {
if (isDisabled)
return `${designTokens.borderColorForInputWhenDisabled} !important`;
Expand Down
8 changes: 7 additions & 1 deletion packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,10 @@ export type TSelectableSearchInputProps = {
*
*/
isClearable?: boolean;
/**
* Use this property to reduce the paddings of the component for a ui compact variant
*/
isCondensed?: boolean;
/**
* Horizontal size limit of the input fields.
*/
Expand Down Expand Up @@ -415,6 +419,7 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => {
id={SelectableSearchInput.getDropdownId(selectablSearchInputId)}
name={getDropdownName(props.name)}
dropdownHasFocus={dropdownHasFocus}
isCondensed={props.isCondensed ?? false}
handleDropdownFocus={handleDropdownFocus}
handleDropdownBlur={handleDropdownBlur}
textInputRef={textInputRef}
Expand Down Expand Up @@ -470,7 +475,7 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => {
!props.isReadOnly && (
<SecondaryIconButton
icon={<CloseIcon />}
size="medium"
size={props.isCondensed ? 'small' : 'medium'}
label={'clear-button'}
onClick={handleClear}
css={getClearIconButtonStyles(props)}
Expand All @@ -479,6 +484,7 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => {
{props.showSubmitButton && (
<SecondaryIconButton
icon={<SearchIcon />}
size={props.isCondensed ? 'medium' : 'big'}
label={'search-button'}
onClick={handleSubmit}
css={getSearchIconButtonStyles(props)}
Expand Down
11 changes: 11 additions & 0 deletions ...ges/components/inputs/selectable-search-input/src/selectable-search-input.visualroute.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,5 +152,16 @@ export const component = () => (
showSubmitButton={false}
/>
</Spec>
<Spec label="is condensed">
<SelectableSearchInput
value={value}
onChange={() => {}}
isCondensed={true}
horizontalConstraint={16}
onSubmit={() => {}}
onReset={() => {}}
options={options}
/>
</Spec>
</Suite>
);
2 changes: 2 additions & 0 deletions packages/components/inputs/selectable-search-input/src/selectable-select.tsx
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

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

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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.

Copy link
Contributor

Choose a reason for hiding this comment

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

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.

Copy link
Contributor

Choose a reason for hiding this comment

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

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.

Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const SingleValue = ({ id, dataProps, ...props }: TSingleValue) => {
};
type TSelectableSelect = {
dropdownHasFocus: boolean;
isCondensed: boolean;
handleDropdownFocus: () => void;
handleDropdownBlur: () => void;
textInputRef: React.RefObject<HTMLInputElement>;
Expand All @@ -42,6 +43,7 @@ const SelectableSelect = (props: TSelectableSelect) => {
const dropdownStyles = createSelectableSelectStyles({
hasWarning: props.hasWarning,
hasError: props.hasError,
isCondensed: props.isCondensed,
isDisabled: props.isDisabled,
isReadOnly: props.isReadOnly,
menuPortalZIndex: props.menuPortalZIndex,
Expand Down