Skip to content
Permalink
Browse files

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
  • Loading branch information...
brandonferrua committed Jan 31, 2018
1 parent 069a3c8 commit 399da9ce0da3724e0e7722cfd642402d9af147f6
Showing with 9,284 additions and 348 deletions.
  1. +737 −0 test/__tests__/__snapshots__/Global_Header_Action_Bar.json
  2. +206 −0 test/__tests__/__snapshots__/Global_Header_Favorites_Disabled.json
  3. +201 −0 test/__tests__/__snapshots__/Global_Header_Favorites_Not_Pressed.json
  4. +201 −0 test/__tests__/__snapshots__/Global_Header_Favorites_Pressed.json
  5. +115 −0 test/__tests__/__snapshots__/Global_Header_Help_Action.json
  6. +41 −0 test/__tests__/__snapshots__/Global_Header_Logo.json
  7. +129 −0 test/__tests__/__snapshots__/Global_Header_Notification_New_Notifications.json
  8. +129 −0 test/__tests__/__snapshots__/Global_Header_Notification_No_Notifications.json
  9. +97 −0 test/__tests__/__snapshots__/Global_Header_Notification_Popup.json
  10. +67 −0 test/__tests__/__snapshots__/Global_Header_Notification_With_playground.json
  11. +1,837 −0 test/__tests__/__snapshots__/Global_Header_Search_Active_State.json
  12. +981 −0 test/__tests__/__snapshots__/Global_Header_Search_Default_State.json
  13. +1,637 −0 test/__tests__/__snapshots__/Global_Header_Search_Expanded_State.json
  14. +115 −0 test/__tests__/__snapshots__/Global_Header_Setup_Action.json
  15. +115 −0 test/__tests__/__snapshots__/Global_Header_Task_Action.json
  16. +981 −0 test/__tests__/__snapshots__/base_global_header.json
  17. +38 −0 test/__tests__/__snapshots__/global_header_container.json
  18. +74 −0 test/__tests__/__snapshots__/global_header_jump_links.json
  19. +64 −0 test/__tests__/__snapshots__/global_header_layout.json
  20. +1 −1 test/__tests__/docs.spec.js
  21. +1 −0 ui/components/_index.scss
  22. +1 −1 ui/components/branding/docs.mdx
  23. +3 −3 ui/components/dynamic-menu/base/example.jsx
  24. +11 −3 ui/components/global-header/__tests__/index.spec.js
  25. +116 −111 ui/components/global-header/base/_index.scss
  26. +19 −22 ui/components/global-header/base/example.jsx
  27. 0 ui/components/global-header/base/index.markup.md
  28. +270 −0 ui/components/global-header/docs.mdx
  29. +8 −0 ui/components/global-header/docs/index.scss
  30. +24 −0 ui/components/global-header/favorites/index.jsx
  31. +275 −0 ui/components/global-header/global-actions/_index.scss
  32. +210 −0 ui/components/global-header/global-actions/index.jsx
  33. +114 −0 ui/components/global-header/index.jsx
  34. +1 −5 ui/components/global-header/notifications/_index.scss
  35. +28 −0 ui/components/global-header/notifications/data.js
  36. +0 −140 ui/components/global-header/notifications/example.jsx
  37. +110 −0 ui/components/global-header/notifications/index.jsx
  38. 0 ui/components/global-header/notifications/index.markup.md
  39. +71 −0 ui/components/global-header/search/data.js
  40. +0 −39 ui/components/global-header/search/example.jsx
  41. +158 −0 ui/components/global-header/search/index.jsx
  42. 0 ui/components/global-header/search/index.markup.md
  43. +58 −0 ui/components/global-header/task/index.jsx
  44. +28 −11 ui/components/menus/dropdown/example.jsx
  45. +12 −12 ui/dependencies/_popover.scss

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -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');
@@ -126,6 +126,7 @@

// Global Header
'global-header/base/index',
'global-header/global-actions/index',
'global-header/notifications/index',

// Global Navigation
@@ -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';
@@ -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"
@@ -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 />);
});
});
@@ -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);
}
}
Oops, something went wrong.

0 comments on commit 399da9c

Please sign in to comment.
You can’t perform that action at this time.