Button - Fix color of Buttons within Modal triggered from SideNav or AppHeader (HDS-5572)

.changeset/fine-rocks-trade.md

@@ -0,0 +1,15 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+<!-- START components/button -->
+`Button` - Fixed color inheritance for Buttons within `DialogPrimitive` based components (such as the `Modal` and `Flyout`) when triggered from within the `SideNav` or `AppHeader`
+<!-- END -->
+
+<!-- START components/side-nav -->
+`SideNav` - Fixed color inheritance for Buttons within `DialogPrimitive` based components (such as the `Modal` and `Flyout`) when triggered from within the `SideNav`
+<!-- END -->
+
+<!-- START components/app-header -->
+`AppHeader` - Fixed color inheritance for Buttons within `DialogPrimitive` based components (such as the `Modal` and `Flyout`) when triggered from within the `AppHeader`
+<!-- END -->

packages/components/src/styles/components/app-header.scss

@@ -110,7 +110,12 @@
   .hds-dropdown-toggle-button,
   .hds-dropdown-toggle-icon {
     // Apply dark theme to child interactive components not within a nested dropdown
-    &:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *) {
+    &:not(
+      .hds-dropdown * *,
+      .ember-basic-dropdown-trigger * *,
+      .ember-basic-dropdown-content * *,
+      .hds-dialog-primitive__wrapper *
+    ) {
       @include hds-interactive-dark-theme();
 
       // disabled state:

packages/components/src/styles/components/side-nav/header.scss

@@ -76,7 +76,12 @@
   .hds-dropdown-toggle-button,
   .hds-dropdown-toggle-icon {
     // Apply dark theme to child interactive components not within a nested dropdown
-    &:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *) {
+    &:not(
+      .hds-dropdown * *,
+      .ember-basic-dropdown-trigger * *,
+      .ember-basic-dropdown-content * *,
+      .hds-dialog-primitive__wrapper *
+    ) {
       @include hds-interactive-dark-theme();
 
       // disabled state:

showcase/app/components/page-components/advanced-table/sub-sections/basic.gts

@@ -47,7 +47,7 @@ const BASIC_MUSIC_COLUMNS = [
 const SubSectionBasic: TemplateOnlyComponent = <template>
   <ShwTextBody>
     <a
-      class="shw-frame__open-link"
+      class="shw-component-advanced-table__open-link"
       href="/layouts/app-frame/frameless/demo-full-app-frame-with-advanced-table"
       target="_blank"
       rel="noopener noreferrer"

showcase/app/components/page-components/app-header/sub-sections/content.gts

@@ -11,12 +11,20 @@ import ShwFlex from 'showcase/components/shw/flex';
 import ShwPlaceholder from 'showcase/components/shw/placeholder';
 import ShwDivider from 'showcase/components/shw/divider';
 
+import ModalWithTrigger from 'showcase/components/page-components/modal/code-fragments/with-trigger';
+import SuperSelectWithButtons from 'showcase/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons';
+import FlyoutWithTrigger from 'showcase/components/page-components/flyout/code-fragments/with-trigger';
 import CodeFragmentWithGenericContent from 'showcase/components/page-components/app-header/code-fragments/with-generic-content';
 
+import { on } from '@ember/modifier';
+
 import {
   HdsAppHeader,
   HdsAppHeaderHomeLink,
   HdsBadge,
+  HdsButton,
+  HdsButtonSet,
+  HdsDropdown,
 } from '@hashicorp/design-system-components/components';
 
 const SubSectionContent: TemplateOnlyComponent = <template>
@@ -156,9 +164,84 @@ const SubSectionContent: TemplateOnlyComponent = <template>
         </:globalActions>
       </HdsAppHeader>
     </SF.Item>
-
   </ShwFlex>
 
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>With nested button content</ShwTextH3>
+
+  <HdsAppHeader @hasA11yRefocus={{false}}>
+    <:logo>
+      {{! empty span for layout purposes}}
+      <span />
+    </:logo>
+    <:globalActions>
+      <SuperSelectWithButtons @placeholder="SuperSelect" />
+
+      <HdsDropdown as |D|>
+        <D.ToggleButton @text="Dropdown" />
+        <D.Footer>
+          <HdsButtonSet>
+            <HdsButton @text="Primary" @isFullWidth={{true}} @size="small" />
+            <HdsButton @text="Secondary" @color="secondary" @size="small" />
+          </HdsButtonSet>
+        </D.Footer>
+      </HdsDropdown>
+
+      <ModalWithTrigger @triggerText="Open modal" id="nested-modal">
+        <:modal as |M|>
+          <M.Header>
+            Modal title
+          </M.Header>
+          <M.Body>
+            <p class="hds-typography-body-300 hds-foreground-primary">
+              Modal content
+            </p>
+          </M.Body>
+          <M.Footer as |F|>
+            <HdsButtonSet>
+              <HdsButton type="submit" @text="Primary" {{on "click" F.close}} />
+              <HdsButton
+                type="button"
+                @text="Secondary"
+                @color="secondary"
+                {{on "click" F.close}}
+              />
+            </HdsButtonSet>
+          </M.Footer>
+        </:modal>
+      </ModalWithTrigger>
+
+      <FlyoutWithTrigger @triggerText="Open flyout" id="nested-flyout">
+        <:flyout as |F|>
+          <F.Header>
+            Flyout title
+          </F.Header>
+          <F.Body>
+            <p class="hds-typography-body-300 hds-foreground-primary">
+              Flyout body
+            </p>
+          </F.Body>
+          <F.Footer as |FF|>
+            <HdsButtonSet>
+              <HdsButton
+                type="submit"
+                @text="Primary"
+                {{on "click" FF.close}}
+              />
+              <HdsButton
+                type="button"
+                @text="Secondary"
+                @color="secondary"
+                {{on "click" FF.close}}
+              />
+            </HdsButtonSet>
+          </F.Footer>
+        </:flyout>
+      </FlyoutWithTrigger>
+    </:globalActions>
+  </HdsAppHeader>
+
   <ShwDivider />
 </template>;
 

showcase/app/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons.gts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import { fn } from '@ember/helper';
+import { tracked } from '@glimmer/tracking';
+
+import { HdsFormSuperSelectMultipleBase } from '@hashicorp/design-system-components/components';
+
+import type { HdsFormSuperSelectMultipleBaseSignature } from '@hashicorp/design-system-components/components/hds/form/super-select/multiple/base';
+
+const OPTIONS = ['Option 1'];
+
+export interface CodeFragmentWithMultipleBaseElementSignature {
+  Args: {
+    placeholder?: HdsFormSuperSelectMultipleBaseSignature['Args']['placeholder'];
+    isSelected?: boolean;
+    options?: string;
+  };
+  Element: HdsFormSuperSelectMultipleBaseSignature['Element'];
+}
+
+export default class CodeFragmentWithMultipleBaseElement extends Component<CodeFragmentWithMultipleBaseElementSignature> {
+  @tracked selectedOptions: string[] = [];
+
+  options = OPTIONS;
+
+  <template>
+    <HdsFormSuperSelectMultipleBase
+      @onChange={{fn (mut this.selectedOptions)}}
+      @options={{this.options}}
+      @selected={{this.selectedOptions}}
+      @placeholder={{@placeholder}}
+      @showAfterOptions={{true}}
+      @ariaLabel="Label"
+      ...attributes
+      as |option|
+    >
+      {{option}}
+    </HdsFormSuperSelectMultipleBase>
+  </template>
+}

showcase/app/components/page-components/side-nav/sub-sections/content.gts

@@ -14,8 +14,18 @@ import {
   HdsSideNav,
   HdsSideNavPortal,
   HdsSideNavPortalTarget,
+  HdsSideNavList,
+  HdsButton,
+  HdsButtonSet,
+  HdsDropdown,
 } from '@hashicorp/design-system-components/components';
 
+import ModalWithTrigger from 'showcase/components/page-components/modal/code-fragments/with-trigger';
+import SuperSelectWithButtons from 'showcase/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons';
+import FlyoutWithTrigger from 'showcase/components/page-components/flyout/code-fragments/with-trigger';
+
+import { on } from '@ember/modifier';
+
 const SubSectionContent: TemplateOnlyComponent = <template>
   <ShwTextH2>Content</ShwTextH2>
 
@@ -141,6 +151,101 @@ const SubSectionContent: TemplateOnlyComponent = <template>
       <ShwPlaceholder @height="72px" @text="extraAfter" @background="#f3d9c5" />
     </Nav.ExtraAfter>
   </HdsSideNavPortal>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>With nested button content</ShwTextH3>
+
+  <ShwFlex as |SF|>
+    <SF.Item @label="">
+      <HdsSideNav @isResponsive={{false}} @hasA11yRefocus={{false}}>
+        <:body>
+          <HdsSideNavList as |SNL|>
+            <SNL.Item>
+              <SuperSelectWithButtons @placeholder="SuperSelect" />
+            </SNL.Item>
+            <SNL.Item>
+              <HdsDropdown as |D|>
+                <D.ToggleButton @text="Dropdown" />
+                <D.Footer>
+                  <HdsButtonSet>
+                    <HdsButton
+                      @text="Primary"
+                      @isFullWidth={{true}}
+                      @size="small"
+                    />
+                    <HdsButton
+                      @text="Secondary"
+                      @color="secondary"
+                      @size="small"
+                    />
+                  </HdsButtonSet>
+                </D.Footer>
+              </HdsDropdown>
+            </SNL.Item>
+            <SNL.Item>
+              <ModalWithTrigger @triggerText="Open modal" id="nested-modal">
+                <:modal as |M|>
+                  <M.Header>
+                    Modal title
+                  </M.Header>
+                  <M.Body>
+                    <p class="hds-typography-body-300 hds-foreground-primary">
+                      Modal content
+                    </p>
+                  </M.Body>
+                  <M.Footer as |F|>
+                    <HdsButtonSet>
+                      <HdsButton
+                        type="submit"
+                        @text="Primary"
+                        {{on "click" F.close}}
+                      />
+                      <HdsButton
+                        type="button"
+                        @text="Secondary"
+                        @color="secondary"
+                        {{on "click" F.close}}
+                      />
+                    </HdsButtonSet>
+                  </M.Footer>
+                </:modal>
+              </ModalWithTrigger>
+            </SNL.Item>
+            <SNL.Item>
+              <FlyoutWithTrigger @triggerText="Open flyout" id="nested-flyout">
+                <:flyout as |F|>
+                  <F.Header>
+                    Flyout title
+                  </F.Header>
+                  <F.Body>
+                    <p class="hds-typography-body-300 hds-foreground-primary">
+                      Flyout body
+                    </p>
+                  </F.Body>
+                  <F.Footer as |FF|>
+                    <HdsButtonSet>
+                      <HdsButton
+                        type="submit"
+                        @text="Primary"
+                        {{on "click" FF.close}}
+                      />
+                      <HdsButton
+                        type="button"
+                        @text="Secondary"
+                        @color="secondary"
+                        {{on "click" FF.close}}
+                      />
+                    </HdsButtonSet>
+                  </F.Footer>
+                </:flyout>
+              </FlyoutWithTrigger>
+            </SNL.Item>
+          </HdsSideNavList>
+        </:body>
+      </HdsSideNav>
+    </SF.Item>
+  </ShwFlex>
 </template>;
 
 export default SubSectionContent;

showcase/app/styles/showcase-components/frame.scss

@@ -34,8 +34,18 @@ $shw-frame-navigation-bar-height: 48px;
 }
 
 .shw-frame__open-link {
-  width: 16px;
-  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  // dimensions meet a11y touch target minimums
+  width: 48px;
+  height: 48px;
+
+  > .hds-icon {
+    width: 16px;
+    height: 16px;
+  }
+
   color: var(--shw-color-gray-300);
 
   &:hover {
@@ -52,4 +62,4 @@ $shw-frame-navigation-bar-height: 48px;
   width: 100%;
   height: calc(100% - #{$shw-frame-navigation-bar-height});
   border: none;
-}
+}

showcase/app/styles/showcase-pages/advanced-table.scss

@@ -93,4 +93,16 @@ body.page-components-advanced-table {
     visibility: visible;
     opacity: 1;
   }
+
+  .shw-component-advanced-table__open-link {
+    color: var(--shw-color-gray-300);
+
+     &:hover {
+      color: var(--shw-color-gray-200);
+    }
+
+    &:active {
+      color: var(--shw-color-gray-100);
+    }
+  }
 }