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

UI Shell wrong behavior - Web Components. v2 latest #11097

Open
hrstoyanov opened this issue Nov 5, 2023 Discussed in #11089 · 4 comments · May be fixed by #11184
Open

UI Shell wrong behavior - Web Components. v2 latest #11097

hrstoyanov opened this issue Nov 5, 2023 Discussed in #11089 · 4 comments · May be fixed by #11184
Assignees
@sangeethababu9223
Labels
bug Something isn't working package: carbon web components

Comments

@hrstoyanov
Copy link

hrstoyanov commented Nov 5, 2023 •
edited

Discussed in #11089

Originally posted by hrstoyanov November 2, 2023
Hello,
I am new to IBM Carbon. I am trying the WebComponent v2 (latest) version for my app skeleton and noticed that if I copy any UI Shell example from the docs the side navigation misbehaves: when I expand it enough (at width breakpoint 1055px, I think), the header links start to show (correctly) , but the side navigation does not disappear! Is this a bug/bad documentation?

The weird thing is that you do not see this behavior when you try this in the storybook ...

I tried to fix this with the below, but it does not work:

 @media (width > 1550) {
            cds-side-nav {
                display: none;
            }
            cds-side-nav-items {
                display: none;
            }
        }

Here is my code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
    <style>

        main {
            margin-block-start: 3.5rem;
            margin-inline: 1rem;
            border: 1px solid red;
            height: 100%;
        }
       
    </style>
    <script type="module"
        src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/ui-shell.min.js"></script>
    <title>Document</title>
</head>

    <body>
        <cds-header >
            <cds-header-menu-button 
            button-label-active="Close menu" 
            button-label-inactive="Open menu">
            </cds-header-menu-button>
            <cds-header-name href="javascript:void 0" prefix="TourBiz">[DEV]</cds-header-name>
            <cds-header-nav menu-bar-label="IBM [Platform]">
                <cds-header-nav-item href="javascript:void 0">Products</cds-header-nav-item>
                <cds-header-nav-item href="javascript:void 0">Messages</cds-header-nav-item>
                <cds-header-nav-item href="javascript:void 0">Organzation</cds-header-nav-item>
            </cds-header-nav>
        </cds-header>
        <cds-side-nav collapse-mode="responsive">
            <cds-side-nav-items>
                <cds-side-nav-menu title="Main menu">
                    <cds-side-nav-menu-item href="#">First</cds-side-nav-menu-item>
                    <cds-side-nav-menu-item href="#">Second</cds-side-nav-menu-item>
                    <cds-side-nav-menu-item href="#">Third</cds-side-nav-menu-item>
                </cds-side-nav-menu>
                <cds-side-nav-divider></cds-side-nav-divider>
                <cds-side-nav-link href="javascript:void(0)">Some Link</cds-side-nav-link>
                <cds-side-nav-link href="javascript:void(0)">Other Link</cds-side-nav-link>
            </cds-side-nav-items>
        </cds-side-nav>
        <main>
            A. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Possimus natus ut facilis quidem ducimus
            necessitatibus ad porro quas cum accusamus illum, quaerat, 
            ullam aspernatur veritatis ex nulla voluptate,
            mollitia alias.
            B. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Unde voluptatem beatae neque nihil amet,
            fugiat libero molestias culpa. Perspiciatis dolores 
            assumenda distinctio quidem iste labore ipsum, sunt esse
            impedit mollitia!
            C. Lorem ipsum dolor sit amet consectetur adipisicing 
            elit. Sunt vero eum iusto, assumenda et, omnis
            veritatis dolore sed nobis a voluptatem veniam debitis 
            atque voluptate suscipit laborum sint architecto rerum.
        </main>
    </body>

</html>
@kennylam kennylam added package: carbon web components bug Something isn't working labels Nov 6, 2023
@sangeethababu9223 sangeethababu9223 self-assigned this Nov 8, 2023
@sangeethababu9223 sangeethababu9223 mentioned this issue Nov 9, 2023
Closed
@sangeethababu9223 sangeethababu9223 linked a pull request Nov 9, 2023 that will close this issue
fix(ui shell): Issue with header navigation in Mobile menu #11115
Closed
@hrstoyanov
Copy link
Author

