Add section type button to fix button's focus state #852

src/components/ids-app-menu/demos/example.html

@@ -9,15 +9,15 @@
 
     <ids-header>
       <ids-toolbar>
-        <ids-toolbar-section>
+        <ids-toolbar-section type="button">
           <ids-button id="app-menu-trigger" icon="menu">
             <span slot="text" class="audible">Open App Menu</span>
           </ids-button>
         </ids-toolbar-section>
         <ids-toolbar-section type="title">
           <ids-text font-size="20" type="h1">App Menu Example</ids-text>
         </ids-toolbar-section>
-        <ids-toolbar-section align="end">
+        <ids-toolbar-section align="end" type="button">
           <ids-theme-switcher mode="light"></ids-theme-switcher>
         </ids-toolbar-section>
       </ids-toolbar>

src/components/ids-header/demos/button-types.html

@@ -9,7 +9,7 @@
     <ids-text font-size="12" type="h1" audible="true">Ids Header (Different Button Types)</ids-text>
     <ids-header>
       <ids-toolbar>
-        <ids-toolbar-section>
+        <ids-toolbar-section type="button">
           <ids-button icon="menu" role="button" color-variant="alternate">
             <span slot="text" class="audible">Application Menu Trigger</span>
           </ids-button>
@@ -34,7 +34,9 @@
             <span slot="text">Trash</span>
           </ids-button>
         </ids-toolbar-section>
-        <ids-theme-switcher mode="light" color-variant="alternate"></ids-theme-switcher>
+        <ids-toolbar-section type="button">
+          <ids-theme-switcher mode="light" color-variant="alternate"></ids-theme-switcher>
+        </ids-toolbar-section>
       </ids-toolbar>
     </ids-header>
 

src/components/ids-header/demos/example.html

@@ -10,7 +10,7 @@
 
     <ids-header>
       <ids-toolbar>
-        <ids-toolbar-section>
+        <ids-toolbar-section type="button">
           <ids-button icon="menu" role="button">
             <span slot="text" class="audible">Application Menu Trigger</span>
           </ids-button>
@@ -22,7 +22,9 @@
         <ids-toolbar-section align="end">
           <ids-search-field id="header-search" clearable color-variant="alternate" label-state="collapsed" no-margins></ids-search-field>
         </ids-toolbar-section>
-        <ids-theme-switcher mode="light"></ids-theme-switcher>
+        <ids-toolbar-section type="button">
+          <ids-theme-switcher mode="light"></ids-theme-switcher>
+        </ids-toolbar-section>
       </ids-toolbar>
     </ids-header>
 

src/components/ids-header/demos/toolbar.html

@@ -10,7 +10,7 @@
 
     <ids-header>
       <ids-toolbar>
-        <ids-toolbar-section>
+        <ids-toolbar-section type="button">
           <ids-button icon="menu" role="button" color-variant="alternate">
             <span slot="text" class="audible">Application Menu Trigger</span>
           </ids-button>
@@ -54,7 +54,9 @@
             <ids-icon slot="icon" icon="delete"></ids-icon>
           </ids-button>
         </ids-toolbar-section>
-        <ids-theme-switcher mode="light" color-variant="alternate"></ids-theme-switcher>
+        <ids-toolbar-section type="button">
+          <ids-theme-switcher mode="light" color-variant="alternate"></ids-theme-switcher>
+        </ids-toolbar-section>
       </ids-toolbar>
     </ids-header>
   </ids-container>

src/components/ids-header/ids-header.scss

@@ -31,5 +31,5 @@
 
 ::slotted(ids-toolbar),
 .ids-toolbar {
-  @include p-12();
+  @include p-8();
 }

src/components/ids-toolbar/README.md

@@ -31,9 +31,9 @@ The Ids Toolbar can also be responsive, intelligently hiding buttons that can't
 ### Toolbar Section
 
 - `align` - Determines the alignment of the items within this section.  Defaults to `start`, which is the left side of the Toolbar in a standard Left-to-Right toolbar setup.  Can also be `center` and `end` (right).
-- `favor` - Determines if this section should not shrink/collapse when the size of the entire Toolbar shrinks.  This causes the other Toolbar sections to become smaller first.
+- `favor` - Determines if this section should not shrink/collapse when the size of the entire Toolbar shrinks. This causes the other Toolbar sections to become smaller first.
 - `items` - provides access to all Toolbar items in this section.
-- `type` - Sets a pre-defined "type" on the toolbar section.  This defaults to `static` but can also be set to `title`, `buttonset`, and `search` to mimic those specific sections.  To create a custom section that fills available space, `fluid` is also an available type.
+- `type` - Sets a pre-defined "type" on the toolbar section. This defaults to `static` but can also be set to `title`, `buttonset`, and `search` to mimic those specific sections. To create a custom section that fills available space, `fluid` is also an available type. Type `button` is for a single button in the section to maintain button's focus state.
 
 ### Toolbar More Actions
 

src/components/ids-toolbar/ids-toolbar-common.scss

@@ -68,7 +68,8 @@
     overflow: hidden;
   }
 
-  ::slotted(ids-toolbar-section:not([type])) {
+  ::slotted(ids-toolbar-section:not([type])),
+  ::slotted(ids-toolbar-section[type='button']) {
     flex: 0 0 auto;
   }
 

src/components/ids-toolbar/ids-toolbar-section.scss

@@ -45,6 +45,11 @@ ids-toolbar-section + ids-toolbar-section[type='buttonset'] {
     }
   }
 
+  // Section type button has padding on each side for button focus state
+  &.button {
+    @include p-4();
+  }
+
   // Title sections are not Flex containers (so we can stack content)
   &.title {
     display: inline-block;

src/components/ids-toolbar/ids-toolbar-section.ts

@@ -26,6 +26,7 @@ const TOOLBAR_TYPES = ['formatter'];
 const SECTION_TYPES = [
   'static',
   'buttonset',
+  'button',
   'fluid',
   'search',
   'title',