feat(global header): Add global actions with animations (#3008)

* feat(global-header): componentize parts of global header and add new global actions component * Begin docs * Begin docs * Add documentation and tests * Revert export * Update snapshots * update snapshots * Fix lint and tests * Add annotations and updated tests * Fix typos and deconstructed props * Add rem function to px values, add copy regarding unread notifications * Fix lint * Change token ref to brand, update tests * Add some documentation around notifications * Add favorites popover and task menu * Update snapshots * Update menus component to take custom icon * Lint * Update snapshots * Update snapshots * Update snapshots * Update snapshots * Add accessibility note to new notifications
salesforce-ux · Jan 31, 2018 · 399da9c · 399da9c
1 parent 069a3c8
commit 399da9c
Show file tree

Hide file tree

Showing 45 changed files with 9,284 additions and 348 deletions.
diff --git a/test/__tests__/__snapshots__/Global_Header_Action_Bar.json b/test/__tests__/__snapshots__/Global_Header_Action_Bar.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Favorites_Disabled.json b/test/__tests__/__snapshots__/Global_Header_Favorites_Disabled.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Favorites_Not_Pressed.json b/test/__tests__/__snapshots__/Global_Header_Favorites_Not_Pressed.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Favorites_Pressed.json b/test/__tests__/__snapshots__/Global_Header_Favorites_Pressed.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Help_Action.json b/test/__tests__/__snapshots__/Global_Header_Help_Action.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Logo.json b/test/__tests__/__snapshots__/Global_Header_Logo.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Notification_New_Notifications.json b/test/__tests__/__snapshots__/Global_Header_Notification_New_Notifications.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Notification_No_Notifications.json b/test/__tests__/__snapshots__/Global_Header_Notification_No_Notifications.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Notification_Popup.json b/test/__tests__/__snapshots__/Global_Header_Notification_Popup.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Notification_With_playground.json b/test/__tests__/__snapshots__/Global_Header_Notification_With_playground.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Search_Active_State.json b/test/__tests__/__snapshots__/Global_Header_Search_Active_State.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Search_Default_State.json b/test/__tests__/__snapshots__/Global_Header_Search_Default_State.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Search_Expanded_State.json b/test/__tests__/__snapshots__/Global_Header_Search_Expanded_State.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Setup_Action.json b/test/__tests__/__snapshots__/Global_Header_Setup_Action.json
diff --git a/test/__tests__/__snapshots__/Global_Header_Task_Action.json b/test/__tests__/__snapshots__/Global_Header_Task_Action.json
diff --git a/test/__tests__/__snapshots__/base_global_header.json b/test/__tests__/__snapshots__/base_global_header.json
diff --git a/test/__tests__/__snapshots__/global_header_container.json b/test/__tests__/__snapshots__/global_header_container.json
diff --git a/test/__tests__/__snapshots__/global_header_jump_links.json b/test/__tests__/__snapshots__/global_header_jump_links.json
diff --git a/test/__tests__/__snapshots__/global_header_layout.json b/test/__tests__/__snapshots__/global_header_layout.json
diff --git a/test/__tests__/docs.spec.js b/test/__tests__/docs.spec.js
@@ -12,7 +12,7 @@ import ReactDOM from 'react-dom/server';
 
 import createHelpers from '../../jest.setup';
 
-const { matchesMarkupAndStyle } = createHelpers(__dirname);
+const { matchesMarkupAndStyle } = createHelpers(__dirname, 6868);
 const { Docs } = require('../../.generated/docs.js');
 const { beautify } = require('../../shared/utils/beautify.js');
 const { renderWithBetterError } = require('../../shared/utils/render.js');

diff --git a/ui/components/_index.scss b/ui/components/_index.scss
@@ -126,6 +126,7 @@
 
   // Global Header
   'global-header/base/index',
+  'global-header/global-actions/index',
   'global-header/notifications/index',
 
   // Global Navigation

diff --git a/ui/components/branding/docs.mdx b/ui/components/branding/docs.mdx
@@ -2,7 +2,7 @@ import Page from './docs/Page';
 import Token, { Tokens } from './docs/Token';
 import { Button } from '../buttons/base/example';
 import ButtonIcon from '../button-icons/';
-import { GlobalHeader } from '../global-header/base/example';
+import GlobalHeader from '../global-header/';
 import { ContextBar } from '../global-navigation/navigation-bar/example';
 import { ContextTabBar, ContextTab, ContextTabPanel } from '../global-navigation/navigation-tab-bar/example';
 import { FormElement } from '../form-element/base/example';

diff --git a/ui/components/dynamic-menu/base/example.jsx b/ui/components/dynamic-menu/base/example.jsx
@@ -26,7 +26,7 @@ const accounts = [
   'University of AZ Portable Generators'
 ];
 
-const ListboxList = props => (
+export const ListboxList = props => (
   <Listbox
     className="slds-dropdown_length-10"
     vertical
@@ -55,7 +55,7 @@ const ListboxList = props => (
   </Listbox>
 );
 
-const Footer = props => (
+export const Footer = props => (
   <ul>
     <li>
       <button className="slds-button slds-button_reset slds-p-vertical_xx-small slds-size_1-of-1">
@@ -80,7 +80,7 @@ const Footer = props => (
   </ul>
 );
 
-const DynamicMenu = props => (
+export const DynamicMenu = props => (
   <Popover
     className="slds-nubbin_top-left slds-dynamic-menu"
     bodyClassName="slds-p-horizontal_none"

diff --git a/ui/components/global-header/__tests__/index.spec.js b/ui/components/global-header/__tests__/index.spec.js
@@ -4,8 +4,16 @@
 
 import React from 'react';
 import createHelpers from '../../../../jest.setup';
-import { GlobalHeader } from '../base/example';
+import { GlobalHeaderDeprecated } from '../base/example';
+import GlobalHeader from '../';
 
-const { matchesMarkupAndStyle } = createHelpers(__dirname, 5555);
+const { matchesMarkupAndStyle } = createHelpers(__dirname, 8888);
 
-it('renders a global header', () => matchesMarkupAndStyle(<GlobalHeader />));
+describe('render global header', () => {
+  it('renders the deprecated global header', () => {
+    matchesMarkupAndStyle(<GlobalHeaderDeprecated />);
+  });
+  it('render the global header', () => {
+    matchesMarkupAndStyle(<GlobalHeader />);
+  });
+});
diff --git a/ui/components/global-header/base/_index.scss b/ui/components/global-header/base/_index.scss
@@ -82,146 +82,151 @@
     background-repeat: no-repeat;
     background-position: left center;
   }
+}
 
-  /**
-   * Button icons on the global header
-   *
-   * @selector .slds-global-header__button_icon
-   * @restrict .slds-global-header__item button
-   * @required
-   */
-  &__button_icon,
-  &__button--icon {
-    margin: 0 $spacing-xx-small;
-    color: $brand-header-icon;
+@include deprecate("4.0","Use the new global actions component") {
 
-    .slds-icon {
-      fill: $brand-header-icon; // backwards compatible for old implementations
-    }
+  .slds-global-header {
+    /**
+    * Button icons on the global header
+    *
+    * @selector .slds-global-header__button_icon
+    * @restrict .slds-global-header__item button
+    * @deprecated
+    */
+    &__button_icon,
+    &__button--icon {
+      margin: 0 $spacing-xx-small;
+      color: $brand-header-icon;
+
+      .slds-icon {
+        fill: $brand-header-icon; // backwards compatible for old implementations
+      }
 
-    &:hover:not(:disabled),
-    &:focus {
-      color: $brand-header-icon-active;
-    }
+      &:hover:not(:disabled),
+      &:focus {
+        color: $brand-header-icon-active;
+      }
 
-    &:hover:not(:disabled) .slds-icon,
-    &:focus .slds-icon {
-      fill: $brand-header-icon-active; // backwards compatible for old implementations
+      &:hover:not(:disabled) .slds-icon,
+      &:focus .slds-icon {
+        fill: $brand-header-icon-active; // backwards compatible for old implementations
+      }
     }
-  }
 
-  /**
-   * Button icon specifically for global actions
-   *
-   * @selector .slds-global-header__button_icon-actions
-   * @restrict .slds-global-header__item button
-   * @required
-   */
-  &__button_icon-actions,
-  &__button--icon-actions {
-    background: $brand-header-icon;
-    border-radius: $border-radius-medium;
-    color: $brand-header;
-
-    &:hover,
-    &:focus {
-      background-color: $brand-header-icon-active;
+    /**
+    * Button icon specifically for global actions
+    *
+    * @selector .slds-global-header__button_icon-actions
+    * @restrict .slds-global-header__item button
+    * @deprecated
+    */
+    &__button_icon-actions,
+    &__button--icon-actions {
+      background: $brand-header-icon;
+      border-radius: $border-radius-medium;
       color: $brand-header;
-    }
-
-    .slds-button__icon {
-      @include square(1rem);
-    }
-  }
 
-  /**
-   * Button icon specifically for global actions
-   *
-   * @selector .slds-global-header__button_icon-favorites
-   * @restrict .slds-global-header__item button
-   * @required
-   */
-  &__button_icon-favorites,
-  &__button--icon-favorites {
-    color: $color-text-icon-inverse;
-
-    .slds-icon,
-    .slds-button__icon {
-      color: $brand-header;
-      stroke: $brand-header-icon;
-      stroke-width: $border-stroke-width-thick;
-      stroke-linejoin: round;
-      stroke-linecap: round;
-    }
+      &:hover,
+      &:focus {
+        background-color: $brand-header-icon-active;
+        color: $brand-header;
+      }
 
-    &:hover .slds-icon,
-    &:hover .slds-button__icon,
-    &:focus .slds-icon,
-    &:focus .slds-button__icon {
-      color: $brand-header;
-      stroke: $brand-header-icon-active;
+      .slds-button__icon {
+        @include square(1rem);
+      }
     }
 
     /**
-     * Selected state for favorites button
-     *
-     * @selector .slds-is-selected
-     * @restrict .slds-global-header__button_icon-favorites
-     * @modifier
-     * @group stateful
-     */
-    &.slds-is-selected {
+    * Button icon specifically for global actions
+    *
+    * @selector .slds-global-header__button_icon-favorites
+    * @restrict .slds-global-header__item button
+    * @deprecated
+    */
+    &__button_icon-favorites,
+    &__button--icon-favorites {
+      color: $color-text-icon-inverse;
 
       .slds-icon,
       .slds-button__icon {
         color: $brand-header;
-        stroke: $brand-accessible;
-        stroke-width: $border-stroke-width-thin;
-        fill: $brand-header;
+        stroke: $brand-header-icon;
+        stroke-width: $border-stroke-width-thick;
+        stroke-linejoin: round;
+        stroke-linecap: round;
       }
 
       &:hover .slds-icon,
       &:hover .slds-button__icon,
       &:focus .slds-icon,
       &:focus .slds-button__icon {
         color: $brand-header;
-        stroke: $brand-accessible-active;
-        fill: $brand-header;
+        stroke: $brand-header-icon-active;
       }
 
-      &:active .slds-icon,
-      &:active .slds-button__icon {
-        color: $brand-header;
-        stroke: $brand-accessible-active;
-        fill: $brand-header;
+      /**
+      * Selected state for favorites button
+      *
+      * @selector .slds-is-selected
+      * @restrict .slds-global-header__button_icon-favorites
+      * @deprecated
+      * @group stateful
+      */
+      &.slds-is-selected {
+
+        .slds-icon,
+        .slds-button__icon {
+          color: $brand-header;
+          stroke: $brand-accessible;
+          stroke-width: $border-stroke-width-thin;
+          fill: $brand-header;
+        }
+
+        &:hover .slds-icon,
+        &:hover .slds-button__icon,
+        &:focus .slds-icon,
+        &:focus .slds-button__icon {
+          color: $brand-header;
+          stroke: $brand-accessible-active;
+          fill: $brand-header;
+        }
+
+        &:active .slds-icon,
+        &:active .slds-button__icon {
+          color: $brand-header;
+          stroke: $brand-accessible-active;
+          fill: $brand-header;
+        }
+      }
+
+      /**
+      * Disabled state for favorites button
+      *
+      * @selector .slds-is-disabled
+      * @restrict .slds-global-header__button_icon-favorites
+      * @deprecated
+      */
+      &.slds-is-disabled .slds-icon,
+      &.slds-is-disabled .slds-button__icon,
+      &:disabled .slds-icon,
+      &:disabled .slds-button__icon {
+        stroke: $brand-header-icon-disabled;
       }
     }
 
     /**
-     * Disabled state for favorites button
-     *
-     * @selector .slds-is-disabled
-     * @restrict .slds-global-header__button_icon-favorites
-     * @modifier
-     */
-    &.slds-is-disabled .slds-icon,
-    &.slds-is-disabled .slds-button__icon,
-    &:disabled .slds-icon,
-    &:disabled .slds-button__icon {
-      stroke: $brand-header-icon-disabled;
+    * Deal with sizing for global header icons
+    *
+    * @selector .global-header__icon
+    * @restrict .slds-global-header__item svg
+    * @deprecated
+    */
+    &__icon,
+    &__icon .slds-icon,
+    &__icon .slds-button__icon {
+      @include square($square-icon-global-identity-icon);
     }
   }
-
-  /**
-   * Deal with sizing for global header icons
-   *
-   * @selector .global-header__icon
-   * @restrict .slds-global-header__item svg
-   * @required
-   */
-  &__icon,
-  &__icon .slds-icon,
-  &__icon .slds-button__icon {
-    @include square($square-icon-global-identity-icon);
-  }
 }