search

carbon-design-system / carbon-for-ibm-dotcom

Carbon for IBM.com is based on the Carbon Design System for IBM
https://www.ibm.com/standards/carbon/
Apache License 2.0
269 stars 156 forks source link

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

Open hrstoyanov opened 1 year ago

hrstoyanov commented 1 year ago

Discussed in https://github.com/carbon-design-system/carbon-for-ibm-dotcom/discussions/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 ](https://web-components.carbondesignsystem.com/?path=/docs/components-ui-shell--header-base-w-navigation-actions) 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: ```css @media (width > 1550) { cds-side-nav { display: none; } cds-side-nav-items { display: none; } } ``` Here is my code: ```html Document [DEV] Products Messages Organzation First Second Third Some Link Other Link
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.
```
hrstoyanov commented 1 year ago

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 commented 12 months ago

@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 commented 12 months ago

@kennylam yes, that is exactly my issue

sangeethababu9223 commented 11 months ago

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