Merge pull request #2817 from infor-design/2092-masthead-buttons-resp…

…onsize 2092 - Fix IdsMasthead layout and responsive behavior
infor-design · Sep 12, 2024 · 101369f · 101369f
2 parents 1a1c1d5 + b7c1b1f
commit 101369f
Show file tree

Hide file tree

Showing 13 changed files with 322 additions and 478 deletions.
diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md
@@ -56,6 +56,7 @@
 - `[Listbuilder]` Fixed an issue where clicking the row in the wrong spot would edit the wrong row. ([#2701](https://github.com/infor-design/enterprise-wc/issues/2701))
 - `[Locale]` Fixed translation issue of `small` into Spanish. ([#8962](https://github.com/infor-design/enterprise-wc/issues/8962))
 - `[Locale]` Fixed translation issue of `Available` into Thai and Italian. ([#8786](https://github.com/infor-design/enterprise-wc/issues/8786))
+- `[Masthead]` Fix layout and responsive issues. ([#2092](https://github.com/infor-design/enterprise-wc/issues/2092))
 - `[Modal]` Fixed missing border between modal buttons. ([#4660](https://inforwiki.atlassian.net/browse/IDS-4660))
 - `[Multiselect]` Added `placeholder` attribute to `ids-multiselect` to allow for a placeholder value. ([#2758](https://github.com/infor-design/enterprise-wc/issues/2758))
 - `[Multiselect]` Converted multiselect tests to playwright. ([#1957](https://github.com/infor-design/enterprise-wc/issues/1957))

diff --git a/src/components/ids-app-menu/demos/with-masthead.html b/src/components/ids-app-menu/demos/with-masthead.html
@@ -9,19 +9,53 @@
     <ids-layout-flex direction="column" gap="0" full-height>
       <ids-layout-flex-item>
         <ids-masthead title="Infor Application" icon="logo" role="navigation">
-          <section title="start" slot="start">
-            <ids-button icon="grid"><span class="audible">Grid Button</span></ids-button>
-          </section>
-          <section title="center" slot="center">
-            <ids-button icon="home"><span>Home</span></ids-button>
-            <ids-button icon="star-outlined"><span>Star</span></ids-button>
-            <ids-button icon="info"><span>Info</span></ids-button>
-          </section>
-          <section title="end" slot="end">
-            <ids-button icon="user"><span class="audible">User Button</span></ids-button>
-            <ids-button icon="mingle-share"><span class="audible">Mingle Button</span></ids-button>
-            <ids-button icon="bookmark-outlined"><span class="audible">Bookmark Button</span></ids-button>
-          </section>
+          <ids-toolbar id="my-toolbar">
+            <ids-toolbar-section align="start" favor>
+              <ids-layout-flex gap="8" align-items="center">
+                <ids-layout-flex-item>
+                  <ids-button id="logo" class="icon-logo" color-variant="alternate" square="true">
+                    <ids-icon icon="logo" viewbox="0 0 32 34" width="32" height="32"></ids-icon>
+                    <ids-text audible="true">Masthead logo</ids-text>
+                  </ids-button>
+                </ids-layout-flex-item>
+                <ids-layout-flex-item>
+                  <ids-text id="title" color-variant="alternate" font-size="14" font-weight="semi-bold">Infor Application</ids-text>
+                </ids-layout-flex-item>
+                <ids-layout-flex-item>
+                  <ids-button icon="grid"><span class="audible">Grid Button</span></ids-button>
+                </ids-layout-flex-item>
+              </ids-layout-flex>
+            </ids-toolbar-section>
+
+            <ids-toolbar-section type="buttonset" align="start">
+              <ids-button id="button-1" icon="home"><span>Home</span></ids-button>
+              <ids-button id="button-2" icon="star-outlined"><span>Star</span></ids-button>
+              <ids-button id="button-3" icon="info"><span>Info</span></ids-button>
+            </ids-toolbar-section>
+
+            <ids-toolbar-section type="buttonset" align="end">
+              <ids-button icon="user"><span class="audible">User Button</span></ids-button>
+              <ids-button icon="mingle-share"><span class="audible">Mingle Button</span></ids-button>
+              <ids-button icon="bookmark-outlined"><span class="audible">Bookmark Button</span></ids-button>
+            </ids-toolbar-section>
+
+            <ids-toolbar-more-actions overflow>
+              <ids-menu-group>
+                <ids-menu-item value="1" disabled>Option One (disabled)</ids-menu-item>
+                <ids-menu-item value="2">Option Two</ids-menu-item>
+                <ids-menu-item value="3">Option Three</ids-menu-item>
+                <ids-menu-item>More Options
+                  <ids-popup-menu>
+                    <ids-menu-group>
+                      <ids-menu-item value="4">Option Four</ids-menu-item>
+                      <ids-menu-item value="5" disabled>Option Five (disabled)</ids-menu-item>
+                      <ids-menu-item value="6">Option Six</ids-menu-item>
+                    </ids-menu-group>
+                  </ids-popup-menu>
+                </ids-menu-item>
+              </ids-menu-group>
+            </ids-toolbar-more-actions>
+          </ids-toolbar>
         </ids-masthead>
       </ids-layout-flex-item>
 

diff --git a/src/components/ids-button/ids-button.scss b/src/components/ids-button/ids-button.scss
@@ -116,6 +116,21 @@ button {
   }
 }
 
+:host(.ids-button-masthead),
+.ids-button-masthead {
+  &::part(button),
+  .is-active {
+    background-color: var(--ids-masthead-color-background-active);
+  }
+}
+
+:host(.ids-button-masthead.icon-logo),
+.ids-button-masthead.icon-logo {
+  &::part(button) {
+    top: var(--ids-masthead-logo-top-space-icon);
+  }
+}
+
 .ids-icon-button {
   @include ids-base-button-styles();
   @include ids-standard-button-colors();

diff --git a/src/components/ids-masthead/README.md b/src/components/ids-masthead/README.md
@@ -30,35 +30,63 @@ Some optional features in the masthead:
 ## Terminology
 
 - **Masthead**: A custom HTML element that serves as the primary header bar on a page.
-- **Icon**: Icon is the company-logo in the masthead.
-- **Title**: Title is text that appears next to the logo.
-- **Slots**: Slots are sections in the masthead that allow users to customize where buttons appear in the masthead. There are 4 slots: `start`, `center`, `end`, `more`.
+- **Slot**: The masthead now has a single slot where users can place an ids-toolbar element. This toolbar can contain the desired buttons and controls for the masthead.
 
 ## Feature (With the Code Examples)
 
-An masthead is created by using the `ids-masthead` tag. It has a `icon` property to set the desired logo/icon for the masthead.  It also has a `title` property to set the text that appears next to the logo/icon.
+An masthead is created by using the `ids-masthead` tag.
 
-Masthead with `icon` and `title` attributes:
+Masthead with `ids-toolbar` elements in the slot:
 
 ```html
-<ids-masthead icon="logo" title="Infor Application"></ids-masthead>
-```
-
-Masthead with `nav` elements as slots:
-
-```html
-<ids-masthead icon="logo" title="Infor Application">
-  <section slot="start">
-    <ids-button icon="grid"></ids-button>
-    <ids-button icon="star-outline"></ids-button>
-  </section>
-  <section slot="center">
-    <ids-button icon="info"></ids-button>
-  </section>
-  <section slot="end">
-    <ids-button icon="user"></ids-button>
-    <ids-button icon="bookmark-outline"></ids-button>
-  </section>
+<ids-masthead title="Infor Application" icon="logo" role="navigation">
+    <ids-toolbar id="my-toolbar">
+        <ids-toolbar-section align="start" favor>
+            <ids-layout-flex gap="8" align-items="center">
+            <ids-layout-flex-item>
+                <ids-button id="logo" class="icon-logo" color-variant="alternate" square="true">
+                <ids-icon icon="logo" viewbox="0 0 32 34" width="32" height="32"></ids-icon>
+                <ids-text audible="true">Masthead logo</ids-text>
+                </ids-button>
+            </ids-layout-flex-item>
+            <ids-layout-flex-item>
+                <ids-text id="title" color-variant="alternate" font-size="14" font-weight="semi-bold">Infor Application</ids-text>
+            </ids-layout-flex-item>
+            <ids-layout-flex-item>
+                <ids-button icon="grid"><span class="audible">Grid Button</span></ids-button>
+            </ids-layout-flex-item>
+            </ids-layout-flex>
+        </ids-toolbar-section>
+
+        <ids-toolbar-section type="buttonset" align="start">
+            <ids-button id="button-1" icon="home"><span>Home</span></ids-button>
+            <ids-button id="button-2" icon="star-outlined"><span>Star</span></ids-button>
+            <ids-button id="button-3" icon="info"><span>Info</span></ids-button>
+        </ids-toolbar-section>
+
+        <ids-toolbar-section type="buttonset" align="end">
+            <ids-button icon="user"><span class="audible">User Button</span></ids-button>
+            <ids-button icon="mingle-share"><span class="audible">Mingle Button</span></ids-button>
+            <ids-button icon="bookmark-outlined"><span class="audible">Bookmark Button</span></ids-button>
+        </ids-toolbar-section>
+
+        <ids-toolbar-more-actions overflow>
+            <ids-menu-group>
+            <ids-menu-item value="1" disabled>Option One (disabled)</ids-menu-item>
+            <ids-menu-item value="2">Option Two</ids-menu-item>
+            <ids-menu-item value="3">Option Three</ids-menu-item>
+            <ids-menu-item>More Options
+                <ids-popup-menu>
+                <ids-menu-group>
+                    <ids-menu-item value="4">Option Four</ids-menu-item>
+                    <ids-menu-item value="5" disabled>Option Five (disabled)</ids-menu-item>
+                    <ids-menu-item value="6">Option Six</ids-menu-item>
+                </ids-menu-group>
+                </ids-popup-menu>
+            </ids-menu-item>
+            </ids-menu-group>
+        </ids-toolbar-more-actions>
+    </ids-toolbar>
 </ids-masthead>
 ```
 
@@ -72,13 +100,7 @@ Masthead with `nav` elements as slots:
 
 ## Settings
 
-- `icon` {string} Sets the masthead's icon attribute
-- `title` {string} Sets the masthead's title attribute
-- `slots` {readonly} An object containing the masthead's slots/sections for start|center|end|more
-- `breakpoints` {readonly}  object containing (window.matchMedia) breakpoints for mobile|tablet|desktop
-- `isMobile` {readonly} Returns true if the mobile breakpoint is active
-- `isTablet` {readonly} Returns true if the tablet breakpoint is active
-- `isDesktop` {readonly} Returns true if the desktop breakpoint is active
+- `slot` {readonly} An object containing the masthead's sections for start|center|end|more
 
 ## Events
 

diff --git a/src/components/ids-masthead/demos/example.html b/src/components/ids-masthead/demos/example.html
@@ -18,19 +18,53 @@
     <ids-layout-grid id="ids-masthead-list" auto-fit="true" col="1" padding-x="md">
       <ids-layout-grid-cell>
         <ids-masthead title="Infor Application" icon="logo" role="navigation">
-          <section title="start" slot="start">
-            <ids-button icon="grid"><span class="audible">Grid Button</span></ids-button>
-          </section>
-          <section title="center" slot="center">
-            <ids-button icon="home"><span>Home</span></ids-button>
-            <ids-button icon="star-outlined"><span>Star</span></ids-button>
-            <ids-button icon="info"><span>Info</span></ids-button>
-          </section>
-          <section title="end" slot="end">
-            <ids-button icon="user"><span class="audible">User Button</span></ids-button>
-            <ids-button icon="mingle-share"><span class="audible">Mingle Button</span></ids-button>
-            <ids-button icon="bookmark-outlined"><span class="audible">Bookmark Button</span></ids-button>
-          </section>
+          <ids-toolbar id="my-toolbar">
+            <ids-toolbar-section align="start" favor>
+              <ids-layout-flex gap="8" align-items="center">
+                <ids-layout-flex-item>
+                  <ids-button id="logo" class="icon-logo" color-variant="alternate" square="true">
+                    <ids-icon icon="logo" viewbox="0 0 32 34" width="32" height="32"></ids-icon>
+                    <ids-text audible="true">Masthead logo</ids-text>
+                  </ids-button>
+                </ids-layout-flex-item>
+                <ids-layout-flex-item>
+                  <ids-text id="title" color-variant="alternate" font-size="14" font-weight="semi-bold">Infor Application</ids-text>
+                </ids-layout-flex-item>
+                <ids-layout-flex-item>
+                  <ids-button icon="grid"><span class="audible">Grid Button</span></ids-button>
+                </ids-layout-flex-item>
+              </ids-layout-flex>
+            </ids-toolbar-section>
+
+            <ids-toolbar-section type="buttonset" align="start">
+              <ids-button id="button-1" icon="home"><span>Home</span></ids-button>
+              <ids-button id="button-2" icon="star-outlined"><span>Star</span></ids-button>
+              <ids-button id="button-3" icon="info"><span>Info</span></ids-button>
+            </ids-toolbar-section>
+
+            <ids-toolbar-section type="buttonset" align="end">
+              <ids-button icon="user"><span class="audible">User Button</span></ids-button>
+              <ids-button icon="mingle-share"><span class="audible">Mingle Button</span></ids-button>
+              <ids-button icon="bookmark-outlined"><span class="audible">Bookmark Button</span></ids-button>
+            </ids-toolbar-section>
+
+            <ids-toolbar-more-actions overflow>
+              <ids-menu-group>
+                <ids-menu-item value="1" disabled>Option One (disabled)</ids-menu-item>
+                <ids-menu-item value="2">Option Two</ids-menu-item>
+                <ids-menu-item value="3">Option Three</ids-menu-item>
+                <ids-menu-item>More Options
+                  <ids-popup-menu>
+                    <ids-menu-group>
+                      <ids-menu-item value="4">Option Four</ids-menu-item>
+                      <ids-menu-item value="5" disabled>Option Five (disabled)</ids-menu-item>
+                      <ids-menu-item value="6">Option Six</ids-menu-item>
+                    </ids-menu-group>
+                  </ids-popup-menu>
+                </ids-menu-item>
+              </ids-menu-group>
+            </ids-toolbar-more-actions>
+          </ids-toolbar>
         </ids-masthead>
       </ids-layout-grid-cell>
     </ids-layout-grid>

diff --git a/src/components/ids-masthead/demos/index.ts b/src/components/ids-masthead/demos/index.ts
@@ -1,2 +1,3 @@
 // Supporting components
 import '../ids-masthead';
+import '../../ids-layout-flex/ids-layout-flex';
diff --git a/src/components/ids-masthead/ids-masthead.scss b/src/components/ids-masthead/ids-masthead.scss
@@ -1,4 +1,5 @@
 /* Ids Masthead Component */
+:host,
 .ids-masthead {
   background-color: var(--ids-masthead-color-background);
   color: var(--ids-masthead-color-text);
@@ -13,30 +14,4 @@
   --ids-button-formatter-color-background-hover: transparant;
   --ids-button-formatter-color-text-hover: var(--ids-masthead-color-hover);
   --ids-button-alternate-color-text-default: var(--ids-color-white-100);
-
-  #logo.icon-logo {
-    padding-inline: var(--ids-masthead-logo-padding-icon-inline);
-    position: relative;
-    top: var(--ids-masthead-logo-top-space-icon);
-
-    &::part(button) {
-      margin: var(--ids-space-none);
-      padding: var(--ids-space-none);
-      opacity: 1;
-    }
-  }
-
-  #title {
-    margin-inline: var(--ids-masthead-title-margin-inline);
-  }
-
-  #more {
-    &.hidden {
-      display: none;
-    }
-  }
-
-  ::slotted([slot='more']) {
-    display: none;
-  }
 }