Skip to content

HOV-44 | Select component - MultiSelect #97

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

Merged
pruthvi2103 merged 28 commits into from
Sep 16, 2022
Merged

HOV-44 | Select component - MultiSelect #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
2903876
combo
saurabhsutar192 Aug 30, 2022
968b375
selectBox v1
saurabhsutar192 Aug 30, 2022
9c32144
placeholder and icon animations added
saurabhsutar192 Aug 30, 2022
d53b3bc
search completed
saurabhsutar192 Sep 1, 2022
45576d5
combobox complete
saurabhsutar192 Sep 1, 2022
66062e4
Accessibilty v1
saurabhsutar192 Sep 2, 2022
c7e15c6
Merge branch 'main' of https://github.com/antstackio/hover-design int…
saurabhsutar192 Sep 2, 2022
ea31ea0
Select Component docs Completed
saurabhsutar192 Sep 2, 2022
ce644aa
minor fixes
saurabhsutar192 Sep 2, 2022
e301870
Merge branch 'main' of https://github.com/antstackio/hover-design int…
saurabhsutar192 Sep 2, 2022
5589dda
Icons generalized
saurabhsutar192 Sep 2, 2022
ad67a27
key added
saurabhsutar192 Sep 2, 2022
f8152f3
Icon changes
saurabhsutar192 Sep 2, 2022
59dcb4d
Merge branch 'main' of https://github.com/antstackio/hover-design int…
saurabhsutar192 Sep 7, 2022
2fe52fb
multiSelect with Keyboard controls complete
saurabhsutar192 Sep 9, 2022
d94cdd9
docs added
saurabhsutar192 Sep 9, 2022
48a4aff
focus bug fix
saurabhsutar192 Sep 12, 2022
f988903
focus bug fix
saurabhsutar192 Sep 12, 2022
7a833a6
mdx changes
saurabhsutar192 Sep 12, 2022
38b83e5
className added
saurabhsutar192 Sep 12, 2022
21e28ee
mdx changes
saurabhsutar192 Sep 12, 2022
f751d6b
keyboard events improved
saurabhsutar192 Sep 13, 2022
424da25
types fix
saurabhsutar192 Sep 13, 2022
23004ad
more controls added
saurabhsutar192 Sep 13, 2022
9ae99b8
mdx changes
saurabhsutar192 Sep 13, 2022
267310b
mdx changes
saurabhsutar192 Sep 13, 2022
00da2be
minor changes
saurabhsutar192 Sep 13, 2022
3430754
global styles added
saurabhsutar192 Sep 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 61 additions & 19 deletions docs/docs/components/select.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,27 +213,56 @@ export const App = () => {

<App />

##### MultiSelect

```jsx
const options = [
{ label: "First", value: "first" },
{ label: "Second", value: "second", disabled: true },
{ label: "Third", value: "third" },
{ label: "Fourth", value: "fourth" },
];

<div className="App">
<Select isMulti options={options} />
</div>;
```

<Select
width="40%"
isMulti
options={[
{ label: "First", value: "first" },
{ label: "Second", value: "second", disabled: true },
{ label: "Third", value: "third" },
{ label: "Fourth", value: "fourth" },
]}
/>
<br />

> Note: All the above mentioned combinations Eg. Searchable, Cleareable, Disabled etc...are also present with MultiSelect

### Props Reference

| Attributes | Values | Default Value | Optional ? |
| :---------------- | :----------------------------: | :--------------: | ---------: |
| placeholder | `string` | `Pick one` | Yes |
| options | `Array of` **_Option Object_** | | No |
| value | `string` &#124; `number` | `horizontal` | Yes |
| height | `string` | `40px` | Yes |
| color | `string` | `#2F80ED` | Yes |
| width | `string` | `100%` | Yes |
| isSearchable | `boolean` | `false` | Yes |
| error | `boolean` | `false` | Yes |
| maxDropDownHeight | `string` | `auto` | Yes |
| borderRadius | `string` | `0` | Yes |
| onChange | `(selectedOption,event)=>void` | `()=>{}` | Yes |
| isDisabled | `boolean` | `false` | Yes |
| isClearable | `boolean` | `false` | Yes |
| nothingFoundLabel | `string` &#124; `JSX Element` | `Nothing Found!` | Yes |
| DropIcon | `JSX Element` | | Yes |
| onDropDownOpen | `()=> void ` | | Yes |
| onDropDownClose | `()=> void ` | | Yes |
| Attributes | Values | Default Value | Optional ? |
| :---------------- | :-----------------------------------------------------------------------------------------------------: | :--------------: | ---------: |
| placeholder | `string` | `Pick one` | Yes |
| options | `Array of` **_Option Object_** | | No |
| value | `string` &#124; `number` <br/> when isMulti is `true` then value is <br/> `(string` &#124; ` number)[]` | | Yes |
| isMulti | `boolean` | `false` | Yes |
| color | `string` | `#2F80ED` | Yes |
| width | `string` | `100%` | Yes |
| isSearchable | `boolean` | `false` | Yes |
| error | `boolean` | `false` | Yes |
| maxDropDownHeight | `string` | `auto` | Yes |
| borderRadius | `string` | `0` | Yes |
| onChange | `(selectedOption,event)=>void` | `()=>{}` | Yes |
| isDisabled | `boolean` | `false` | Yes |
| isClearable | `boolean` | `false` | Yes |
| nothingFoundLabel | `string` &#124; `JSX Element` | `Nothing Found!` | Yes |
| DropIcon | `JSX Element` | | Yes |
| onDropDownOpen | `()=> void ` | | Yes |
| onDropDownClose | `()=> void ` | | Yes |

### Option Object

Expand All @@ -243,3 +272,16 @@ export const App = () => {
| value | `string` &#124; `number` | No |
| disabled | `boolean` | Yes |
| ref | `MutableRefObject<HTMLDivElement>` | Yes |

### Keyboard Controls

> Keyboard controls will only work when the ** Select ** is focused (selected)

| Key | type |
| :-------- | :-------------------------------------------------------: |
| Space | `Opens Options List` |
| ArrowDown | `Next Option` |
| ArrowUp | `Previous Option` |
| Home | _ if not **disabled ** _ <br/> `First Option ` |
| End | _ if not **disabled ** _ <br/> `Last Option` |
| Backspace | _ if **isMulti ** _ <br/> `Clears the last selected pill` |
2 changes: 1 addition & 1 deletion lib/src/components/NativeSelect/NativeSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const NativeSelect: FC<NativeSelectPropsType> = ({
</select>
{!multiple && (
<Flex className={nativeSelectIconStyle} alignItems="center">
<ArrowDown />
<ArrowDown width={18} height={18} />
</Flex>
)}
</div>
Expand Down
26 changes: 26 additions & 0 deletions lib/src/components/Select/Pill/Pill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { MouseEvent } from "react";
import { Flex } from "src/components/Flex";
import CloseIcon from "src/components/_internal/Icons/Close";
import { pillIconStyles, pillStyles } from "./pill.css";

type pillPropTypes = {
value: string;
clearValue: (event: MouseEvent<SVGSVGElement>) => void;
};

export const Pill = ({ value, clearValue = () => {} }: pillPropTypes) => {
return (
<Flex className={pillStyles} alignItems="center" gap="8px">
<span>{value}</span>
<CloseIcon
className={pillIconStyles}
width={14}
height={14}
onClick={(event) => {
event.stopPropagation();
clearValue(event);
}}
/>
</Flex>
);
};
12 changes: 12 additions & 0 deletions lib/src/components/Select/Pill/pill.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { style } from "@vanilla-extract/css";

export const pillStyles = style({
padding: "6px 8px 6px 12px",
fontSize: "12px",
borderRadius: "50px",
background: "#ededed",
});

export const pillIconStyles = style({
cursor: "pointer",
});
Loading