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

#535 - Picker - Added possibility to hide clear button, docs improvements #545

Merged
merged 3 commits into from
May 17, 2023
Merged

#535 - Picker - Added possibility to hide clear button, docs improvements #545

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
45856ef
added possibility to hide clear button, docs improvements
marcinsawicki May 16, 2023
55f573a
missed change
marcinsawicki May 16, 2023
c644ebc
Merge branch 'v1' into feature/535
marcinsawicki May 16, 2023
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
242 changes: 160 additions & 82 deletions packages/react-components/src/components/Picker/Picker.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { IPickerListItem } from './PickerList';

import './Picker.stories.css';
import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
import noop from '../../utils/noop';

export default {
title: 'Components/Picker',
Expand All @@ -15,6 +16,12 @@ export default {
componentSubtitle: `TBD`,
},
argTypes: {
options: {
control: false,
},
selected: {
control: false,
},
onSelect: { action: 'changed' },
},
} as ComponentMeta<typeof Picker>;
Expand Down Expand Up @@ -48,33 +55,48 @@ Default.args = {
options: defaultPickerOptions,
};

export const States = (args: IPickerProps): React.ReactElement => (
export const States = (): React.ReactElement => (
<div style={{ ...commonWidth, marginBottom: 100 }}>
<StoryDescriptor title="Basic">
<PickerComponent {...args} />
<PickerComponent options={defaultPickerOptions} onSelect={noop} />
</StoryDescriptor>
<StoryDescriptor title="Multi select + Basic">
<PickerComponent {...args} type="multi" />
<PickerComponent
options={defaultPickerOptions}
onSelect={noop}
type="multi"
/>
</StoryDescriptor>
<StoryDescriptor title="Disabled">
<PickerComponent {...args} disabled />
<PickerComponent
options={defaultPickerOptions}
onSelect={noop}
disabled
/>
</StoryDescriptor>
<StoryDescriptor title="Error">
<PickerComponent {...args} error />
<PickerComponent options={defaultPickerOptions} onSelect={noop} error />
</StoryDescriptor>
<StoryDescriptor title="Error + Disabled">
<PickerComponent {...args} disabled error />
<PickerComponent
options={defaultPickerOptions}
onSelect={noop}
disabled
error
/>
</StoryDescriptor>
<StoryDescriptor title="Disabled + Selected option">
<PickerComponent
{...args}
options={defaultPickerOptions}
onSelect={noop}
disabled
selected={[{ key: 'two', name: 'Option two' }]}
/>
</StoryDescriptor>
<StoryDescriptor title="Multi select + Disabled + Selected option">
<PickerComponent
{...args}
options={defaultPickerOptions}
onSelect={noop}
type="multi"
disabled
selected={[
Expand All @@ -85,93 +107,149 @@ export const States = (args: IPickerProps): React.ReactElement => (
</StoryDescriptor>
</div>
);
States.args = {
options: defaultPickerOptions,
label: 'Example label',
};

export const PickerWithGroupedOptions = (
args: IPickerProps
): React.ReactElement => (
export const PickerWithGroupedOptions = (): React.ReactElement => (
<div style={{ ...commonWidth, marginBottom: 320 }}>
<PickerComponent {...args} />
<PickerComponent options={defaultExtendedOptions} onSelect={noop} />
</div>
);
PickerWithGroupedOptions.args = {
options: defaultExtendedOptions,
};

const CustomPickerOption: React.FC = ({ children }) => (
<div className="custom-picker-option">{children}</div>
);

export const PickerWithOptionsAsCustomElements = (
args: IPickerProps
): React.ReactElement => (
export const PickerWithOptionsAsCustomElements = (): React.ReactElement => (
<div style={{ ...commonWidth, marginBottom: 320 }}>
<StoryDescriptor title="Single select">
<PickerComponent {...args} />
<PickerComponent
options={[
{
key: 'one',
name: 'Example custom element one',
customElement: {
listItemBody: (
<CustomPickerOption>
<img
className="image"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div>
<div className="title">Example custom element one</div>
<div className="description">Example custom element</div>
</div>
</CustomPickerOption>
),
selectedItemBody: (
<CustomPickerOption>
<img
className="image selected"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div className="title selected">
Example custom element one
</div>
</CustomPickerOption>
),
},
},
{
key: 'two',
name: 'Example custom element two',
customElement: {
listItemBody: (
<CustomPickerOption>
<img
className="image"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div>
<div className="title">Example custom element two</div>
<div className="description">Example custom element</div>
</div>
</CustomPickerOption>
),
selectedItemBody: (
<CustomPickerOption>
<img
className="image selected"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div className="title selected">
Example custom element two
</div>
</CustomPickerOption>
),
},
},
]}
onSelect={noop}
/>
</StoryDescriptor>
<StoryDescriptor title="Multi select">
<PickerComponent {...args} type="multi" />
<PickerComponent
options={[
{
key: 'one',
name: 'Example custom element one',
customElement: {
listItemBody: (
<CustomPickerOption>
<img
className="image"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div>
<div className="title">Example custom element one</div>
<div className="description">Example custom element</div>
</div>
</CustomPickerOption>
),
selectedItemBody: (
<CustomPickerOption>
<img
className="image selected"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div className="title selected">
Example custom element one
</div>
</CustomPickerOption>
),
},
},
{
key: 'two',
name: 'Example custom element two',
customElement: {
listItemBody: (
<CustomPickerOption>
<img
className="image"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div>
<div className="title">Example custom element two</div>
<div className="description">Example custom element</div>
</div>
</CustomPickerOption>
),
selectedItemBody: (
<CustomPickerOption>
<img
className="image selected"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div className="title selected">
Example custom element two
</div>
</CustomPickerOption>
),
},
},
]}
type="multi"
onSelect={noop}
/>
</StoryDescriptor>
</div>
);
PickerWithOptionsAsCustomElements.args = {
options: [
{
key: 'one',
name: 'Example custom element one',
customElement: {
listItemBody: (
<CustomPickerOption>
<img
className="image"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div>
<div className="title">Example custom element one</div>
<div className="description">Example custom element</div>
</div>
</CustomPickerOption>
),
selectedItemBody: (
<CustomPickerOption>
<img
className="image selected"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div className="title selected">Example custom element one</div>
</CustomPickerOption>
),
},
},
{
key: 'two',
name: 'Example custom element two',
customElement: {
listItemBody: (
<CustomPickerOption>
<img
className="image"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div>
<div className="title">Example custom element two</div>
<div className="description">Example custom element</div>
</div>
</CustomPickerOption>
),
selectedItemBody: (
<CustomPickerOption>
<img
className="image selected"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div className="title selected">Example custom element two</div>
</CustomPickerOption>
),
},
},
],
};
51 changes: 51 additions & 0 deletions packages/react-components/src/components/Picker/Picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,69 @@ const baseClass = 'picker';
export type PickerType = 'single' | 'multi';

export interface IPickerProps {
/**
* Specify the custom id
*/
id?: string;
/**
* The CSS class for picker container
*/
className?: string;
/**
* Specify whether the picker should be disabled
*/
disabled?: boolean;
/**
* Specify whether the picker should be in error state
*/
error?: boolean;
/**
* Array of picker options
*/
options: IPickerListItem[];
/**
* Array of picker selected options
*/
selected?: IPickerListItem[] | null;
/**
* Specify the picker size
*/
size?: Size;
/**
* Set the dismiss icon size in tags when `multi` type is enabled
*/
tagIconSize?: IconSize;
/**
* Specify the placeholder for search input
*/
placeholder?: string;
/**
* Specify whether the option select is required
*/
isRequired?: boolean;
/**
* Text if no search result were found
*/
noSearchResultText?: string;
/**
* Text for `select all` option which will be visible if defined in multi select mode
*/
selectAllOptionText?: string;
/**
* Set `multi` to specify whether the picker should allow to multi selection
*/
type?: PickerType;
/**
* Set to disable search input
*/
searchDisabled?: boolean;
/**
* Set to hide clear selection button
*/
hideClearButton?: boolean;
/**
* Callback called after item selection
*/
onSelect: (selectedItems: IPickerListItem[] | null) => void;
}

Expand All @@ -47,6 +96,7 @@ export const Picker: React.FC<IPickerProps> = ({
selectAllOptionText,
type = 'single',
searchDisabled = false,
hideClearButton,
onSelect,
...props
}) => {
Expand Down Expand Up @@ -192,6 +242,7 @@ export const Picker: React.FC<IPickerProps> = ({
isRequired={isRequired}
isMultiSelect={type === 'multi'}
size={size}
hideClearButton={hideClearButton}
onTrigger={handleTrigger}
onClear={handleClear}
>
Expand Down
Loading