search

carbon-design-system / carbon-addons-cloud-vanilla

Apache License 2.0
4 stars 5 forks source link

Card component styles: No layer found for `overflowOptions` in $z-indexes map #15

Closed petersandor closed 6 years ago

petersandor commented 6 years ago

Detailed description

I was getting deprecation warnings when I imported styles from carbon-design-system/carbon-components.

WARNING: 
REASON: Accessing the `card` component from the `carbon-components` package is deprecated. Use the `carbon-addons-bluemix` package instead.
REASON: Accessing the `detail-page-header` component from the `carbon-components` package is deprecated. Use the `carbon-addons-bluemix` package instead.
REASON: Accessing the `module` component from the `carbon-components` package is deprecated. Use the `carbon-addons-bluemix` package instead.
REASON: Accessing the `interior-left-nav` component from the `carbon-components`package is deprecated. Use the `carbon-addons-bluemix` package instead.
REASON: Accessing the `order-summary` component from the `carbon-components` package is deprecated. Use the `carbon-addons-bluemix` package instead.
Backtrace:
    node_modules/carbon-components/scss/globals/scss/styles.scss:117

So I tried importing styles from individual components from carbon-addons-bluemix, starting with card component styles, but then during build I was prompted with the following warning:

WARNING: No layer found for `overflowOptions` in $z-indexes map. Property omitted.
Backtrace:
    node_modules/carbon-components/scss/globals/scss/_layout.scss:76, in function `z`
    node_modules/carbon-addons-bluemix/scss/components/card/_card.scss:50, in mixin `@content`
    node_modules/carbon-components/scss/globals/scss/_import-once.scss:12, in mixin `exports`
    node_modules/carbon-addons-bluemix/scss/components/card/_card.scss:18

overflowOptions is indeed missing from the $z-indexes map. See https://github.com/carbon-design-system/carbon-components/blob/e5dca273b54d6e4e3d65893441b1ff8b9d9e8c29/src/globals/scss/_layout.scss#L54-L63

Is this issue related to a specific component?

Yes, card component.

What did you expect to happen? What happened instead? What would you like to see changed?

I expected no warnings related to card component styles.

What version of the Carbon Design System are you using?

carbon-addons-bluemix@0.3.0 carbon-components@8.16.7

Steps to reproduce the issue

  1. Create a project which uses webpack to bundle resources (fastest way would be via either ng-cli or create-react-app or similar)
  2. Try to import card styles from within the app, like this:
    • @import '~carbon-addons-bluemix/scss/components/card/_card'; (w or w/o tilde, depending on webpack config)
  3. Try to build the app (dev only is sufficient)
  4. Warning which I pasted above is shown