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

feat: add DatePicker styles to Labs #1672

Merged
merged 15 commits into from
Feb 2, 2023
Merged

feat: add DatePicker styles to Labs #1672

merged 15 commits into from
Feb 2, 2023

Conversation

KevinGhadyani-Okta
Copy link
Contributor

@KevinGhadyani-Okta KevinGhadyani-Okta commented Jan 26, 2023 •
edited
Loading

@macyabbey-okta
Copy link
Contributor

@KevinGhadyani-Okta 👀 Nice! We've been using a pretty jenky one in IGA for awhile - will be great to replace it with this.

@johndiiorio-okta

@edburyenegren-okta
Copy link
Contributor

@KevinGhadyani-Okta once CI is happy, we can get a design review from Taylor

kamronbatmanghelich-okta
kamronbatmanghelich-okta reviewed Jan 30, 2023
View reviewed changes
packages/odyssey-react-labs/src/datePickerTheme.tsx
styleOverrides: {
root: () => ({
"& > div": {
width: `${(296 / 16) * (16 / 14)}rem`,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will these every vary as designs change? (296, 214, etc)? Do they need to be captured somewhere?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also feeling iffy about this since 296 is a magic number. If there's no good fluid way to determine the appropriate width, we could at least change 14 to theme.typography.fontSize

Copy link
Contributor Author

@KevinGhadyani-Okta KevinGhadyani-Okta Jan 30, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They're specific to this set of styles. I can't not have it. I'd prefer to have it be "auto", but MUI expects a fixed-width here for whatever reason.

It's also possible I can remove this. I was having border-box problems, but I think I made this change prior to fixing border-box.

I'll re-check and see if I can safely remove this fixed-width because YUCK!

Also, I think this number is calculated off of the width of the labels * 7 + padding * 2. I can probably make it not a magic number regardless.

macyabbey-okta
macyabbey-okta approved these changes Jan 31, 2023
View reviewed changes
Copy link
Contributor

@macyabbey-okta macyabbey-okta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice incremental value add to Labs!

In a fun bit of history, here's the Aug 2021 PR from okta-ui-react to originally get something available for Reporting 2.0 / IGA: https://github.com/okta/okta-ui-react/pull/959

@KevinGhadyani-Okta KevinGhadyani-Okta changed the title feat: Labs DatePicker styles feat: add DatePicker styles to Labs Feb 2, 2023
@KevinGhadyani-Okta KevinGhadyani-Okta merged commit f8d8b5e into develop Feb 2, 2023
@KevinGhadyani-Okta KevinGhadyani-Okta deleted the kg/OKTA-541318 branch February 2, 2023 20:32
KevinGhadyani-Okta added a commit that referenced this pull request Feb 2, 2023
@KevinGhadyani-Okta @jordankoschei-okta
@glenfannin-okta @edburyenegren-okta @kamronbatmanghelich-okta
Release/v0.18.0 (#1676)
7cf5f30 
* feat: wrap banner and add stories

* refactor: enforce children as string

* refactor: ensure role is "status" or undefined

* refactor: replace onClick with isDismissable

* docs: added explanatory comments to BannerProps

* refactor: flatten the component file structure

* refactor: replace isDismissable with onClose

* refactor: remove vestigial imports from banner stories

* fix: fix story component

* fix: textAlign logical value in FormHelperText for RTL support

* feat: updated a bunch of packages to the latest version

* fix(odyssey-react-mui): make Link a11y-compliant in all cases

* chore: adds typescript plugin

* fix: remove unused flags

* fix: removed unnecessary useNx in lerna.json

* docs: updated README for MUI and Labs packages

* feat: re-exported MUI List components as Odyssey MUI components

* fix: removed potentially problematic nx.json

* fix: another potential Lerna build order fix

* fix: moved typecheck command back to Lerna

* fix: run build a second time before doing a typecheck

* fix: another potential nx Lerna fix

* fix: removed Nx caching from Lerna

* refactor: change onClose type

* fix: removed nx.json

* fix: upgraded Yarn version in script

* chore: scaffold the RadioGroup and Radio files

* feat: abstract Radio and RadioGroup

* feat: add name and defaultValue attributes

* fix: update physical CSS properties (*-left, *-right) to use logical CSS counterpart for RTL support

* fix: ensure aria-describedby only show when needed

* feat(odyssey-react-mui): wrap and export Status component

* docs(odyssey-storybook): update Status stories to use Status

* fix: update type of onClose for lintert

* fix: remove vestigial AlertProps import

* fix: add Status import to index

* refactor: remove unnecessary undefineds

* Merge branch 'master' into 'release/v0.17.2'

* feat(odyssey-react-mui): export ScopedCssBaseline for use

* feat(odyssey-react-mui)!: make rem-base themeable, add element styles to ScopedCssBaseline

BREAKING CHANGE: remove `kbd` variant from Typography component

* refactor(odyssey-storybook): storybook now relies on MUI theme for correct story font-size

* docs(odyssey-storybook): add docs for CssBaseline, update Typography and Elements

* refactor: improve describedby aria element

* fix: update RadioGroup params in other stories

* fix: remove unneeded import

* feat(odyssey-react-mui): add element styles to ScopedCssBaseline

* docs(odyssey-storybook): add stories for all new elements

* docs(odyssey-storybook): remove unnec elements inventory

* chore: clean up IDE insertion

* fix(odyssey-react-mui): provide safety dec for input box-shadow

* fix: onClose prop type

* fix: adjusted boolean prop names in RadioGroup

* fix: adjusted boolean prop names in Radio

* docs(odyssey-storybook): update Checkbox examples

* fix(odyssey-react-mui): make figcaption styles a fallback

* docs(odyssey-storybook): add ScopedCss to stories for accurate VRT

* docs(odyssey-storybook): add titles and captions to table stories

* docs(odyssey-storybook): update radio content

* chore: ignore MUI ts error

* feat: updated Radio and fixed types on TextField and Banner

* fix: minor update to Radio template name

* fix: converted types to new Storybook component versions

* fix: banner having string function defined

* feat: add DatePicker styles to Labs (#1672)

* fix: date picker style types incorrect

* feat: wip styled DatePicker to match wip design

* feat: updated dependencies for MUI and MUI-X

* fix: added more styles for DatePicker

* feat: upgrade x-date-picker version

* feat: update DatePicker year styles

* feat: upgrade TypeScript

* fix: adjusted DatePicker styles

* fix: adjusted DatePicker popover alignment

* fix: added year and month styling for DatePicker

* fix: ci passes

* fix: tweaked month styles because of shorthand and fixed view ordering

* fix: story naming

* fix: month and year styling

* fix: year defocus styling

* build: bump versions for v0.18.0

* docs: update CHANGELOG for v0.18.0

* docs: fixed TextField docs and removed PasswordInput

---------

Co-authored-by: Jordan Koschei <jordan.koschei@okta.com>
Co-authored-by: Glen <97472729+glenfannin-okta@users.noreply.github.com>
Co-authored-by: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Co-authored-by: Kamron Batmanghelich <kamron.batmanghelich@okta.com>
Co-authored-by: Edbury Enegren <edbury.enegren@okta.com>
Co-authored-by: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com>
KevinGhadyani-Okta added a commit that referenced this pull request Feb 2, 2023
@KevinGhadyani-Okta @jordankoschei-okta
@glenfannin-okta @edburyenegren-okta @kamronbatmanghelich-okta
Release/v0.18.0 (#1677)
2e3bd2e 
* feat: wrap banner and add stories

* refactor: enforce children as string

* refactor: ensure role is "status" or undefined

* refactor: replace onClick with isDismissable

* docs: added explanatory comments to BannerProps

* refactor: flatten the component file structure

* refactor: replace isDismissable with onClose

* refactor: remove vestigial imports from banner stories

* fix: fix story component

* fix: textAlign logical value in FormHelperText for RTL support

* feat: updated a bunch of packages to the latest version

* fix(odyssey-react-mui): make Link a11y-compliant in all cases

* chore: adds typescript plugin

* fix: remove unused flags

* fix: removed unnecessary useNx in lerna.json

* docs: updated README for MUI and Labs packages

* feat: re-exported MUI List components as Odyssey MUI components

* fix: removed potentially problematic nx.json

* fix: another potential Lerna build order fix

* fix: moved typecheck command back to Lerna

* fix: run build a second time before doing a typecheck

* fix: another potential nx Lerna fix

* fix: removed Nx caching from Lerna

* refactor: change onClose type

* fix: removed nx.json

* fix: upgraded Yarn version in script

* chore: scaffold the RadioGroup and Radio files

* feat: abstract Radio and RadioGroup

* feat: add name and defaultValue attributes

* fix: update physical CSS properties (*-left, *-right) to use logical CSS counterpart for RTL support

* fix: ensure aria-describedby only show when needed

* feat(odyssey-react-mui): wrap and export Status component

* docs(odyssey-storybook): update Status stories to use Status

* fix: update type of onClose for lintert

* fix: remove vestigial AlertProps import

* fix: add Status import to index

* refactor: remove unnecessary undefineds

* Merge branch 'master' into 'release/v0.17.2'

* feat(odyssey-react-mui): export ScopedCssBaseline for use

* feat(odyssey-react-mui)!: make rem-base themeable, add element styles to ScopedCssBaseline

BREAKING CHANGE: remove `kbd` variant from Typography component

* refactor(odyssey-storybook): storybook now relies on MUI theme for correct story font-size

* docs(odyssey-storybook): add docs for CssBaseline, update Typography and Elements

* refactor: improve describedby aria element

* fix: update RadioGroup params in other stories

* fix: remove unneeded import

* feat(odyssey-react-mui): add element styles to ScopedCssBaseline

* docs(odyssey-storybook): add stories for all new elements

* docs(odyssey-storybook): remove unnec elements inventory

* chore: clean up IDE insertion

* fix(odyssey-react-mui): provide safety dec for input box-shadow

* fix: onClose prop type

* fix: adjusted boolean prop names in RadioGroup

* fix: adjusted boolean prop names in Radio

* docs(odyssey-storybook): update Checkbox examples

* fix(odyssey-react-mui): make figcaption styles a fallback

* docs(odyssey-storybook): add ScopedCss to stories for accurate VRT

* docs(odyssey-storybook): add titles and captions to table stories

* docs(odyssey-storybook): update radio content

* chore: ignore MUI ts error

* feat: updated Radio and fixed types on TextField and Banner

* fix: minor update to Radio template name

* fix: converted types to new Storybook component versions

* fix: banner having string function defined

* feat: add DatePicker styles to Labs (#1672)

* fix: date picker style types incorrect

* feat: wip styled DatePicker to match wip design

* feat: updated dependencies for MUI and MUI-X

* fix: added more styles for DatePicker

* feat: upgrade x-date-picker version

* feat: update DatePicker year styles

* feat: upgrade TypeScript

* fix: adjusted DatePicker styles

* fix: adjusted DatePicker popover alignment

* fix: added year and month styling for DatePicker

* fix: ci passes

* fix: tweaked month styles because of shorthand and fixed view ordering

* fix: story naming

* fix: month and year styling

* fix: year defocus styling

* build: bump versions for v0.18.0

* docs: update CHANGELOG for v0.18.0

* docs: fixed TextField docs and removed PasswordInput

* fix: deploy script not using correct name

---------

Co-authored-by: Jordan Koschei <jordan.koschei@okta.com>
Co-authored-by: Glen <97472729+glenfannin-okta@users.noreply.github.com>
Co-authored-by: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Co-authored-by: Kamron Batmanghelich <kamron.batmanghelich@okta.com>
Co-authored-by: Edbury Enegren <edbury.enegren@okta.com>
Co-authored-by: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com>
KevinGhadyani-Okta added a commit that referenced this pull request Feb 2, 2023
@KevinGhadyani-Okta @jordankoschei-okta
@glenfannin-okta @edburyenegren-okta @kamronbatmanghelich-okta
Release/v0.18.0 (#1678)
f257b0a 
* feat: wrap banner and add stories

* refactor: enforce children as string

* refactor: ensure role is "status" or undefined

* refactor: replace onClick with isDismissable

* docs: added explanatory comments to BannerProps

* refactor: flatten the component file structure

* refactor: replace isDismissable with onClose

* refactor: remove vestigial imports from banner stories

* fix: fix story component

* fix: textAlign logical value in FormHelperText for RTL support

* feat: updated a bunch of packages to the latest version

* fix(odyssey-react-mui): make Link a11y-compliant in all cases

* chore: adds typescript plugin

* fix: remove unused flags

* fix: removed unnecessary useNx in lerna.json

* docs: updated README for MUI and Labs packages

* feat: re-exported MUI List components as Odyssey MUI components

* fix: removed potentially problematic nx.json

* fix: another potential Lerna build order fix

* fix: moved typecheck command back to Lerna

* fix: run build a second time before doing a typecheck

* fix: another potential nx Lerna fix

* fix: removed Nx caching from Lerna

* refactor: change onClose type

* fix: removed nx.json

* fix: upgraded Yarn version in script

* chore: scaffold the RadioGroup and Radio files

* feat: abstract Radio and RadioGroup

* feat: add name and defaultValue attributes

* fix: update physical CSS properties (*-left, *-right) to use logical CSS counterpart for RTL support

* fix: ensure aria-describedby only show when needed

* feat(odyssey-react-mui): wrap and export Status component

* docs(odyssey-storybook): update Status stories to use Status

* fix: update type of onClose for lintert

* fix: remove vestigial AlertProps import

* fix: add Status import to index

* refactor: remove unnecessary undefineds

* Merge branch 'master' into 'release/v0.17.2'

* feat(odyssey-react-mui): export ScopedCssBaseline for use

* feat(odyssey-react-mui)!: make rem-base themeable, add element styles to ScopedCssBaseline

BREAKING CHANGE: remove `kbd` variant from Typography component

* refactor(odyssey-storybook): storybook now relies on MUI theme for correct story font-size

* docs(odyssey-storybook): add docs for CssBaseline, update Typography and Elements

* refactor: improve describedby aria element

* fix: update RadioGroup params in other stories

* fix: remove unneeded import

* feat(odyssey-react-mui): add element styles to ScopedCssBaseline

* docs(odyssey-storybook): add stories for all new elements

* docs(odyssey-storybook): remove unnec elements inventory

* chore: clean up IDE insertion

* fix(odyssey-react-mui): provide safety dec for input box-shadow

* fix: onClose prop type

* fix: adjusted boolean prop names in RadioGroup

* fix: adjusted boolean prop names in Radio

* docs(odyssey-storybook): update Checkbox examples

* fix(odyssey-react-mui): make figcaption styles a fallback

* docs(odyssey-storybook): add ScopedCss to stories for accurate VRT

* docs(odyssey-storybook): add titles and captions to table stories

* docs(odyssey-storybook): update radio content

* chore: ignore MUI ts error

* feat: updated Radio and fixed types on TextField and Banner

* fix: minor update to Radio template name

* fix: converted types to new Storybook component versions

* fix: banner having string function defined

* feat: add DatePicker styles to Labs (#1672)

* fix: date picker style types incorrect

* feat: wip styled DatePicker to match wip design

* feat: updated dependencies for MUI and MUI-X

* fix: added more styles for DatePicker

* feat: upgrade x-date-picker version

* feat: update DatePicker year styles

* feat: upgrade TypeScript

* fix: adjusted DatePicker styles

* fix: adjusted DatePicker popover alignment

* fix: added year and month styling for DatePicker

* fix: ci passes

* fix: tweaked month styles because of shorthand and fixed view ordering

* fix: story naming

* fix: month and year styling

* fix: year defocus styling

* build: bump versions for v0.18.0

* docs: update CHANGELOG for v0.18.0

* docs: fixed TextField docs and removed PasswordInput

* fix: deploy script not using correct name

* fix: node version script double-v incorrect

---------

Co-authored-by: Jordan Koschei <jordan.koschei@okta.com>
Co-authored-by: Glen <97472729+glenfannin-okta@users.noreply.github.com>
Co-authored-by: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Co-authored-by: Kamron Batmanghelich <kamron.batmanghelich@okta.com>
Co-authored-by: Edbury Enegren <edbury.enegren@okta.com>
Co-authored-by: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com>
KevinGhadyani-Okta added a commit that referenced this pull request Feb 9, 2023
@KevinGhadyani-Okta @jordankoschei-okta
@glenfannin-okta @edburyenegren-okta @kamronbatmanghelich-okta
Release v0.19.0 (#1690)
caf1565 
* feat: wrap banner and add stories

* refactor: enforce children as string

* refactor: ensure role is "status" or undefined

* refactor: replace onClick with isDismissable

* docs: added explanatory comments to BannerProps

* refactor: flatten the component file structure

* refactor: replace isDismissable with onClose

* refactor: remove vestigial imports from banner stories

* fix: fix story component

* fix: textAlign logical value in FormHelperText for RTL support

* feat: updated a bunch of packages to the latest version

* fix(odyssey-react-mui): make Link a11y-compliant in all cases

* chore: adds typescript plugin

* fix: remove unused flags

* fix: removed unnecessary useNx in lerna.json

* docs: updated README for MUI and Labs packages

* feat: re-exported MUI List components as Odyssey MUI components

* fix: removed potentially problematic nx.json

* fix: another potential Lerna build order fix

* fix: moved typecheck command back to Lerna

* fix: run build a second time before doing a typecheck

* fix: another potential nx Lerna fix

* fix: removed Nx caching from Lerna

* refactor: change onClose type

* fix: removed nx.json

* fix: upgraded Yarn version in script

* chore: scaffold the RadioGroup and Radio files

* feat: abstract Radio and RadioGroup

* feat: add name and defaultValue attributes

* fix: update physical CSS properties (*-left, *-right) to use logical CSS counterpart for RTL support

* fix: ensure aria-describedby only show when needed

* feat(odyssey-react-mui): wrap and export Status component

* docs(odyssey-storybook): update Status stories to use Status

* fix: update type of onClose for lintert

* fix: remove vestigial AlertProps import

* fix: add Status import to index

* refactor: remove unnecessary undefineds

* Merge branch 'master' into 'release/v0.17.2'

* feat(odyssey-react-mui): export ScopedCssBaseline for use

* feat(odyssey-react-mui)!: make rem-base themeable, add element styles to ScopedCssBaseline

BREAKING CHANGE: remove `kbd` variant from Typography component

* refactor(odyssey-storybook): storybook now relies on MUI theme for correct story font-size

* docs(odyssey-storybook): add docs for CssBaseline, update Typography and Elements

* refactor: improve describedby aria element

* fix: update RadioGroup params in other stories

* fix: remove unneeded import

* feat(odyssey-react-mui): add element styles to ScopedCssBaseline

* docs(odyssey-storybook): add stories for all new elements

* docs(odyssey-storybook): remove unnec elements inventory

* chore: clean up IDE insertion

* fix(odyssey-react-mui): provide safety dec for input box-shadow

* fix: onClose prop type

* fix: adjusted boolean prop names in RadioGroup

* fix: adjusted boolean prop names in Radio

* docs(odyssey-storybook): update Checkbox examples

* fix(odyssey-react-mui): make figcaption styles a fallback

* docs(odyssey-storybook): add ScopedCss to stories for accurate VRT

* docs(odyssey-storybook): add titles and captions to table stories

* docs(odyssey-storybook): update radio content

* chore: ignore MUI ts error

* feat: updated Radio and fixed types on TextField and Banner

* fix: minor update to Radio template name

* fix: converted types to new Storybook component versions

* fix: banner having string function defined

* feat: add DatePicker styles to Labs (#1672)

* fix: date picker style types incorrect

* feat: wip styled DatePicker to match wip design

* feat: updated dependencies for MUI and MUI-X

* fix: added more styles for DatePicker

* feat: upgrade x-date-picker version

* feat: update DatePicker year styles

* feat: upgrade TypeScript

* fix: adjusted DatePicker styles

* fix: adjusted DatePicker popover alignment

* fix: added year and month styling for DatePicker

* fix: ci passes

* fix: tweaked month styles because of shorthand and fixed view ordering

* fix: story naming

* fix: month and year styling

* fix: year defocus styling

* feat(odyssey-react-mui): add 'alert' to available Banner roles

* feat(odyssey-react-mui): wrap and export Infobox

* docs(odyssey-storybook): update Infobox stories to use wrapped component

* chore: remove ancillary prop

* chore: update inline prop docs

* chore: remove defaults from Alert props

* merge v0.18.0 into develop (#1686)

Merge master into develop

* Added custom theming docs (#1689)

* feat: added Form custom component example

* feat: added docs for Custom Theming

* feat: added READMEs from Odyssey MUI and Labs to Storybook

* docs: included a section on Theme Variables in CustomTheming

* fix: introduction page on Storybook

* build: bump versions for v0.19.0

* docs: update CHANGELOG for v0.19.0

---------

Co-authored-by: Jordan Koschei <jordan.koschei@okta.com>
Co-authored-by: Glen <97472729+glenfannin-okta@users.noreply.github.com>
Co-authored-by: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Co-authored-by: Kamron Batmanghelich <kamron.batmanghelich@okta.com>
Co-authored-by: Edbury Enegren <edbury.enegren@okta.com>
Co-authored-by: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@edburyenegren-okta edburyenegren-okta edburyenegren-okta left review comments

@kamronbatmanghelich-okta kamronbatmanghelich-okta kamronbatmanghelich-okta approved these changes

@macyabbey-okta macyabbey-okta macyabbey-okta approved these changes

@ganeshsomasundaram-okta ganeshsomasundaram-okta Awaiting requested review from ganeshsomasundaram-okta

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@KevinGhadyani-Okta @macyabbey-okta @edburyenegren-okta @kamronbatmanghelich-okta