import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as d}from"./index-BeeV6X6A.js";import{M as o}from"./index-DLgQDw3r.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./iframe-Cf-Lpz6Y.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function i(s){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...d(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{}),`
`,e.jsx(n.h1,{id:"migrations",children:"Migrations"}),`
`,e.jsxs(n.h2,{id:"v021x-️-v023x",children:[e.jsx(n.code,{children:"v0.21.x"})," ➡️ ",e.jsx(n.code,{children:"v0.23.x"})]}),`
`,e.jsx(n.h3,{id:"new-components",children:"New Components"}),`
`,e.jsxs(n.ul,{children:[`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Autocomplete"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Fieldset"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Form"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"PasswordField"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"SearchField"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Toast"})}),`
`]}),`
`,e.jsx(n.h3,{id:"components-with-props-changes",children:"Components with Props Changes"}),`
`,e.jsxs(n.ul,{children:[`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Banner"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Button"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Checkbox"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Dialog"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Icon"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Callout"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"MenuButton"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Radio"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"RadioGroup"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Tag"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"TagList"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"TextField"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Toast"})}),`
`]}),`
`,e.jsx(n.h3,{id:"component-api",children:"Component API"}),`
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"All components are now being wrapped and many prop names have changed. Prop names and APIs will now be more consistent across Odyssey."})}),`
`,e.jsx(n.h3,{id:"deprecations",children:"Deprecations"}),`
`,e.jsxs(n.ol,{children:[`
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"InputAdornment"})," is no longer erquired for ",e.jsx(n.code,{children:"startAdronment"})," and ",e.jsx(n.code,{children:"endAdornment"})," on ",e.jsx(n.code,{children:"TextField"}),"."]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"InputBase"})," should be replaced with ",e.jsx(n.code,{children:"TextField"}),"."]}),`
`,e.jsxs(n.li,{children:["The ",e.jsx(n.code,{children:"size"})," prop on ",e.jsx(n.code,{children:"Icon"})," is now required."]}),`
`]}),`
`,e.jsxs(n.h2,{id:"v017x-️-v021x",children:[e.jsx(n.code,{children:"v0.17.x"})," ➡️ ",e.jsx(n.code,{children:"v0.21.x"})]}),`
`,e.jsx(n.h3,{id:"new-components-1",children:"New Components"}),`
`,e.jsxs(n.ul,{children:[`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Banner"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Checkbox"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"CheckboxGroup"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Chip"})}),`
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"DatePicker"})," (Labs)"]}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Callout"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"ListSubheader"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Radio"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"RadioGroup"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"ScopedCssBaseline"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"ScreenReaderText"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Status"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"TextField"})}),`
`]}),`
`,e.jsx(n.h3,{id:"components-with-props-changes-1",children:"Components with Props Changes"}),`
`,e.jsxs(n.ul,{children:[`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Checkbox"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"Radio"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"RadioGroup"})}),`
`]}),`
`,e.jsx(n.h3,{id:"component-api-1",children:"Component API"}),`
`,e.jsxs(n.ol,{children:[`
`,e.jsx(n.li,{children:"Many new components have been added and wrapped; although, prop names in these versions are not necessarily following Odyssey guidelines."}),`
`,e.jsx(n.li,{children:"MUI-passthrough is still allowed even for wrapped components. This will change in later versions."}),`
`]}),`
`,e.jsx(n.h3,{id:"deprecations-1",children:"Deprecations"}),`
`,e.jsxs(n.ol,{children:[`
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"InputBase"})," should be replaced with ",e.jsx(n.code,{children:"TextField"}),"."]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"InputLabel"})," should not be used. We build it into our field components and created an internal ",e.jsx(n.code,{children:"Field"})," component to ensure matching styles. If you have custom field components that we don't support, message in ",e.jsx(n.code,{children:"#odyssey"})," to see if we should add your field or expose ",e.jsx(n.code,{children:"Field"}),"."]}),`
`]}),`
`,e.jsxs(n.h2,{id:"v014x-️-017x",children:[e.jsx(n.code,{children:"v0.14.x"})," ➡️ ",e.jsx(n.code,{children:"0.17.x"})]}),`
`,e.jsx(n.h3,{id:"importing-from-odyssey",children:"Importing from Odyssey"}),`
`,e.jsxs(n.p,{children:["As of ",e.jsx(n.code,{children:"0.15.2"}),", all MUI and Odyssey components are exported from ",e.jsx(n.code,{children:"@okta/odyssey-react-mui"}),". No further need to maintain a separate version of MUI."]}),`
`,e.jsx(n.p,{children:"If you're using components not supported by Odyssey, please get your product designers in touch with Odyssey to see what we need to do going forward."}),`
`,e.jsx(n.p,{children:"It's possible you need to still have your own MUI version, but it's possible there's an Odyssey design solution."}),`
`,e.jsx(n.p,{children:"Also, Odyssey-Labs exists for this very purpose; things that you want in Odyssey, but we haven't had a finalized design."}),`
`,e.jsx(n.h3,{id:"theming",children:"Theming"}),`
`,e.jsxs(n.p,{children:["Odyssey now includes theme components and CSP nonce built into it's ",e.jsx(n.code,{children:"OdysseyProvider"})," wrapper. Just like MUI's ",e.jsx(n.code,{children:"ThemeProvider"}),", this needs to go at the top-level of your app and takes no props."]}),`
`,e.jsxs(n.p,{children:["In a later update, this component will be renamed ",e.jsx(n.code,{children:"OdysseyProvider"}),"."]}),`
`,e.jsx(n.h4,{id:"custom-theming",children:"Custom Theming"}),`
`,e.jsxs(n.p,{children:["It's possible you want to customize Odyssey's theme because of your app's requirements. You'll want ",e.jsx(n.code,{children:"OdysseyProvider"})," (MUI and Odyssey theme wrapper)."]}),`
`,e.jsxs(n.p,{children:["At this point, we still export ",e.jsx(n.code,{children:"MuiThemeProvider"})]}),`
`,e.jsx(n.h3,{id:"usetheme",children:e.jsx(n.code,{children:"useTheme"})}),`
`,e.jsxs(n.ul,{children:[`
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"typography.body"})," is now ",e.jsx(n.code,{children:"typography.body1"}),"."]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"typography.caption"})," is now ",e.jsx(n.code,{children:"typography.subtitle"}),"."]}),`
`]})]})}function y(s={}){const{wrapper:n}={...d(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(i,{...s})}):i(s)}export{y as default};
