Skip to content

fix(Popover): nested popover - css fix#13750

Merged
kodiakhq[bot] merged 7 commits into
carbon-design-system:mainfrom
guidari:13684-nested-popover-open
May 22, 2023
Merged

fix(Popover): nested popover - css fix#13750
kodiakhq[bot] merged 7 commits into
carbon-design-system:mainfrom
guidari:13684-nested-popover-open

Conversation

@guidari

@guidari guidari commented May 5, 2023

Copy link
Copy Markdown
Contributor

Closes #13684

When an IconButton is placed within a Popover, the iconDescription is always visible. Popover's *--open classes are not properly scoped to only impact children Popovers one "level" deep.

Repro
https://stackblitz.com/edit/github-b5r8er?file=src/App.jsx

In order to apply the style to only the first child of the CSS class .#{$prefix}--popover, we are specifically checking for its direct child

Testing / Reviewing

You can find a new component called 'Test Issue' inside Popover in Storybook. Checking out this component will allow you to test its functionality. Additionally, going to the Button storybook and checking if everything is okay with the 'Icon Button' would also be a good idea.

Once its approved I'll remove the storybook, or the second approver can remove

@guidari guidari requested a review from a team as a code owner May 5, 2023 20:05
@netlify

netlify Bot commented May 5, 2023

Copy link
Copy Markdown

Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 153cee3
🔍 Latest deploy log https://app.netlify.com/sites/carbon-components-react/deploys/646bb7fe10078400086f13d1
😎 Deploy Preview https://deploy-preview-13750--carbon-components-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify

netlify Bot commented May 5, 2023

Copy link
Copy Markdown

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 153cee3
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/646bb7fe5032110008c605c5
😎 Deploy Preview https://deploy-preview-13750--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@andreancardona andreancardona left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

It looks like the change in styles produces a bug for this story below Tab Tip - deploy preview

Screenshot 2023-05-08 at 09 37 41

Current design / how it should look:

Let me know if you want to look at this together :)

@guidari guidari requested a review from andreancardona May 11, 2023 12:26
@guidari

guidari commented May 11, 2023

Copy link
Copy Markdown
Contributor Author

@andreancardona I added a new CSS style to make sure that when isTabTip is set the display is set to none

Comment thread packages/react/src/components/Popover/Popover.stories.js Outdated
Comment thread packages/react/src/components/Popover/Popover.stories.js Outdated
@kodiakhq kodiakhq Bot merged commit 6f1db2d into carbon-design-system:main May 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Nested Popovers are always open

3 participants