From 595efa6e43a7b0a3650ca70cc283594c815cb821 Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Mon, 27 Mar 2023 10:29:56 -0700 Subject: [PATCH 01/24] chore: example of broken Autocomplete behavior --- packages/odyssey-react-mui/src/index.ts | 4 + .../odyssey-mui/Autocomplete/Autocomplete.mdx | 13 ++ .../Autocomplete/Autocomplete.stories.tsx | 186 ++++++++++++++++++ 3 files changed, 203 insertions(+) create mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx create mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx diff --git a/packages/odyssey-react-mui/src/index.ts b/packages/odyssey-react-mui/src/index.ts index f32b40a56e..2ab13bcbc2 100644 --- a/packages/odyssey-react-mui/src/index.ts +++ b/packages/odyssey-react-mui/src/index.ts @@ -13,6 +13,7 @@ export { Alert, AlertTitle, + Autocomplete, Box, Button, Chip, @@ -58,6 +59,7 @@ export { TableHead, TableRow, TableSortLabel, + TextField as TextFieldMui, ThemeProvider as MuiThemeProvider, Tooltip, Typography, @@ -66,6 +68,7 @@ export { export type { AlertProps, AlertTitleProps, + AutocompleteProps, BoxProps, ButtonProps, ChipProps, @@ -111,6 +114,7 @@ export type { TableProps, TableRowProps, TableSortLabelProps, + TextFieldProps as TextFieldMuiProps, ThemeOptions, TooltipProps, TypographyProps, diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx new file mode 100644 index 0000000000..544be04d72 --- /dev/null +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx @@ -0,0 +1,13 @@ +import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"; + + + +# Autocomplete + + + + + + + + diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx new file mode 100644 index 0000000000..55817ddcfc --- /dev/null +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx @@ -0,0 +1,186 @@ +/*! + * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import { Autocomplete, TextField, TextFieldMui } from "@okta/odyssey-react-mui"; +import { ComponentMeta, ComponentStory } from "@storybook/react"; + +import { MuiThemeDecorator } from "../../../../.storybook/components"; +import AutocompleteMdx from "./Autocomplete.mdx"; + +const storybookMeta: ComponentMeta = { + title: `MUI Components/Forms/Autocomplete`, + component: Autocomplete, + parameters: { + docs: { + page: AutocompleteMdx, + }, + }, + argTypes: {}, + decorators: [MuiThemeDecorator], +}; + +export default storybookMeta; + +// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top +const top100Films = [ + { label: "The Shawshank Redemption", year: 1994 }, + { label: "The Godfather", year: 1972 }, + { label: "The Godfather: Part II", year: 1974 }, + { label: "The Dark Knight", year: 2008 }, + { label: "12 Angry Men", year: 1957 }, + { label: "Schindler's List", year: 1993 }, + { label: "Pulp Fiction", year: 1994 }, + { + label: "The Lord of the Rings: The Return of the King", + year: 2003, + }, + { label: "The Good, the Bad and the Ugly", year: 1966 }, + { label: "Fight Club", year: 1999 }, + { + label: "The Lord of the Rings: The Fellowship of the Ring", + year: 2001, + }, + { + label: "Star Wars: Episode V - The Empire Strikes Back", + year: 1980, + }, + { label: "Forrest Gump", year: 1994 }, + { label: "Inception", year: 2010 }, + { + label: "The Lord of the Rings: The Two Towers", + year: 2002, + }, + { label: "One Flew Over the Cuckoo's Nest", year: 1975 }, + { label: "Goodfellas", year: 1990 }, + { label: "The Matrix", year: 1999 }, + { label: "Seven Samurai", year: 1954 }, + { + label: "Star Wars: Episode IV - A New Hope", + year: 1977, + }, + { label: "City of God", year: 2002 }, + { label: "Se7en", year: 1995 }, + { label: "The Silence of the Lambs", year: 1991 }, + { label: "It's a Wonderful Life", year: 1946 }, + { label: "Life Is Beautiful", year: 1997 }, + { label: "The Usual Suspects", year: 1995 }, + { label: "Léon: The Professional", year: 1994 }, + { label: "Spirited Away", year: 2001 }, + { label: "Saving Private Ryan", year: 1998 }, + { label: "Once Upon a Time in the West", year: 1968 }, + { label: "American History X", year: 1998 }, + { label: "Interstellar", year: 2014 }, + { label: "Casablanca", year: 1942 }, + { label: "City Lights", year: 1931 }, + { label: "Psycho", year: 1960 }, + { label: "The Green Mile", year: 1999 }, + { label: "The Intouchables", year: 2011 }, + { label: "Modern Times", year: 1936 }, + { label: "Raiders of the Lost Ark", year: 1981 }, + { label: "Rear Window", year: 1954 }, + { label: "The Pianist", year: 2002 }, + { label: "The Departed", year: 2006 }, + { label: "Terminator 2: Judgment Day", year: 1991 }, + { label: "Back to the Future", year: 1985 }, + { label: "Whiplash", year: 2014 }, + { label: "Gladiator", year: 2000 }, + { label: "Memento", year: 2000 }, + { label: "The Prestige", year: 2006 }, + { label: "The Lion King", year: 1994 }, + { label: "Apocalypse Now", year: 1979 }, + { label: "Alien", year: 1979 }, + { label: "Sunset Boulevard", year: 1950 }, + { + label: + "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb", + year: 1964, + }, + { label: "The Great Dictator", year: 1940 }, + { label: "Cinema Paradiso", year: 1988 }, + { label: "The Lives of Others", year: 2006 }, + { label: "Grave of the Fireflies", year: 1988 }, + { label: "Paths of Glory", year: 1957 }, + { label: "Django Unchained", year: 2012 }, + { label: "The Shining", year: 1980 }, + { label: "WALL·E", year: 2008 }, + { label: "American Beauty", year: 1999 }, + { label: "The Dark Knight Rises", year: 2012 }, + { label: "Princess Mononoke", year: 1997 }, + { label: "Aliens", year: 1986 }, + { label: "Oldboy", year: 2003 }, + { label: "Once Upon a Time in America", year: 1984 }, + { label: "Witness for the Prosecution", year: 1957 }, + { label: "Das Boot", year: 1981 }, + { label: "Citizen Kane", year: 1941 }, + { label: "North by Northwest", year: 1959 }, + { label: "Vertigo", year: 1958 }, + { + label: "Star Wars: Episode VI - Return of the Jedi", + year: 1983, + }, + { label: "Reservoir Dogs", year: 1992 }, + { label: "Braveheart", year: 1995 }, + { label: "M", year: 1931 }, + { label: "Requiem for a Dream", year: 2000 }, + { label: "Amélie", year: 2001 }, + { label: "A Clockwork Orange", year: 1971 }, + { label: "Like Stars on Earth", year: 2007 }, + { label: "Taxi Driver", year: 1976 }, + { label: "Lawrence of Arabia", year: 1962 }, + { label: "Double Indemnity", year: 1944 }, + { + label: "Eternal Sunshine of the Spotless Mind", + year: 2004, + }, + { label: "Amadeus", year: 1984 }, + { label: "To Kill a Mockingbird", year: 1962 }, + { label: "Toy Story 3", year: 2010 }, + { label: "Logan", year: 2017 }, + { label: "Full Metal Jacket", year: 1987 }, + { label: "Dangal", year: 2016 }, + { label: "The Sting", year: 1973 }, + { label: "2001: A Space Odyssey", year: 1968 }, + { label: "Singin' in the Rain", year: 1952 }, + { label: "Toy Story", year: 1995 }, + { label: "Bicycle Thieves", year: 1948 }, + { label: "The Kid", year: 1921 }, + { label: "Inglourious Basterds", year: 2009 }, + { label: "Snatch", year: 2000 }, + { label: "3 Idiots", year: 2009 }, + { label: "Monty Python and the Holy Grail", year: 1975 }, +]; + +const Template: ComponentStory = () => { + return ( + } + /> + ); +}; + +const MuiTemplate: ComponentStory = () => { + return ( + } + /> + ); +}; + +export const Default = Template.bind({}); +Default.args = {}; + +export const Mui = MuiTemplate.bind({}); +Mui.args = {}; From 5e632db2d12daed711a7c32dcdf6aa872a840172 Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Mon, 27 Mar 2023 10:36:46 -0700 Subject: [PATCH 02/24] chore: label examples in doc --- .../src/components/odyssey-mui/Autocomplete/Autocomplete.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx index 544be04d72..48ee49c7aa 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx @@ -4,10 +4,14 @@ import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"; # Autocomplete +## Using Odyssey's TextField + +## Using MUI's TextField + From 5b345e3ddf25defdf4e31f05bef4af177cf7fefc Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Mon, 27 Mar 2023 11:42:04 -0700 Subject: [PATCH 03/24] chore: set up working examples for all states --- .../src/theme/components.tsx | 3 - .../odyssey-mui/Autocomplete/Autocomplete.mdx | 207 +++++++++++++++- .../Autocomplete/Autocomplete.stories.tsx | 221 +++++++++++++++++- 3 files changed, 416 insertions(+), 15 deletions(-) diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 1f2a4af83e..490e1cbfe0 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -1046,9 +1046,6 @@ export const components: ThemeOptions["components"] = { }, }, MuiInputAdornment: { - defaultProps: { - variant: "outlined", - }, styleOverrides: { root: ({ theme, ownerState }) => ({ display: "flex", diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx index 48ee49c7aa..09c0fc4da7 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx @@ -4,14 +4,213 @@ import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"; # Autocomplete -## Using Odyssey's TextField - -## Using MUI's TextField +## Variant Behaviors + +Examples of MUI's variant behaviors to help us decide and style our own offerings. + +Note, some of these behaviors may currently be broken or have unsuitable UI. + +### autoHighlight + +If `true`, the first option is automatically highlighted. + +Default: `true` + + + + + +### autoSelect + +If `true`, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input. + +Default: `false` + + + + + +### blurOnSelect + +Control if the input should be blurred when an option is selected: + +- `false` the input is not blurred. +- `true` the input is always blurred. +- `touch` the input is blurred after a touch event. +- `mouse` the input is blurred after a mouse event. + +Default: `false` + + + + + +### clearOnBlur + +If `true`, the input's text is cleared on blur if no value is selected. Set to `true` if you want to help the user enter a new value. Set to `false` if you want to help the user resume their search. + +Default: `!props.freeSolo` + + + + + +### clearOnEscape + +If `true`, clear all values when the user presses escape _and_ the popup is closed. + +Default: `true` + + + + + +### disableCloseOnSelect + +If `true`, the popup won't close when a value is selected. + +Default: `props.multiple` + + + + + +### disabled + +If `true`, the component is disabled. + +Default: `false` + + + + + +### fitlerSelectedOptions + +If `true`, hide the selected options from the list box. + +Default: `false` + + + + + +### freeSolo + +If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. + +Default: `false` + + + + + +### fullWidth + +If `true`, the input will take up the full width of its container. + +Default: `false` + + + + + +### handleHomeEndKeys + +If `true`, the component handles the Home and End keys when the popup is open. It should move focus to the first option and last option, respectively. + +Default: `true` + + + + + +### includeInputInList + +If `true`, the highlight can move to the input. + +Default: `false` + + + + + +### limitTags + +The maximum number of tags that will be visible when not focused. Set `-1` to disable the limit. + +Default: `-1` + + + + + +### loading + +If `true`, the component is in a loading state. This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. options are empty). + +Default: `false` + + + + + +### multiple + +If `true`, `value` must be an array and the menu will support multiple selections. + +Default: `false` + + + + + +### openOnFocus + +If `true`, the popup will open on input focus. + +Default: `false` + + + + + +### readOnly + +If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted. + +Default: `false` + + + + + +### selectOnFocus + +If `true`, the input's text is selected on focus. It helps the user clear the selected value. + +Default: `true` + + + + + +## MUI TextField + +For testing props/behaviors in their default MUI environment. + +### MUI single + + + + + +### MUI multiple - + diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx index 55817ddcfc..049cdeb031 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx @@ -24,7 +24,86 @@ const storybookMeta: ComponentMeta = { page: AutocompleteMdx, }, }, - argTypes: {}, + argTypes: { + // autoComplete appears to be broken in both examples + autoComplete: { + control: "boolean", + defaultValue: false, + }, + autoHighlight: { + control: "boolean", + defaultValue: true, + }, + autoSelect: { + control: "boolean", + defaultValue: false, + }, + blurOnSelect: { + control: "radio", + options: [true, false, "mouse", "touch"], + defaultValue: false, + }, + clearOnBlur: { + control: "boolean", + defaultValue: false, + }, + clearOnEscape: { + control: "boolean", + defaultValue: true, + }, + disableCloseOnSelect: { + control: "boolean", + defaultValue: false, + }, + disabled: { + control: "boolean", + defaultValue: false, + }, + filterSelectedOptions: { + control: "boolean", + defaultValue: false, + }, + freeSolo: { + control: "boolean", + defaultValue: false, + }, + fullWidth: { + control: "boolean", + defaultValue: false, + }, + handleHomeEndKeys: { + control: "boolean", + defaultValue: true, + }, + includeInputInList: { + control: "boolean", + defaultValue: false, + }, + limitTags: { + control: "text", + defaultValue: "-1", + }, + loading: { + control: "boolean", + defaultValue: false, + }, + multiple: { + control: "boolean", + defaultValue: false, + }, + openOnFocus: { + control: "boolean", + defaultValue: false, + }, + readOnly: { + control: "boolean", + defaultValue: false, + }, + selectOnFocus: { + control: "boolean", + defaultValue: true, + }, + }, decorators: [MuiThemeDecorator], }; @@ -159,20 +238,48 @@ const top100Films = [ { label: "Monty Python and the Holy Grail", year: 1975 }, ]; -const Template: ComponentStory = () => { +const Template: ComponentStory = (args) => { return ( } + renderInput={(params) => ( + + )} + /> + ); +}; + +const EmptyTemplate: ComponentStory = (args) => { + return ( + ( + + )} /> ); }; -const MuiTemplate: ComponentStory = () => { +const MuiTemplate: ComponentStory = (args) => { return ( } /> @@ -182,5 +289,103 @@ const MuiTemplate: ComponentStory = () => { export const Default = Template.bind({}); Default.args = {}; -export const Mui = MuiTemplate.bind({}); -Mui.args = {}; +export const autoHighlight = Template.bind({}); +autoHighlight.args = { + autoHighlight: true, +}; + +export const autoSelect = Template.bind({}); +autoSelect.args = { + autoSelect: true, +}; + +export const blurOnSelect = Template.bind({}); +blurOnSelect.args = { + blurOnSelect: true, +}; + +export const clearOnBlur = Template.bind({}); +clearOnBlur.args = { + clearOnBlur: true, +}; + +export const clearOnEscape = Template.bind({}); +clearOnEscape.args = { + clearOnEscape: true, +}; + +export const disableCloseOnSelect = Template.bind({}); +disableCloseOnSelect.args = { + disableCloseOnSelect: true, +}; + +export const disabled = Template.bind({}); +disabled.args = { + disabled: true, + value: "The Godfather", +}; + +export const filterSelectedOptions = Template.bind({}); +filterSelectedOptions.args = { + filterSelectedOptions: true, +}; + +export const freeSolo = Template.bind({}); +freeSolo.args = { + freeSolo: true, +}; + +export const fullWidth = Template.bind({}); +fullWidth.args = { + fullWidth: true, +}; + +export const handleHomeEndKeys = Template.bind({}); +handleHomeEndKeys.args = { + handleHomeEndKeys: true, +}; + +export const includeInputInList = Template.bind({}); +includeInputInList.args = { + includeInputInList: true, +}; + +export const limitTags = Template.bind({}); +limitTags.args = { + limitTags: 3, + multiple: true, +}; + +export const loading = EmptyTemplate.bind({}); +loading.args = { + loading: true, +}; + +export const multiple = Template.bind({}); +multiple.args = { + multiple: true, +}; + +export const openOnFocus = Template.bind({}); +openOnFocus.args = { + openOnFocus: true, +}; + +export const readOnly = Template.bind({}); +readOnly.args = { + readOnly: true, + value: "The Godfather", +}; + +export const selectOnFocus = Template.bind({}); +selectOnFocus.args = { + selectOnFocus: true, +}; + +export const MaterialSingle = MuiTemplate.bind({}); +MaterialSingle.args = {}; + +export const MaterialMultiple = MuiTemplate.bind({}); +MaterialMultiple.args = { + multiple: true, +}; From c9947372f96acea6b57ab66551da5c9bf3b62d1b Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Tue, 28 Mar 2023 11:29:59 -0700 Subject: [PATCH 04/24] chore: set default props for Autocomplete --- .../src/theme/components.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 490e1cbfe0..8f2a0552f2 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -35,6 +35,7 @@ import { CheckCircleFilledIcon, ChevronDownIcon, CloseCircleFilledIcon, + CloseIcon, InformationCircleFilledIcon, } from "../iconDictionary"; @@ -142,6 +143,26 @@ export const components: ThemeOptions["components"] = { }), }, }, + MuiAutocomplete: { + defaultProps: { + autoHighlight: true, + autoSelect: false, + blurOnSelect: false, + clearIcon: , + clearOnEscape: true, + disableClearable: false, + disabledItemsFocusable: false, + disableListWrap: false, + disablePortal: false, + filterSelectedOptions: false, + fullWidth: false, + handleHomeEndKeys: true, + limitTags: -1, + openOnFocus: false, + popupIcon: , + selectOnFocus: true, + }, + }, MuiBackdrop: { styleOverrides: { root: ({ ownerState }) => ({ From cd297cb6656bde452fb6f97642821b5980711972 Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Wed, 29 Mar 2023 12:49:43 -0700 Subject: [PATCH 05/24] chore: remove defaults from stories --- .../odyssey-mui/Autocomplete/Autocomplete.mdx | 125 ------------------ .../Autocomplete/Autocomplete.stories.tsx | 115 ---------------- 2 files changed, 240 deletions(-) diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx index 09c0fc4da7..0972e6a6c2 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx @@ -14,71 +14,6 @@ Examples of MUI's variant behaviors to help us decide and style our own offering Note, some of these behaviors may currently be broken or have unsuitable UI. -### autoHighlight - -If `true`, the first option is automatically highlighted. - -Default: `true` - - - - - -### autoSelect - -If `true`, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input. - -Default: `false` - - - - - -### blurOnSelect - -Control if the input should be blurred when an option is selected: - -- `false` the input is not blurred. -- `true` the input is always blurred. -- `touch` the input is blurred after a touch event. -- `mouse` the input is blurred after a mouse event. - -Default: `false` - - - - - -### clearOnBlur - -If `true`, the input's text is cleared on blur if no value is selected. Set to `true` if you want to help the user enter a new value. Set to `false` if you want to help the user resume their search. - -Default: `!props.freeSolo` - - - - - -### clearOnEscape - -If `true`, clear all values when the user presses escape _and_ the popup is closed. - -Default: `true` - - - - - -### disableCloseOnSelect - -If `true`, the popup won't close when a value is selected. - -Default: `props.multiple` - - - - - ### disabled If `true`, the component is disabled. @@ -89,16 +24,6 @@ Default: `false` -### fitlerSelectedOptions - -If `true`, hide the selected options from the list box. - -Default: `false` - - - - - ### freeSolo If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. @@ -109,26 +34,6 @@ Default: `false` -### fullWidth - -If `true`, the input will take up the full width of its container. - -Default: `false` - - - - - -### handleHomeEndKeys - -If `true`, the component handles the Home and End keys when the popup is open. It should move focus to the first option and last option, respectively. - -Default: `true` - - - - - ### includeInputInList If `true`, the highlight can move to the input. @@ -139,16 +44,6 @@ Default: `false` -### limitTags - -The maximum number of tags that will be visible when not focused. Set `-1` to disable the limit. - -Default: `-1` - - - - - ### loading If `true`, the component is in a loading state. This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. options are empty). @@ -169,16 +64,6 @@ Default: `false` -### openOnFocus - -If `true`, the popup will open on input focus. - -Default: `false` - - - - - ### readOnly If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted. @@ -189,16 +74,6 @@ Default: `false` -### selectOnFocus - -If `true`, the input's text is selected on focus. It helps the user clear the selected value. - -Default: `true` - - - - - ## MUI TextField For testing props/behaviors in their default MUI environment. diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx index 049cdeb031..7a9b369a91 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx @@ -25,64 +25,18 @@ const storybookMeta: ComponentMeta = { }, }, argTypes: { - // autoComplete appears to be broken in both examples - autoComplete: { - control: "boolean", - defaultValue: false, - }, - autoHighlight: { - control: "boolean", - defaultValue: true, - }, - autoSelect: { - control: "boolean", - defaultValue: false, - }, - blurOnSelect: { - control: "radio", - options: [true, false, "mouse", "touch"], - defaultValue: false, - }, - clearOnBlur: { - control: "boolean", - defaultValue: false, - }, - clearOnEscape: { - control: "boolean", - defaultValue: true, - }, - disableCloseOnSelect: { - control: "boolean", - defaultValue: false, - }, disabled: { control: "boolean", defaultValue: false, }, - filterSelectedOptions: { - control: "boolean", - defaultValue: false, - }, freeSolo: { control: "boolean", defaultValue: false, }, - fullWidth: { - control: "boolean", - defaultValue: false, - }, - handleHomeEndKeys: { - control: "boolean", - defaultValue: true, - }, includeInputInList: { control: "boolean", defaultValue: false, }, - limitTags: { - control: "text", - defaultValue: "-1", - }, loading: { control: "boolean", defaultValue: false, @@ -91,18 +45,10 @@ const storybookMeta: ComponentMeta = { control: "boolean", defaultValue: false, }, - openOnFocus: { - control: "boolean", - defaultValue: false, - }, readOnly: { control: "boolean", defaultValue: false, }, - selectOnFocus: { - control: "boolean", - defaultValue: true, - }, }, decorators: [MuiThemeDecorator], }; @@ -289,73 +235,22 @@ const MuiTemplate: ComponentStory = (args) => { export const Default = Template.bind({}); Default.args = {}; -export const autoHighlight = Template.bind({}); -autoHighlight.args = { - autoHighlight: true, -}; - -export const autoSelect = Template.bind({}); -autoSelect.args = { - autoSelect: true, -}; - -export const blurOnSelect = Template.bind({}); -blurOnSelect.args = { - blurOnSelect: true, -}; - -export const clearOnBlur = Template.bind({}); -clearOnBlur.args = { - clearOnBlur: true, -}; - -export const clearOnEscape = Template.bind({}); -clearOnEscape.args = { - clearOnEscape: true, -}; - -export const disableCloseOnSelect = Template.bind({}); -disableCloseOnSelect.args = { - disableCloseOnSelect: true, -}; - export const disabled = Template.bind({}); disabled.args = { disabled: true, value: "The Godfather", }; -export const filterSelectedOptions = Template.bind({}); -filterSelectedOptions.args = { - filterSelectedOptions: true, -}; - export const freeSolo = Template.bind({}); freeSolo.args = { freeSolo: true, }; -export const fullWidth = Template.bind({}); -fullWidth.args = { - fullWidth: true, -}; - -export const handleHomeEndKeys = Template.bind({}); -handleHomeEndKeys.args = { - handleHomeEndKeys: true, -}; - export const includeInputInList = Template.bind({}); includeInputInList.args = { includeInputInList: true, }; -export const limitTags = Template.bind({}); -limitTags.args = { - limitTags: 3, - multiple: true, -}; - export const loading = EmptyTemplate.bind({}); loading.args = { loading: true, @@ -366,22 +261,12 @@ multiple.args = { multiple: true, }; -export const openOnFocus = Template.bind({}); -openOnFocus.args = { - openOnFocus: true, -}; - export const readOnly = Template.bind({}); readOnly.args = { readOnly: true, value: "The Godfather", }; -export const selectOnFocus = Template.bind({}); -selectOnFocus.args = { - selectOnFocus: true, -}; - export const MaterialSingle = MuiTemplate.bind({}); MaterialSingle.args = {}; From dbb12100e656e9db3deb2a0d76bdcf5fb715e93d Mon Sep 17 00:00:00 2001 From: Kevin Ghadyani Date: Mon, 17 Apr 2023 12:13:18 -0500 Subject: [PATCH 06/24] fix: created Autocomplete wrapper component --- .../odyssey-react-mui/src/Autocomplete.tsx | 83 +++++++++++++++++ packages/odyssey-react-mui/src/index.ts | 3 +- .../Autocomplete/Autocomplete.stories.tsx | 92 +++++++++---------- 3 files changed, 126 insertions(+), 52 deletions(-) create mode 100644 packages/odyssey-react-mui/src/Autocomplete.tsx diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx new file mode 100644 index 0000000000..fc1acf0849 --- /dev/null +++ b/packages/odyssey-react-mui/src/Autocomplete.tsx @@ -0,0 +1,83 @@ +/*! + * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import { + Autocomplete as MuiAutocomplete, + AutocompleteProps as MuiAutocompleteProps, + InputBase, +} from "@mui/material"; +import { memo, useCallback } from "react"; + +import { Field } from "./Field"; + +export type AutocompleteProps = { + isDisabled?: boolean; + hint?: string; + label: string; + onChange?: MuiAutocompleteProps; + options: OptionType[]; + value?: OptionType | null; +}; + +// + +const Autocomplete = ({ + isDisabled, + hint, + label, + onChange, + options, + value, +}: AutocompleteProps) => { + const renderInput = useCallback( + (params) => ( + ( + + )} + /> + ), + [hint, label] + ); + + return ( + + ); +}; + +const MemoizedAutocomplete = memo(Autocomplete); + +export { MemoizedAutocomplete as Autocomplete }; diff --git a/packages/odyssey-react-mui/src/index.ts b/packages/odyssey-react-mui/src/index.ts index 8bb68318bb..e26b418a44 100644 --- a/packages/odyssey-react-mui/src/index.ts +++ b/packages/odyssey-react-mui/src/index.ts @@ -13,7 +13,6 @@ export { Alert, AlertTitle, - Autocomplete, Box, Button, Chip, @@ -67,7 +66,6 @@ export { export type { AlertProps, AlertTitleProps, - AutocompleteProps, BoxProps, ButtonProps, ChipProps, @@ -126,6 +124,7 @@ export { default as FavoriteIcon } from "@mui/icons-material/Favorite"; export { deepmerge, visuallyHidden } from "@mui/utils"; +export * from "./Autocomplete"; export * from "./Banner"; export * from "./Checkbox"; export * from "./CheckboxGroup"; diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx index 7a9b369a91..f77dcceeb4 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx @@ -10,7 +10,7 @@ * See the License for the specific language governing permissions and limitations under the License. */ -import { Autocomplete, TextField, TextFieldMui } from "@okta/odyssey-react-mui"; +import { Autocomplete } from "@okta/odyssey-react-mui"; import { ComponentMeta, ComponentStory } from "@storybook/react"; import { MuiThemeDecorator } from "../../../../.storybook/components"; @@ -25,30 +25,30 @@ const storybookMeta: ComponentMeta = { }, }, argTypes: { - disabled: { - control: "boolean", - defaultValue: false, - }, - freeSolo: { - control: "boolean", - defaultValue: false, - }, - includeInputInList: { - control: "boolean", - defaultValue: false, - }, - loading: { - control: "boolean", - defaultValue: false, - }, - multiple: { - control: "boolean", - defaultValue: false, - }, - readOnly: { + isDisabled: { control: "boolean", defaultValue: false, }, + // freeSolo: { + // control: "boolean", + // defaultValue: false, + // }, + // includeInputInList: { + // control: "boolean", + // defaultValue: false, + // }, + // loading: { + // control: "boolean", + // defaultValue: false, + // }, + // multiple: { + // control: "boolean", + // defaultValue: false, + // }, + // readOnly: { + // control: "boolean", + // defaultValue: false, + // }, }, decorators: [MuiThemeDecorator], }; @@ -188,17 +188,9 @@ const Template: ComponentStory = (args) => { return ( ( - - )} /> ); }; @@ -208,16 +200,16 @@ const EmptyTemplate: ComponentStory = (args) => { ( - - )} + // renderInput={(params) => ( + // + // )} /> ); }; @@ -227,7 +219,7 @@ const MuiTemplate: ComponentStory = (args) => { } + // renderInput={(params) => } /> ); }; @@ -237,33 +229,33 @@ Default.args = {}; export const disabled = Template.bind({}); disabled.args = { - disabled: true, + // disabled: true, value: "The Godfather", }; export const freeSolo = Template.bind({}); freeSolo.args = { - freeSolo: true, + // freeSolo: true, }; export const includeInputInList = Template.bind({}); includeInputInList.args = { - includeInputInList: true, + // includeInputInList: true, }; export const loading = EmptyTemplate.bind({}); loading.args = { - loading: true, + // loading: true, }; export const multiple = Template.bind({}); multiple.args = { - multiple: true, + // multiple: true, }; export const readOnly = Template.bind({}); readOnly.args = { - readOnly: true, + // readOnly: true, value: "The Godfather", }; @@ -272,5 +264,5 @@ MaterialSingle.args = {}; export const MaterialMultiple = MuiTemplate.bind({}); MaterialMultiple.args = { - multiple: true, + // multiple: true, }; From 28be391f49bbce4882b68334a1d5805e50d47a4e Mon Sep 17 00:00:00 2001 From: Kevin Ghadyani Date: Mon, 17 Apr 2023 13:41:11 -0500 Subject: [PATCH 07/24] fix: export types for Autocomplete --- .../odyssey-react-mui/src/Autocomplete.tsx | 20 ++++--------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx index fc1acf0849..f2c1274ebf 100644 --- a/packages/odyssey-react-mui/src/Autocomplete.tsx +++ b/packages/odyssey-react-mui/src/Autocomplete.tsx @@ -23,20 +23,11 @@ export type AutocompleteProps = { isDisabled?: boolean; hint?: string; label: string; - onChange?: MuiAutocompleteProps; - options: OptionType[]; - value?: OptionType | null; + onChange?: MuiAutocompleteProps["onChange"]; + options: MuiAutocompleteProps["options"]; + value?: MuiAutocompleteProps["value"]; }; -// - const Autocomplete = ({ isDisabled, hint, @@ -50,7 +41,6 @@ const Autocomplete = ({ ( ({ return ( ({ ); }; -const MemoizedAutocomplete = memo(Autocomplete); +const MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete; export { MemoizedAutocomplete as Autocomplete }; From a93542c6238ab56a0a06075aceb5cf0997ceb7f1 Mon Sep 17 00:00:00 2001 From: Kevin Ghadyani Date: Mon, 17 Apr 2023 14:42:54 -0500 Subject: [PATCH 08/24] fix: separated InputProps and params in Autocomplete --- packages/odyssey-react-mui/src/Autocomplete.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx index f2c1274ebf..16138187c3 100644 --- a/packages/odyssey-react-mui/src/Autocomplete.tsx +++ b/packages/odyssey-react-mui/src/Autocomplete.tsx @@ -37,15 +37,16 @@ const Autocomplete = ({ value, }: AutocompleteProps) => { const renderInput = useCallback( - (params) => ( + ({ InputLabelProps, InputProps, ...params }) => ( ( From d7aff4ab510cbb512bee043b4056e1085ce0d059 Mon Sep 17 00:00:00 2001 From: Kevin Ghadyani Date: Mon, 17 Apr 2023 16:39:36 -0500 Subject: [PATCH 09/24] fix: added extra props to Autocomplete to fix MUI types This doesn't actually fix MUI types, but it passes enough to push it. --- .../odyssey-react-mui/src/Autocomplete.tsx | 58 ++++++++++++++++--- .../Autocomplete/Autocomplete.stories.tsx | 2 + 2 files changed, 53 insertions(+), 7 deletions(-) diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx index 16138187c3..be41317fa5 100644 --- a/packages/odyssey-react-mui/src/Autocomplete.tsx +++ b/packages/odyssey-react-mui/src/Autocomplete.tsx @@ -19,23 +19,65 @@ import { memo, useCallback } from "react"; import { Field } from "./Field"; -export type AutocompleteProps = { - isDisabled?: boolean; +export type AutocompleteProps< + OptionType, + HasMultipleChoices extends boolean | undefined, + IsCustomValueAllowed extends boolean | undefined +> = { + hasMultipleChoices?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["multiple"]; hint?: string; + isCustomValueAllowed?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["freeSolo"]; + isDisabled?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["disabled"]; label: string; - onChange?: MuiAutocompleteProps["onChange"]; - options: MuiAutocompleteProps["options"]; - value?: MuiAutocompleteProps["value"]; + onChange?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["onChange"]; + options: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["options"]; + value?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["value"]; }; -const Autocomplete = ({ +const Autocomplete = < + OptionType, + HasMultipleChoices extends boolean | undefined, + IsCustomValueAllowed extends boolean | undefined +>({ + isCustomValueAllowed, + hasMultipleChoices, isDisabled, hint, label, onChange, options, value, -}: AutocompleteProps) => { +}: AutocompleteProps) => { const renderInput = useCallback( ({ InputLabelProps, InputProps, ...params }) => ( ({ return ( = (args) => { hint="Select your favorite movie" label="Movie" options={top100Films} + value={{ label: "", year: 2000 }} /> ); }; @@ -220,6 +221,7 @@ const MuiTemplate: ComponentStory = (args) => { {...args} options={top100Films} // renderInput={(params) => } + value={{ label: "", year: 2000 }} /> ); }; From ab84734a4f8dc11aba42f56818bce59dbd469ddf Mon Sep 17 00:00:00 2001 From: Kevin Ghadyani Date: Tue, 18 Apr 2023 12:27:07 -0500 Subject: [PATCH 10/24] fix: removed explicit displayName from MenuItem --- packages/odyssey-react-mui/src/MenuItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/odyssey-react-mui/src/MenuItem.tsx b/packages/odyssey-react-mui/src/MenuItem.tsx index 7d09a2847e..2943bc2226 100644 --- a/packages/odyssey-react-mui/src/MenuItem.tsx +++ b/packages/odyssey-react-mui/src/MenuItem.tsx @@ -45,6 +45,5 @@ const MenuItem = forwardRef( ); const MemoizedMenuItem = memo(MenuItem); -MemoizedMenuItem.displayName = "MenuItem"; export { MemoizedMenuItem as MenuItem }; From 8d28a8c640dfccac92fdcad5af9bdc33759c9de3 Mon Sep 17 00:00:00 2001 From: Kevin Ghadyani Date: Tue, 18 Apr 2023 12:48:02 -0500 Subject: [PATCH 11/24] fix: types for Autocomplete in stories --- .../Autocomplete/Autocomplete.stories.tsx | 40 ++++++++++++++----- 1 file changed, 30 insertions(+), 10 deletions(-) diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx index 44d0c925b8..e2a2a19f1f 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx @@ -10,8 +10,8 @@ * See the License for the specific language governing permissions and limitations under the License. */ -import { Autocomplete } from "@okta/odyssey-react-mui"; -import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { Autocomplete, AutocompleteProps } from "@okta/odyssey-react-mui"; +import { ComponentMeta, ComponentStory, Story } from "@storybook/react"; import { MuiThemeDecorator } from "../../../../.storybook/components"; import AutocompleteMdx from "./Autocomplete.mdx"; @@ -55,8 +55,10 @@ const storybookMeta: ComponentMeta = { export default storybookMeta; +type MovieType = { label: string; year: number }; + // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ +const top100Films: ReadonlyArray = [ { label: "The Shawshank Redemption", year: 1994 }, { label: "The Godfather", year: 1972 }, { label: "The Godfather: Part II", year: 1974 }, @@ -184,19 +186,30 @@ const top100Films = [ { label: "Monty Python and the Holy Grail", year: 1975 }, ]; -const Template: ComponentStory = (args) => { +const Template: Story< + AutocompleteProps< + MovieType | undefined, + boolean | undefined, + boolean | undefined + > +> = (args) => { return ( ); }; -const EmptyTemplate: ComponentStory = (args) => { +const EmptyTemplate: Story< + AutocompleteProps< + MovieType | undefined, + boolean | undefined, + boolean | undefined + > +> = (args) => { return ( = (args) => { ); }; -const MuiTemplate: ComponentStory = (args) => { +const MuiTemplate: Story< + AutocompleteProps< + MovieType | undefined, + boolean | undefined, + boolean | undefined + > +> = (args) => { return ( } - value={{ label: "", year: 2000 }} /> ); }; @@ -232,7 +250,8 @@ Default.args = {}; export const disabled = Template.bind({}); disabled.args = { // disabled: true, - value: "The Godfather", + // value: "The Godfather", + value: { label: "The Godfather", year: 1972 }, }; export const freeSolo = Template.bind({}); @@ -258,7 +277,8 @@ multiple.args = { export const readOnly = Template.bind({}); readOnly.args = { // readOnly: true, - value: "The Godfather", + // value: "The Godfather", + value: { label: "The Godfather", year: 1972 }, }; export const MaterialSingle = MuiTemplate.bind({}); From 66e771075fe2e90e8f4a80db2090f38dc6b4403f Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Tue, 18 Apr 2023 10:54:12 -0700 Subject: [PATCH 12/24] chore: remove unnec ComponentStory --- .../odyssey-mui/Autocomplete/Autocomplete.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx index e2a2a19f1f..b06e8bf21c 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx @@ -11,7 +11,7 @@ */ import { Autocomplete, AutocompleteProps } from "@okta/odyssey-react-mui"; -import { ComponentMeta, ComponentStory, Story } from "@storybook/react"; +import { ComponentMeta, Story } from "@storybook/react"; import { MuiThemeDecorator } from "../../../../.storybook/components"; import AutocompleteMdx from "./Autocomplete.mdx"; From 79d42e16ac304a3856697b8711a1b38fe8cfe28f Mon Sep 17 00:00:00 2001 From: Kevin Ghadyani Date: Tue, 18 Apr 2023 12:57:09 -0500 Subject: [PATCH 13/24] fix: minor type improvement in Autocomplete stories --- .../Autocomplete/Autocomplete.stories.tsx | 32 ++++++------------- 1 file changed, 10 insertions(+), 22 deletions(-) diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx index e2a2a19f1f..6d6a6c3dbe 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx @@ -11,7 +11,7 @@ */ import { Autocomplete, AutocompleteProps } from "@okta/odyssey-react-mui"; -import { ComponentMeta, ComponentStory, Story } from "@storybook/react"; +import { ComponentMeta, Story } from "@storybook/react"; import { MuiThemeDecorator } from "../../../../.storybook/components"; import AutocompleteMdx from "./Autocomplete.mdx"; @@ -186,13 +186,13 @@ const top100Films: ReadonlyArray = [ { label: "Monty Python and the Holy Grail", year: 1975 }, ]; -const Template: Story< - AutocompleteProps< - MovieType | undefined, - boolean | undefined, - boolean | undefined - > -> = (args) => { +type AutocompleteType = AutocompleteProps< + MovieType | undefined, + boolean | undefined, + boolean | undefined +>; + +const Template: Story = (args) => { return ( -> = (args) => { +const EmptyTemplate: Story = (args) => { return ( -> = (args) => { +const MuiTemplate: Story = (args) => { return ( Date: Tue, 18 Apr 2023 11:03:35 -0700 Subject: [PATCH 14/24] chore: update stories to match new props --- .../src/theme/components.tsx | 1 + .../odyssey-mui/Autocomplete/Autocomplete.mdx | 10 ------- .../Autocomplete/Autocomplete.stories.tsx | 30 ++++--------------- 3 files changed, 6 insertions(+), 35 deletions(-) diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index e904a15c22..b0bdc4d38d 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -159,6 +159,7 @@ export const components: ThemeOptions["components"] = { filterSelectedOptions: false, fullWidth: false, handleHomeEndKeys: true, + includeInputInList: true, limitTags: -1, openOnFocus: false, popupIcon: , diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx index 0972e6a6c2..1800033798 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx @@ -34,16 +34,6 @@ Default: `false` -### includeInputInList - -If `true`, the highlight can move to the input. - -Default: `false` - - - - - ### loading If `true`, the component is in a loading state. This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. options are empty). diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx index 6d6a6c3dbe..671e66e2c9 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx @@ -204,22 +204,7 @@ const Template: Story = (args) => { }; const EmptyTemplate: Story = (args) => { - return ( - ( - // - // )} - /> - ); + return ; }; const MuiTemplate: Story = (args) => { @@ -237,19 +222,14 @@ Default.args = {}; export const disabled = Template.bind({}); disabled.args = { - // disabled: true, + isDisabled: true, // value: "The Godfather", value: { label: "The Godfather", year: 1972 }, }; export const freeSolo = Template.bind({}); freeSolo.args = { - // freeSolo: true, -}; - -export const includeInputInList = Template.bind({}); -includeInputInList.args = { - // includeInputInList: true, + isCustomValueAllowed: true, }; export const loading = EmptyTemplate.bind({}); @@ -259,7 +239,7 @@ loading.args = { export const multiple = Template.bind({}); multiple.args = { - // multiple: true, + hasMultipleChoices: true, }; export const readOnly = Template.bind({}); @@ -274,5 +254,5 @@ MaterialSingle.args = {}; export const MaterialMultiple = MuiTemplate.bind({}); MaterialMultiple.args = { - // multiple: true, + hasMultipleChoices: true, }; From f2da4da55204dcac3304f0d47a26ca193b9ba531 Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Tue, 18 Apr 2023 11:20:22 -0700 Subject: [PATCH 15/24] chore: remove MUI-only stories --- .../odyssey-mui/Autocomplete/Autocomplete.mdx | 24 +++------------ .../Autocomplete/Autocomplete.stories.tsx | 30 ++++--------------- 2 files changed, 10 insertions(+), 44 deletions(-) diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx index 1800033798..5ab0eca602 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx @@ -24,14 +24,14 @@ Default: `false` -### freeSolo +### isCustomValueAllowed If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. Default: `false` - + ### loading @@ -44,14 +44,14 @@ Default: `false` -### multiple +### hasMultipleChoices If `true`, `value` must be an array and the menu will support multiple selections. Default: `false` - + ### readOnly @@ -63,19 +63,3 @@ Default: `false` - -## MUI TextField - -For testing props/behaviors in their default MUI environment. - -### MUI single - - - - - -### MUI multiple - - - - diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx index 671e66e2c9..305033507d 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx @@ -29,7 +29,7 @@ const storybookMeta: ComponentMeta = { control: "boolean", defaultValue: false, }, - // freeSolo: { + // isCustomValueAllowed: { // control: "boolean", // defaultValue: false, // }, @@ -41,7 +41,7 @@ const storybookMeta: ComponentMeta = { // control: "boolean", // defaultValue: false, // }, - // multiple: { + // hasMultipleChoices: { // control: "boolean", // defaultValue: false, // }, @@ -207,16 +207,6 @@ const EmptyTemplate: Story = (args) => { return ; }; -const MuiTemplate: Story = (args) => { - return ( - } - /> - ); -}; - export const Default = Template.bind({}); Default.args = {}; @@ -227,8 +217,8 @@ disabled.args = { value: { label: "The Godfather", year: 1972 }, }; -export const freeSolo = Template.bind({}); -freeSolo.args = { +export const isCustomValueAllowed = Template.bind({}); +isCustomValueAllowed.args = { isCustomValueAllowed: true, }; @@ -237,8 +227,8 @@ loading.args = { // loading: true, }; -export const multiple = Template.bind({}); -multiple.args = { +export const hasMultipleChoices = Template.bind({}); +hasMultipleChoices.args = { hasMultipleChoices: true, }; @@ -248,11 +238,3 @@ readOnly.args = { // value: "The Godfather", value: { label: "The Godfather", year: 1972 }, }; - -export const MaterialSingle = MuiTemplate.bind({}); -MaterialSingle.args = {}; - -export const MaterialMultiple = MuiTemplate.bind({}); -MaterialMultiple.args = { - hasMultipleChoices: true, -}; From eaef418dbe519bb7b7287763d0390879c34cb78d Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Tue, 18 Apr 2023 11:21:11 -0700 Subject: [PATCH 16/24] chore: remove mui-only exports --- packages/odyssey-react-mui/src/index.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/odyssey-react-mui/src/index.ts b/packages/odyssey-react-mui/src/index.ts index e26b418a44..f705c36bd3 100644 --- a/packages/odyssey-react-mui/src/index.ts +++ b/packages/odyssey-react-mui/src/index.ts @@ -57,7 +57,6 @@ export { TableHead, TableRow, TableSortLabel, - TextField as TextFieldMui, ThemeProvider as MuiThemeProvider, Tooltip, Typography, @@ -110,7 +109,6 @@ export type { TableProps, TableRowProps, TableSortLabelProps, - TextFieldProps as TextFieldMuiProps, ThemeOptions, TooltipProps, TypographyProps, From b03516ba469ef1045c17326590a97e39f0235aa8 Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Tue, 18 Apr 2023 11:50:35 -0700 Subject: [PATCH 17/24] feat(odyssey-react-mui): add styling for Autocomplete --- .../src/theme/components.tsx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index b0bdc4d38d..742ed432b7 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -165,6 +165,34 @@ export const components: ThemeOptions["components"] = { popupIcon: , selectOnFocus: true, }, + styleOverrides: { + clearIndicator: ({ theme }) => ({ + marginRight: "unset", + padding: theme.spacing(1), + }), + endAdornment: ({ theme, ownerState }) => ({ + display: "flex", + gap: theme.spacing(1), + top: `calc(${theme.spacing(2)} - ${theme.mixins.borderWidth})`, + right: theme.spacing(2), + maxHeight: "unset", + alignItems: "center", + whiteSpace: "nowrap", + color: theme.palette.action.active, + + ...(ownerState.disabled === true && { + display: "none", + }), + + ...(ownerState.readOnly === true && { + display: "none", + }), + }), + popupIndicator: ({ theme }) => ({ + padding: theme.spacing(1), + marginRight: "unset", + }), + }, }, MuiBackdrop: { styleOverrides: { From 42f6c03b3790120b0f06d5940e615de9670ff43b Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Tue, 18 Apr 2023 12:07:40 -0700 Subject: [PATCH 18/24] chore: enable and styling loading state --- packages/odyssey-react-mui/src/Autocomplete.tsx | 8 ++++++++ packages/odyssey-react-mui/src/theme/components.tsx | 4 ++++ .../odyssey-mui/Autocomplete/Autocomplete.stories.tsx | 2 +- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx index be41317fa5..fafbdd0a1b 100644 --- a/packages/odyssey-react-mui/src/Autocomplete.tsx +++ b/packages/odyssey-react-mui/src/Autocomplete.tsx @@ -43,6 +43,12 @@ export type AutocompleteProps< undefined, IsCustomValueAllowed >["disabled"]; + isLoading?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["loading"]; label: string; onChange?: MuiAutocompleteProps< OptionType, @@ -72,6 +78,7 @@ const Autocomplete = < isCustomValueAllowed, hasMultipleChoices, isDisabled, + isLoading, hint, label, onChange, @@ -102,6 +109,7 @@ const Autocomplete = < ({ + paddingBlock: theme.spacing(3), + paddingInline: theme.spacing(4), + }), popupIndicator: ({ theme }) => ({ padding: theme.spacing(1), marginRight: "unset", diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx index 305033507d..ebee305a16 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx @@ -224,7 +224,7 @@ isCustomValueAllowed.args = { export const loading = EmptyTemplate.bind({}); loading.args = { - // loading: true, + isLoading: true, }; export const hasMultipleChoices = Template.bind({}); From 5397b59ce14718678dfb698fffbf9b5270d9c2e4 Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Tue, 18 Apr 2023 12:30:14 -0700 Subject: [PATCH 19/24] chore: add and style isReadOnly state --- packages/odyssey-react-mui/src/Autocomplete.tsx | 8 ++++++++ packages/odyssey-react-mui/src/theme/components.tsx | 6 ++++++ .../odyssey-mui/Autocomplete/Autocomplete.stories.tsx | 4 +--- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx index fafbdd0a1b..849c1557f0 100644 --- a/packages/odyssey-react-mui/src/Autocomplete.tsx +++ b/packages/odyssey-react-mui/src/Autocomplete.tsx @@ -49,6 +49,12 @@ export type AutocompleteProps< undefined, IsCustomValueAllowed >["loading"]; + isReadOnly?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["readOnly"]; label: string; onChange?: MuiAutocompleteProps< OptionType, @@ -79,6 +85,7 @@ const Autocomplete = < hasMultipleChoices, isDisabled, isLoading, + isReadOnly, hint, label, onChange, @@ -113,6 +120,7 @@ const Autocomplete = < multiple={hasMultipleChoices} onChange={onChange} options={options} + readOnly={isReadOnly} renderInput={renderInput} value={value} /> diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 1b078d28b9..64ef4fd353 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -13,6 +13,7 @@ import { ThemeOptions } from "@mui/material"; import type {} from "@mui/lab/themeAugmentation"; //import radioClasses from "@mui/material"; +import { autocompleteClasses } from "@mui/material/Autocomplete"; import { buttonClasses } from "@mui/material/Button"; import { chipClasses } from "@mui/material/Chip"; import { dialogActionsClasses } from "@mui/material/DialogActions"; @@ -196,6 +197,11 @@ export const components: ThemeOptions["components"] = { padding: theme.spacing(1), marginRight: "unset", }), + inputRoot: ({ theme, ownerState }) => ({ + ...(ownerState.readOnly === true && { + backgroundColor: theme.palette.grey[50], + }), + }), }, }, MuiBackdrop: { diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx index ebee305a16..38b137e1a4 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx @@ -213,7 +213,6 @@ Default.args = {}; export const disabled = Template.bind({}); disabled.args = { isDisabled: true, - // value: "The Godfather", value: { label: "The Godfather", year: 1972 }, }; @@ -234,7 +233,6 @@ hasMultipleChoices.args = { export const readOnly = Template.bind({}); readOnly.args = { - // readOnly: true, - // value: "The Godfather", + isReadOnly: true, value: { label: "The Godfather", year: 1972 }, }; From 5923b59110493d0e07ec77a6ef074aef3d61bf99 Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Tue, 18 Apr 2023 12:32:49 -0700 Subject: [PATCH 20/24] chore: fix border color hover behavior --- packages/odyssey-react-mui/src/theme/components.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 64ef4fd353..a83a5a4327 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -200,6 +200,10 @@ export const components: ThemeOptions["components"] = { inputRoot: ({ theme, ownerState }) => ({ ...(ownerState.readOnly === true && { backgroundColor: theme.palette.grey[50], + + [`&:not(:hover)`]: { + borderColor: "transparent", + }, }), }), }, From 02540343fb514d06da5cb90d49ee564f98b08785 Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Tue, 18 Apr 2023 12:37:55 -0700 Subject: [PATCH 21/24] chore: remove unnec autocomplete classes --- packages/odyssey-react-mui/src/theme/components.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index a83a5a4327..8cc54c9057 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -13,7 +13,6 @@ import { ThemeOptions } from "@mui/material"; import type {} from "@mui/lab/themeAugmentation"; //import radioClasses from "@mui/material"; -import { autocompleteClasses } from "@mui/material/Autocomplete"; import { buttonClasses } from "@mui/material/Button"; import { chipClasses } from "@mui/material/Chip"; import { dialogActionsClasses } from "@mui/material/DialogActions"; From 7680cfe61dc7a4108a6ebf0f4fed314b5b923d2d Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Tue, 18 Apr 2023 15:56:39 -0700 Subject: [PATCH 22/24] chore: add readonly and disabled examples --- .../odyssey-mui/Autocomplete/Autocomplete.mdx | 24 +++++++++++++------ .../Autocomplete/Autocomplete.stories.tsx | 18 ++++++++++++-- 2 files changed, 33 insertions(+), 9 deletions(-) diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx index 5ab0eca602..7d8cbcb40c 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx @@ -44,22 +44,32 @@ Default: `false` -### hasMultipleChoices +### readOnly -If `true`, `value` must be an array and the menu will support multiple selections. +If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted. Default: `false` - + -### readOnly +### Multi-Select -If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted. +#### Enabled -Default: `false` + + + + +#### Disabled - + + + +#### Read-only + + + diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx index 38b137e1a4..f0a21f3f43 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx @@ -226,11 +226,25 @@ loading.args = { isLoading: true, }; -export const hasMultipleChoices = Template.bind({}); -hasMultipleChoices.args = { +export const multiple = Template.bind({}); +multiple.args = { hasMultipleChoices: true, }; +export const multipleDisabled = Template.bind({}); +multipleDisabled.args = { + hasMultipleChoices: true, + isDisabled: true, + value: [{ label: "The Godfather", year: 1972 }], +}; + +export const multipleReadOnly = Template.bind({}); +multipleReadOnly.args = { + hasMultipleChoices: true, + isReadOnly: true, + value: [{ label: "The Godfather", year: 1972 }], +}; + export const readOnly = Template.bind({}); readOnly.args = { isReadOnly: true, From 72c40f1699ce05d0d962ba2ba0ea13e7b3334ae9 Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Wed, 19 Apr 2023 13:30:30 -0700 Subject: [PATCH 23/24] chore: tune disabled states for Autocomplete tags --- .../src/theme/components.tsx | 35 ++++++++++++------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 8cc54c9057..96d9cf0cf4 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -531,19 +531,6 @@ export const components: ThemeOptions["components"] = { paddingInlineEnd: theme.spacing(2), }), - [`& .${chipClasses.deleteIcon}`]: { - WebkitTapHighlightColor: "transparent", - color: theme.palette.text.secondary, - fontSize: "1em", - cursor: "pointer", - margin: "0", - marginInlineStart: theme.spacing(2), - - "&:hover": { - color: theme.palette.text.primary, - }, - }, - [`&.${chipClasses.disabled}`]: { opacity: 1, pointerEvents: "none", @@ -602,10 +589,32 @@ export const components: ThemeOptions["components"] = { }, }, }), + + [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: { + backgroundColor: theme.palette.grey[200], + }, }), + label: { padding: 0, }, + + deleteIcon: ({ theme }) => ({ + WebkitTapHighlightColor: "transparent", + color: theme.palette.text.secondary, + fontSize: "1em", + cursor: "pointer", + margin: "0", + marginInlineStart: theme.spacing(2), + + "&:hover": { + color: theme.palette.text.primary, + }, + + [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: { + display: "none", + }, + }), }, }, MuiCircularProgress: { From 26d732d158da056b52a8852314b2614c32601717 Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Thu, 20 Apr 2023 11:33:26 -0700 Subject: [PATCH 24/24] docs(odyssey-storybook): update Select and Autocomplete stories --- .../odyssey-mui/Autocomplete/Autocomplete.mdx | 58 ++--- .../Autocomplete/Autocomplete.stories.tsx | 214 +++++------------- .../components/odyssey-mui/Banner/Banner.mdx | 4 - .../components/odyssey-mui/Select/Select.mdx | 2 - 4 files changed, 84 insertions(+), 194 deletions(-) diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx index 7d8cbcb40c..9e1be94692 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx @@ -4,51 +4,37 @@ import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"; # Autocomplete +Similar to Select, this input triggers a menu of options a user can select. Country and state Autocompletes are common examples. + -## Variant Behaviors - -Examples of MUI's variant behaviors to help us decide and style our own offerings. - -Note, some of these behaviors may currently be broken or have unsuitable UI. - -### disabled +## Behavior -If `true`, the component is disabled. +Interacting with an Autocomplete displays a list of values to choose from. Users may filter the options list by typing. -Default: `false` +## Variants - - - +Odyssey provides support for both single and multi-value Autocompletes. -### isCustomValueAllowed +### Single-select -If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. +With the single-select variant, choosing a value will override any previous selection and close the Autocomplete. -Default: `false` +#### Enabled - + -### loading - -If `true`, the component is in a loading state. This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. options are empty). - -Default: `false` +#### Disabled - + -### readOnly - -If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted. - -Default: `false` +#### Read-only @@ -56,6 +42,8 @@ Default: `false` ### Multi-Select +The multi-Select variant allows users to select many values. + #### Enabled @@ -73,3 +61,19 @@ Default: `false` + +## Loading state + +The loading state is displayed when retrieving values from the server or when data is unavailable. + + + + + +## Custom Values + +Autocomplete also supports user-submitted values via the `isCustomValueAllowed` prop. + + + + diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx index f0a21f3f43..e0d9a0a44c 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx @@ -25,182 +25,74 @@ const storybookMeta: ComponentMeta = { }, }, argTypes: { + label: { + control: "text", + defaultValue: "Destination", + }, + hint: { + control: "text", + defaultValue: "Select your destination in the Sol system.", + }, isDisabled: { control: "boolean", - defaultValue: false, }, - // isCustomValueAllowed: { - // control: "boolean", - // defaultValue: false, - // }, - // includeInputInList: { - // control: "boolean", - // defaultValue: false, - // }, - // loading: { - // control: "boolean", - // defaultValue: false, - // }, - // hasMultipleChoices: { - // control: "boolean", - // defaultValue: false, - // }, - // readOnly: { - // control: "boolean", - // defaultValue: false, - // }, + isCustomValueAllowed: { + control: "boolean", + }, + isLoading: { + control: "boolean", + }, + hasMultipleChoices: { + control: "boolean", + }, + isReadOnly: { + control: "boolean", + }, }, decorators: [MuiThemeDecorator], }; export default storybookMeta; -type MovieType = { label: string; year: number }; +type StationType = { label: string }; // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films: ReadonlyArray = [ - { label: "The Shawshank Redemption", year: 1994 }, - { label: "The Godfather", year: 1972 }, - { label: "The Godfather: Part II", year: 1974 }, - { label: "The Dark Knight", year: 2008 }, - { label: "12 Angry Men", year: 1957 }, - { label: "Schindler's List", year: 1993 }, - { label: "Pulp Fiction", year: 1994 }, - { - label: "The Lord of the Rings: The Return of the King", - year: 2003, - }, - { label: "The Good, the Bad and the Ugly", year: 1966 }, - { label: "Fight Club", year: 1999 }, - { - label: "The Lord of the Rings: The Fellowship of the Ring", - year: 2001, - }, - { - label: "Star Wars: Episode V - The Empire Strikes Back", - year: 1980, - }, - { label: "Forrest Gump", year: 1994 }, - { label: "Inception", year: 2010 }, - { - label: "The Lord of the Rings: The Two Towers", - year: 2002, - }, - { label: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { label: "Goodfellas", year: 1990 }, - { label: "The Matrix", year: 1999 }, - { label: "Seven Samurai", year: 1954 }, - { - label: "Star Wars: Episode IV - A New Hope", - year: 1977, - }, - { label: "City of God", year: 2002 }, - { label: "Se7en", year: 1995 }, - { label: "The Silence of the Lambs", year: 1991 }, - { label: "It's a Wonderful Life", year: 1946 }, - { label: "Life Is Beautiful", year: 1997 }, - { label: "The Usual Suspects", year: 1995 }, - { label: "Léon: The Professional", year: 1994 }, - { label: "Spirited Away", year: 2001 }, - { label: "Saving Private Ryan", year: 1998 }, - { label: "Once Upon a Time in the West", year: 1968 }, - { label: "American History X", year: 1998 }, - { label: "Interstellar", year: 2014 }, - { label: "Casablanca", year: 1942 }, - { label: "City Lights", year: 1931 }, - { label: "Psycho", year: 1960 }, - { label: "The Green Mile", year: 1999 }, - { label: "The Intouchables", year: 2011 }, - { label: "Modern Times", year: 1936 }, - { label: "Raiders of the Lost Ark", year: 1981 }, - { label: "Rear Window", year: 1954 }, - { label: "The Pianist", year: 2002 }, - { label: "The Departed", year: 2006 }, - { label: "Terminator 2: Judgment Day", year: 1991 }, - { label: "Back to the Future", year: 1985 }, - { label: "Whiplash", year: 2014 }, - { label: "Gladiator", year: 2000 }, - { label: "Memento", year: 2000 }, - { label: "The Prestige", year: 2006 }, - { label: "The Lion King", year: 1994 }, - { label: "Apocalypse Now", year: 1979 }, - { label: "Alien", year: 1979 }, - { label: "Sunset Boulevard", year: 1950 }, - { - label: - "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb", - year: 1964, - }, - { label: "The Great Dictator", year: 1940 }, - { label: "Cinema Paradiso", year: 1988 }, - { label: "The Lives of Others", year: 2006 }, - { label: "Grave of the Fireflies", year: 1988 }, - { label: "Paths of Glory", year: 1957 }, - { label: "Django Unchained", year: 2012 }, - { label: "The Shining", year: 1980 }, - { label: "WALL·E", year: 2008 }, - { label: "American Beauty", year: 1999 }, - { label: "The Dark Knight Rises", year: 2012 }, - { label: "Princess Mononoke", year: 1997 }, - { label: "Aliens", year: 1986 }, - { label: "Oldboy", year: 2003 }, - { label: "Once Upon a Time in America", year: 1984 }, - { label: "Witness for the Prosecution", year: 1957 }, - { label: "Das Boot", year: 1981 }, - { label: "Citizen Kane", year: 1941 }, - { label: "North by Northwest", year: 1959 }, - { label: "Vertigo", year: 1958 }, - { - label: "Star Wars: Episode VI - Return of the Jedi", - year: 1983, - }, - { label: "Reservoir Dogs", year: 1992 }, - { label: "Braveheart", year: 1995 }, - { label: "M", year: 1931 }, - { label: "Requiem for a Dream", year: 2000 }, - { label: "Amélie", year: 2001 }, - { label: "A Clockwork Orange", year: 1971 }, - { label: "Like Stars on Earth", year: 2007 }, - { label: "Taxi Driver", year: 1976 }, - { label: "Lawrence of Arabia", year: 1962 }, - { label: "Double Indemnity", year: 1944 }, - { - label: "Eternal Sunshine of the Spotless Mind", - year: 2004, - }, - { label: "Amadeus", year: 1984 }, - { label: "To Kill a Mockingbird", year: 1962 }, - { label: "Toy Story 3", year: 2010 }, - { label: "Logan", year: 2017 }, - { label: "Full Metal Jacket", year: 1987 }, - { label: "Dangal", year: 2016 }, - { label: "The Sting", year: 1973 }, - { label: "2001: A Space Odyssey", year: 1968 }, - { label: "Singin' in the Rain", year: 1952 }, - { label: "Toy Story", year: 1995 }, - { label: "Bicycle Thieves", year: 1948 }, - { label: "The Kid", year: 1921 }, - { label: "Inglourious Basterds", year: 2009 }, - { label: "Snatch", year: 2000 }, - { label: "3 Idiots", year: 2009 }, - { label: "Monty Python and the Holy Grail", year: 1975 }, +const stations: ReadonlyArray = [ + { label: "Anderson Station" }, + { label: "Bara Gaon Complex" }, + { label: "Ceres" }, + { label: "Corley Station" }, + { label: "Deep Transfer Station Three" }, + { label: "Eros" }, + { label: "Free Navy Supply Depot" }, + { label: "Ganymede" }, + { label: "Gewitter Base" }, + { label: "Iapetus Station" }, + { label: "Kelso Station" }, + { label: "Laconian Transfer Station" }, + { label: "Mao Station" }, + { label: "Medina Station" }, + { label: "Nauvoo" }, + { label: "Oshima" }, + { label: "Osiris Station" }, + { label: "Pallas" }, + { label: "Phoebe Station" }, + { label: "Prospero Station" }, + { label: "Shirazi-Ma Complex" }, + { label: "Terryon Lock" }, + { label: "Thoth Station" }, + { label: "Tycho Station" }, + { label: "Vesta" }, ]; type AutocompleteType = AutocompleteProps< - MovieType | undefined, + StationType | undefined, boolean | undefined, boolean | undefined >; const Template: Story = (args) => { - return ( - - ); + return ; }; const EmptyTemplate: Story = (args) => { @@ -213,7 +105,7 @@ Default.args = {}; export const disabled = Template.bind({}); disabled.args = { isDisabled: true, - value: { label: "The Godfather", year: 1972 }, + value: { label: "Tycho Station" }, }; export const isCustomValueAllowed = Template.bind({}); @@ -235,18 +127,18 @@ export const multipleDisabled = Template.bind({}); multipleDisabled.args = { hasMultipleChoices: true, isDisabled: true, - value: [{ label: "The Godfather", year: 1972 }], + value: [{ label: "Tycho Station" }], }; export const multipleReadOnly = Template.bind({}); multipleReadOnly.args = { hasMultipleChoices: true, isReadOnly: true, - value: [{ label: "The Godfather", year: 1972 }], + value: [{ label: "Tycho Station" }], }; export const readOnly = Template.bind({}); readOnly.args = { isReadOnly: true, - value: { label: "The Godfather", year: 1972 }, + value: { label: "Tycho Station" }, }; diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.mdx index 01bc475acf..c5a7d9162e 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.mdx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.mdx @@ -68,10 +68,6 @@ Banner content should be succinct and direct. If possible, your content should b When including an action, be sure the link text clearly indicates where it leads. -## Props - - - ## References
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.mdx index 8aea429d4b..d608b5443f 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.mdx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.mdx @@ -16,8 +16,6 @@ Interacting with a Select displays a list of values to choose from. Choosing a v Odyssey also supports a Multi-Select variant that allows users to select many values. -To support expected functionality and behaviors, Select relies on the Choices.js library. Odyssey provides fallback styling when Choices.js isn't available. - ## Variants Odyssey provides support for both single and multi-value Selects.