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.

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

update(Modal): Add optional zIndex to props #412

Merged
merged 3 commits into from
Mar 15, 2021

Conversation

nilgradisnik
Copy link
Contributor

to: @williaster @alecklandgraf

Description

Allow for optional zIndex to be passed to Modal.

Motivation and Context

We want to override z-index for Modals that are in a Lighbox component where a recent change increased the z-index #411. This allows to bring such Modals to the front.

Testing

Tested in storybook

Screenshots

Screen Shot 2021-03-15 at 10 16 20 AM

Checklist

  • My code follows the style guide of this project.
  • I have updated or added documentation accordingly.
  • I have read the CONTRIBUTING document.

@airbnb-bot
Copy link
Collaborator

Size Changes

Package Diff ESM Prev ESM CJS Prev CJS
core +0.0% 570.87 KB 570.69 KB 715.98 KB 715.76 KB

Compared to master. File sizes are unminified and ungzipped.

View raw build stats

Previous (master)

{
  "apollo": {
    "esm": 10832,
    "lib": 14147
  },
  "app-shell": {
    "esm": 12906,
    "lib": 19874
  },
  "composer": {
    "esm": 68247,
    "lib": 101805
  },
  "core": {
    "esm": 584388,
    "lib": 732939
  },
  "forms": {
    "esm": 37350,
    "lib": 49298
  },
  "icons": {
    "esm": 156355,
    "lib": 205626
  },
  "layouts": {
    "esm": 15298,
    "lib": 20770
  },
  "metrics": {
    "esm": 5467,
    "lib": 7729
  },
  "test-utils": {
    "esm": 4279,
    "lib": 5937
  }
}

Current

{
  "apollo": {
    "esm": 10832,
    "lib": 14147
  },
  "app-shell": {
    "esm": 12906,
    "lib": 19874
  },
  "composer": {
    "esm": 68247,
    "lib": 101805
  },
  "core": {
    "esm": 584567,
    "lib": 733164
  },
  "forms": {
    "esm": 37350,
    "lib": 49298
  },
  "icons": {
    "esm": 156355,
    "lib": 205626
  },
  "layouts": {
    "esm": 15298,
    "lib": 20770
  },
  "metrics": {
    "esm": 5467,
    "lib": 7729
  },
  "test-utils": {
    "esm": 4279,
    "lib": 5937
  }
}


export type ModalProps = ModalInnerProps & {
/** Custom style sheet. */
innerStyleSheet?: StyleSheet;
/** Z-index of the modal. */
zIndex?: number | 'auto';
Copy link
Contributor

Choose a reason for hiding this comment

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

what's the difference between auto and Z_INDEX_MODAL here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is saying zIndex can be either a number or a string auto. This is a typescript type union, not a default value.

@nilgradisnik nilgradisnik merged commit 5fa4524 into master Mar 15, 2021
@nilgradisnik nilgradisnik deleted the nil--modal-expose-zindex branch March 15, 2021 21:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants