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

fix: replace deprecated 'dropdown' with menu and select in patterns #2395

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

fix: replace deprecated 'dropdown' with menu and select in patterns #2395

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
39 changes: 30 additions & 9 deletions core/components/patterns/forms/CreateUser.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,10 +97,21 @@ const customCode = `
</Column>
<Column sizeXL={4} sizeL={4} sizeM={5} className="mr-6 mb-6">
<Label withInput={true}>Gender</Label>
<Dropdown
options={genderOptions}
onChange={(value) => this.onChange(value, 'gender')}
/>
<Select
width
onSelect={(option) => this.onChange(option.value, 'gender')}
triggerOptions={{ placeholder: "Select Gender", }}
>
<Select.List>
{genderOptions.map((item, key) => {
return (
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
{item.label}
</Select.Option>
)
})}
</Select.List>
</Select>
</Column>
<Column sizeXL={4} sizeL={4} sizeM={6} className="mr-6 mb-6">
<Label withInput={true}>Date of Birth</Label>
Expand Down Expand Up @@ -137,11 +148,21 @@ const customCode = `
</Column>
<Column sizeXL={4} sizeL={4} sizeM={5} className="mr-6 mb-6">
<Label withInput={true}>User Type</Label>
<Dropdown
options={userOptions}
placeholder="Select User Type"
onChange={(value) => this.onChange(value, 'userType')}
/>
<Select
width
onSelect={(option) => this.onChange(option.value, 'userType')}
triggerOptions={{ placeholder: "Select User Type", }}
>
<Select.List>
{userOptions.map((item, key) => {
return (
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
{item.label}
</Select.Option>
)
})}
</Select.List>
</Select>
</Column>
<Column sizeXL={3} sizeL={3} sizeM={5} className="mr-6 mb-6">
<Label withInput={true} >NPI</Label>
Expand Down
42 changes: 30 additions & 12 deletions core/components/patterns/forms/InlineForm.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,21 +126,39 @@ const customCode = `
</div>
<div className="mr-6 mb-6" style={{ width: 'var(--spacing-9)' }}>
<Label withInput={true}>Primary Care Physician</Label>
<Dropdown
icon="add_box"
placeholder="00000"
options={options}
onChange={(option) => this.onChange(option, 'pcp')}
/>
<Select
width
onSelect={(option) => this.onChange(option.value, 'pcp')}
triggerOptions={{ placeholder: "00000", icon: "add_box", }}
>
<Select.List>
{options.map((item, key) => {
return (
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
{item.label}
</Select.Option>
)
})}
</Select.List>
</Select>
</div>
<div className="mr-6 mb-6" style={{ width: 'var(--spacing-9)' }}>
<Label withInput={true}>Region</Label>
<Dropdown
icon="flag"
placeholder="00000"
options={options}
onChange={(option) => this.onChange(option, 'region')}
/>
<Select
width
onSelect={(option) => this.onChange(option.value, 'region')}
triggerOptions={{ placeholder: "00000", icon: "flag", }}
>
<Select.List>
{options.map((item, key) => {
return (
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
{item.label}
</Select.Option>
)
})}
</Select.List>
</Select>
</div>
</div>
<Button
Expand Down
23 changes: 17 additions & 6 deletions core/components/patterns/forms/InlineLabelForm.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,17 +70,28 @@ const customCode = `
</Column>
<Column size={8} className="d-flex">
<div className="mr-5 w-25">
<Dropdown
options={languages}
onChange={(value) => {
<Select
width
triggerOptions={{ withClearButton: false }}
onSelect={(option) => {
const updatedData = {
...this.state.data,
language: value,
defaultLanguage: defaultLanguage !== '' ? value : defaultLanguage,
language: option.value,
defaultLanguage: defaultLanguage !== '' ? option.value : defaultLanguage,
};
this.setState({data: updatedData})
}}
/>
>
<Select.List>
{languages.map((item, key) => {
return (
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
{item.label}
</Select.Option>
)
})}
</Select.List>
</Select>
</div>
<Checkbox
name="defaultLanguage"
Expand Down
110 changes: 88 additions & 22 deletions core/components/patterns/forms/StepperForm.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,17 +109,37 @@ const customCode = `
The system automatically creates collection for multiple support.
</Text>
<div className="w-50 mt-4">
<Dropdown
options={options}
placeholder="Input Collection 1"
<Select
width
className="mb-4"
onChange={(value) => this.onChangeOutput(value, 'collection1')}
/>
<Dropdown
options={options}
placeholder="Input Collection 2"
onChange={(value) => this.onChangeOutput(value, 'collection2')}
/>
triggerOptions={{ placeholder: "Input Collection 1" }}
onSelect={(option) => this.onChangeOutput(option.value, 'collection1')}
>
<Select.List>
{options.map((item, key) => {
return (
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
{item.label}
</Select.Option>
)
})}
</Select.List>
</Select>
<Select
width
triggerOptions={{ placeholder: "Input Collection 2" }}
onSelect={(option) => this.onChangeOutput(option.value, 'collection2')}
>
<Select.List>
{options.map((item, key) => {
return (
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
{item.label}
</Select.Option>
)
})}
</Select.List>
</Select>
</div>
<div className="d-flex mr-3 mt-8 mb-2">
<Text weight="strong" className="mr-4">Destination</Text>
Expand All @@ -130,11 +150,21 @@ const customCode = `
</Text>
<div className="w-50 mt-6">
<Label withInput={true}>Destination Collection</Label>
<Dropdown
options={options}
placeholder="Select Destination"
onChange={(value) => this.onChangeOutput(value, 'collection')}
/>
<Select
width
triggerOptions={{ placeholder: "Select Destination" }}
onSelect={(option) => this.onChangeOutput(option.value, 'collection')}
>
<Select.List>
{options.map((item, key) => {
return (
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
{item.label}
</Select.Option>
)
})}
</Select.List>
</Select>
</div>
<div className="mt-6 w-50">
<Label withInput={true} required>Prefix</Label>
Expand All @@ -148,9 +178,35 @@ const customCode = `
</div>
<div className="w-25 mt-6">
<Label withInput={true} required>Retention</Label>
<Dropdown options={options} onChange={(value) => this.onChangeOutput(value, 'retention')} />
<Select
width
onSelect={(option) => this.onChangeOutput(option.value, 'retention')}
>
<Select.List>
{options.map((item, key) => {
return (
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
{item.label}
</Select.Option>
)
})}
</Select.List>
</Select>
<Label className="mt-6" withInput={true}>Visibility Clarification</Label>
<Dropdown options={options} onChange={(value) => this.onChangeOutput(value, 'clarification')} />
<Select
width
onSelect={(option) => this.onChangeOutput(option.value, 'clarification')}
>
<Select.List>
{options.map((item, key) => {
return (
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
{item.label}
</Select.Option>
)
})}
</Select.List>
</Select>
</div>
</div>
<div className={value !== 'Add_Configuration' ? 'd-none' : ''}>
Expand All @@ -165,14 +221,24 @@ const customCode = `
</div>
<div className="w-25 mt-6">
<Label withInput={true} required>Mode</Label>
<Dropdown
options={options}
onChange={(value) => {
<Select
width
onSelect={(option) => {
this.setState({
configuration: { ...this.state.configuration, mode: value }
configuration: { ...this.state.configuration, mode: option.value }
});
}}
/>
>
<Select.List>
{options.map((item, key) => {
return (
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
{item.label}
</Select.Option>
)
})}
</Select.List>
</Select>
</div>
<div className="mt-6 w-50">
<Label withInput={true} required>Regex</Label>
Expand Down
24 changes: 22 additions & 2 deletions core/components/patterns/forms/TimePeriodForm.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,31 @@ const customCode = `
<div className="d-flex mt-5 mb-4">
<div className="mr-6" style={{ width: 'var(--spacing-8)' }}>
<Label withInput={true}>Region</Label>
<Dropdown options={options} />
<Select width>
<Select.List>
{options.map((item, key) => {
return (
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
{item.label}
</Select.Option>
)
})}
</Select.List>
</Select>
</div>
<div style={{ width: 'var(--spacing-9)' }}>
<Label withInput={true}>Organization</Label>
<Dropdown options={options} />
<Select width>
<Select.List>
{options.map((item, key) => {
return (
<Select.Option key={key} option={{ label: item.label, value: item.value }}>
{item.label}
</Select.Option>
)
})}
</Select.List>
</Select>
</div>
</div>
<Link target="_blank" href="#">Add organizations</Link>
Expand Down
Loading
Loading