Hm .. not sure this is just a documentation issue. I just tried the fix:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
    <link rel="stylesheet" href="header_navigation_actions.css">
    <script type="module"
        src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/ui-shell.min.js"></script>
    <title>Document</title>
 </head>

    <body>
        <cds-header aria-label="IBM Platform Name">
            <cds-header-menu-button
              button-label-active="Close menu"
              button-label-inactive="Open menu"></cds-header-menu-button>
            <cds-header-name href="javascript:void 0" prefix="IBM"
              >[Platform]</cds-header-name
            >
            <cds-header-nav menu-bar-label="IBM [Platform]">
              <cds-header-nav-item href="javascript:void 0">Link 1</cds-header-nav-item>
              <cds-header-nav-item href="javascript:void 0">Link 2</cds-header-nav-item>
              <cds-header-nav-item href="javascript:void 0">Link 3</cds-header-nav-item>
              <cds-header-menu menu-label="Link 4" trigger-content="Link 4">
                <cds-header-menu-item href="javascript:void 0"
                  >Sub-link 1</cds-header-menu-item
                >
                <cds-header-menu-item href="javascript:void 0"
                  >Sub-link 2</cds-header-menu-item
                >
                <cds-header-menu-item href="javascript:void 0"
                  >Sub-link 3</cds-header-menu-item
                >
              </cds-header-menu>
            </cds-header-nav>
        </cds-header>

        <cds-side-nav aria-label="Side navigation" >
          <cds-side-nav-items>
            <cds-header-side-nav-items has-divider="" role="list">
              <cds-side-nav-link href="javascript:void(0)" role="listitem">
                Link 1
              </cds-side-nav-link>
              <cds-side-nav-link href="javascript:void(0)" role="listitem">
                Link 2
              </cds-side-nav-link>
              <cds-side-nav-link href="javascript:void(0)" role="listitem">
                Link 3
              </cds-side-nav-link>
              <cds-side-nav-menu title="Link 4" role="listitem">
                <cds-side-nav-menu-item href="javascript:void(0)" tabindex="-1">
                  Sub-link 1
                </cds-side-nav-menu-item>
                <cds-side-nav-menu-item href="javascript:void(0)" tabindex="-1">
                  Sub-link 2
                </cds-side-nav-menu-item>
                <cds-side-nav-menu-item href="javascript:void(0)" tabindex="-1">
                  Sub-link 3
                </cds-side-nav-menu-item>
              </cds-side-nav-menu>
            </cds-header-side-nav-items>
          </cds-side-nav-items>
        </cds-side-nav>

        <main>
            A. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Possimus natus ut facilis quidem ducimus
            necessitatibus ad porro quas cum accusamus illum, quaerat, 
            ullam aspernatur veritatis ex nulla voluptate,
            mollitia alias.
            B. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Unde voluptatem beatae neque nihil amet,
            fugiat libero molestias culpa. Perspiciatis dolores 
            assumenda distinctio quidem iste labore ipsum, sunt esse
            impedit mollitia!
            C. Lorem ipsum dolor sit amet consectetur adipisicing 
            elit. Sunt vero eum iusto, assumenda et, omnis
            veritatis dolore sed nobis a voluptatem veniam debitis 
            atque voluptate suscipit laborum sint architecto rerum.
        </main>
        
    </body>

</html>

Uploading Screenshot 2023-11-09 at 11.13.22 AM.png…

@kennylam
Copy link
Member

kennylam commented Nov 17, 2023 •
edited

@hrstoyanov You're right about this bug. @sangeethababu9223 if you go to this story and view in mobile breakpoint, expand side nav, and switch to a desktop breakpoint, you'll see that both navigation menus appear (side nav should hide).

@hrstoyanov
Copy link
Author

@kennylam yes, that is exactly my issue

@sangeethababu9223
Copy link
Member

I'll look into this @hrstoyanov.
Thanks @kennylam

@sangeethababu9223 sangeethababu9223 linked a pull request Dec 4, 2023 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sangeethababu9223 sangeethababu9223

Labels
bug Something isn't working package: carbon web components
Projects
Carbon for IBM.com
Status: Review
Milestone
No milestone
3 participants
@kennylam @hrstoyanov @sangeethababu9223