carbon-design-system
fix(CreateFullPage): beadcrumbs style issue
Closes #5452
Fixed style issue of breadcrumb in header of CreateFullPage
What did you change? packages/ibm-products-styles/src/components/CreateFullPage/_create-full-page.scss
How did you test and verify your work? storybook
Deploy Preview for carbon-for-ibm-products ready!
| Name | Link |
|---|---|
| Latest commit | 4acd6291eb62b7a6483e9032627b09264fdb0b18 |
| Latest deploy log | https://app.netlify.com/sites/carbon-for-ibm-products/deploys/668b93a6fb1a34000850da6d |
| Deploy Preview | https://deploy-preview-5599--carbon-for-ibm-products.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hey @matthewgallo,
Looks like we are using carbon component as it is. In carbon story book, this issue is not observed as the default button styles are overridden by styles from class cds--overflow-menu. But in CreateFullPage, this styles from this same class has got low priority. Can you share your thoughts on this behaviour?
These changes should actually be applied to the SimpleHeader component. It is a simplified version of the PageHeader and that's where the style issues are coming from here. It has a corresponding style file (_simple-header.scss) where these fixes can be applied.
See comment around making these changes within
_simple-header.scss.
@anamikaanu96 ,
I could see lot of carbon styles was added redundantly to the component due to the below style import in the _storybook-styles.scss file of createFullPage. This changed the priority of the styles which caused this issue. You can see styles for .cds--btn--primary is added twice.
@use '@carbon/styles/scss/components/ui-shell' as *;
I think we can remove this line or add the particular style fix to the _storybook-styles.scss file as this issue should be specific to storybook.
@matthewgallo , Can you share your thoughts here. Shall we remove this style import.?
I agree, lets just remove the ui-shell style import from _storybook-styles.scss for CreateFullPage. It's causing specificity issues and is already imported when we import the base Carbon styles from packages/core/.storybook/carbon.scss.