Skip to content

Commit

Permalink
Merge branch 'master' into fix_notification_long_text
Browse files Browse the repository at this point in the history
  • Loading branch information
@shixiedesign
shixiedesign authored May 17, 2019
2 parents 38235c2 + 4f7aad5 commit 670ab5d
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 53 deletions.
60 changes: 55 additions & 5 deletions packages/components/src/components/ui-shell/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
right: 0;
height: mini-units(6);
background-color: $shell-header-bg-01;
border-bottom: $shell-header-border-01;
border-bottom: 1px solid $shell-header-border-01;
z-index: z('header');
}

Expand All @@ -36,6 +36,8 @@
width: mini-units(6);
height: mini-units(6);
border: rem(2px) solid transparent;
transition: background-color $duration--fast-02,
border-color $duration--fast-02;
}

.#{$prefix}--header__action
Expand Down Expand Up @@ -81,6 +83,10 @@
fill: $shell-header-icon-02;
}

.#{$prefix}--header__menu-trigger {
margin-right: rem(-8px);
}

.#{$prefix}--header__menu-trigger > svg {
fill: $shell-header-icon-01;
}
Expand All @@ -97,12 +103,19 @@
display: flex;
align-items: center;
height: 100%;
padding: 0 mini-units(2);
padding: 0 mini-units(4) 0 mini-units(2);
text-decoration: none;
font-weight: 600;
letter-spacing: 0.1px;
line-height: 20px;
user-select: none;
border: rem(2px) solid transparent;
transition: border-color $duration--fast-02;
outline: none;
}

a.#{$prefix}--header__name:focus {
border-color: $shell-header-focus;
}

.#{$prefix}--header__name--prefix {
Expand All @@ -119,11 +132,24 @@
//--------------------------------------------------------------------------
.#{$prefix}--header__nav {
height: 100%;
padding-left: mini-units(2);
position: relative;

&::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: rem(24px);
width: rem(1px);
background-color: $shell-header-border-01;
}
}

.#{$prefix}--header__menu-bar[role='menubar'] {
display: flex;
margin-left: mini-units(1);
height: 100%;
}

Expand All @@ -144,22 +170,33 @@
user-select: none;
// Used for focus styles
border: 2px solid transparent;
transition: background-color $duration--fast-02,
border-color $duration--fast-02, color $duration--fast-02;
}

a.#{$prefix}--header__menu-item[role='menuitem']:hover {
background-color: $shell-header-bg-04;
color: $shell-header-text-01;
}

.#{$prefix}--header__action:active,
a.#{$prefix}--header__menu-item[role='menuitem']:active {
background-color: $shell-header-bg-05;
color: $shell-header-text-01;
}

a.#{$prefix}--header__menu-item[role='menuitem']:focus {
border-color: $shell-header-focus;
color: $shell-header-text-01;
outline: none;
}

a.#{$prefix}--header__menu-item[role='menuitem']:hover > svg,
a.#{$prefix}--header__menu-item[role='menuitem']:active > svg,
a.#{$prefix}--header__menu-item[role='menuitem']:focus > svg {
fill: $shell-header-icon-01;
}

.#{$prefix}--header__submenu {
position: relative;
}
Expand All @@ -169,7 +206,7 @@
}

.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true'] {
background-color: $shell-header-bg-03;
background-color: $shell-header-bg-06;
color: $shell-header-focus;
// Note: needs to be higher than menu. Adding 1 here instead of moving to
// the next level.
Expand Down Expand Up @@ -199,6 +236,18 @@
z-index: z('header');
}

.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
+ .#{$prefix}--header__menu
.#{$prefix}--header__menu-item:hover {
background-color: $shell-header-bg-04;
}

.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
+ .#{$prefix}--header__menu
.#{$prefix}--header__menu-item:active {
background-color: $shell-header-bg-03;
}

.#{$prefix}--header__menu .#{$prefix}--header__menu-item[role='menuitem'] {
height: mini-units(6);
}
Expand All @@ -210,8 +259,9 @@
}

.#{$prefix}--header__menu-arrow {
fill: $ibm-color__gray-10;
fill: $shell-header-icon-03;
margin-left: mini-units(1);
transition: transform $duration--fast-02, fill $duration--fast-02;
}

//--------------------------------------------------------------------------
Expand Down
6 changes: 6 additions & 0 deletions packages/components/src/components/ui-shell/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,12 @@ $shell-header-icon-01: $carbon--gray-10;
/// @group ui-shell
$shell-header-icon-02: $carbon--white-0;

/// Header bar icons
/// @type Color
/// @access private
/// @group ui-shell
$shell-header-icon-03: $carbon--gray-30;

/// Item link
/// @type Color
/// @access private
Expand Down
96 changes: 48 additions & 48 deletions packages/react/src/components/UIShell/UIShell-story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
* LICENSE file in the root directory of this source tree.
*/

import Search16 from '@carbon/icons-react/lib/search/16';
import Notification16 from '@carbon/icons-react/lib/notification/16';
import AppSwitcher16 from '@carbon/icons-react/lib/app-switcher/16';
import Search20 from '@carbon/icons-react/lib/search/20';
import Notification20 from '@carbon/icons-react/lib/notification/20';
import AppSwitcher20 from '@carbon/icons-react/lib/app-switcher/20';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
Expand Down Expand Up @@ -80,30 +80,30 @@ storiesOf('[Experimental] UI Shell', module)
[Platform]
</HeaderName>
<HeaderNavigation aria-label="IBM [Platform]">
<HeaderMenuItem href="#">Catalog</HeaderMenuItem>
<HeaderMenuItem href="#">Docs</HeaderMenuItem>
<HeaderMenuItem href="#">Support</HeaderMenuItem>
<HeaderMenu aria-label="Manage">
<HeaderMenuItem href="#">Link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Link 3</HeaderMenuItem>
<HeaderMenuItem href="#">Link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Link 3</HeaderMenuItem>
<HeaderMenu aria-label="Link 4">
<HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
</HeaderMenu>
</HeaderNavigation>
<HeaderGlobalBar>
<HeaderGlobalAction
aria-label="Search"
onClick={action('search click')}>
<Search16 />
<Search20 />
</HeaderGlobalAction>
<HeaderGlobalAction
aria-label="Notifications"
onClick={action('notification click')}>
<Notification16 />
<Notification20 />
</HeaderGlobalAction>
<HeaderGlobalAction
aria-label="App Switcher"
onClick={action('app-switcher click')}>
<AppSwitcher16 />
<AppSwitcher20 />
</HeaderGlobalAction>
</HeaderGlobalBar>
</Header>
Expand All @@ -119,7 +119,7 @@ storiesOf('[Experimental] UI Shell', module)
withReadme(readme, () => (
<Header aria-label="IBM Platform Name">
<HeaderName href="#" prefix="IBM">
Name
[Platform]
</HeaderName>
</Header>
))
Expand All @@ -133,7 +133,7 @@ storiesOf('[Experimental] UI Shell', module)
onClick={action('Menu clicked')}
/>
<HeaderName href="#" prefix="IBM">
Name
[Platform]
</HeaderName>
</Header>
))
Expand All @@ -143,16 +143,16 @@ storiesOf('[Experimental] UI Shell', module)
withReadme(readme, () => (
<Header aria-label="IBM Platform Name">
<HeaderName href="#" prefix="IBM">
Name
[Platform]
</HeaderName>
<HeaderNavigation aria-label="IBM [Platform]">
<HeaderMenuItem href="#">Catalog</HeaderMenuItem>
<HeaderMenuItem href="#">Docs</HeaderMenuItem>
<HeaderMenuItem href="#">Support</HeaderMenuItem>
<HeaderMenu aria-label="Manage">
<HeaderMenuItem href="#">Link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Link 3</HeaderMenuItem>
<HeaderMenuItem href="#">Link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Link 3</HeaderMenuItem>
<HeaderMenu aria-label="Link 4">
<HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
</HeaderMenu>
</HeaderNavigation>
</Header>
Expand All @@ -163,23 +163,23 @@ storiesOf('[Experimental] UI Shell', module)
withReadme(readme, () => (
<Header aria-label="IBM Platform Name">
<HeaderName href="#" prefix="IBM">
Name
[Platform]
</HeaderName>
<HeaderGlobalBar>
<HeaderGlobalAction
aria-label="Search"
onClick={action('search click')}>
<Search16 />
<Search20 />
</HeaderGlobalAction>
<HeaderGlobalAction
aria-label="Notifications"
onClick={action('notification click')}>
<Notification16 />
<Notification20 />
</HeaderGlobalAction>
<HeaderGlobalAction
aria-label="App Switcher"
onClick={action('app-switcher click')}>
<AppSwitcher16 />
<AppSwitcher20 />
</HeaderGlobalAction>
</HeaderGlobalBar>
</Header>
Expand All @@ -190,33 +190,33 @@ storiesOf('[Experimental] UI Shell', module)
withReadme(readme, () => (
<Header aria-label="IBM Platform Name">
<HeaderName href="#" prefix="IBM">
Name
[Platform]
</HeaderName>
<HeaderNavigation aria-label="IBM [Platform]">
<HeaderMenuItem href="#">Catalog</HeaderMenuItem>
<HeaderMenuItem href="#">Docs</HeaderMenuItem>
<HeaderMenuItem href="#">Support</HeaderMenuItem>
<HeaderMenu aria-label="Manage">
<HeaderMenuItem href="#">Link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Link 3</HeaderMenuItem>
<HeaderMenuItem href="#">Link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Link 3</HeaderMenuItem>
<HeaderMenu aria-label="Link 4">
<HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
</HeaderMenu>
</HeaderNavigation>
<HeaderGlobalBar>
<HeaderGlobalAction
aria-label="Search"
onClick={action('search click')}>
<Search16 />
<Search20 />
</HeaderGlobalAction>
<HeaderGlobalAction
aria-label="Notifications"
onClick={action('notification click')}>
<Notification16 />
<Notification20 />
</HeaderGlobalAction>
<HeaderGlobalAction
aria-label="App Switcher"
onClick={action('app-switcher click')}>
<AppSwitcher16 />
<AppSwitcher20 />
</HeaderGlobalAction>
</HeaderGlobalBar>
</Header>
Expand All @@ -236,30 +236,30 @@ storiesOf('[Experimental] UI Shell', module)
[Platform]
</HeaderName>
<HeaderNavigation aria-label="IBM [Platform]">
<HeaderMenuItem href="#">Catalog</HeaderMenuItem>
<HeaderMenuItem href="#">Docs</HeaderMenuItem>
<HeaderMenuItem href="#">Support</HeaderMenuItem>
<HeaderMenu aria-label="Manage">
<HeaderMenuItem href="#">Link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Link 3</HeaderMenuItem>
<HeaderMenuItem href="#">Link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Link 3</HeaderMenuItem>
<HeaderMenu aria-label="Link 4">
<HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
</HeaderMenu>
</HeaderNavigation>
<HeaderGlobalBar>
<HeaderGlobalAction
aria-label="Search"
onClick={action('search click')}>
<Search16 />
<Search20 />
</HeaderGlobalAction>
<HeaderGlobalAction
aria-label="Notifications"
onClick={action('notification click')}>
<Notification16 />
<Notification20 />
</HeaderGlobalAction>
<HeaderGlobalAction
aria-label="App Switcher"
onClick={action('app-switcher click')}>
<AppSwitcher16 />
<AppSwitcher20 />
</HeaderGlobalAction>
</HeaderGlobalBar>
</Header>
Expand Down

0 comments on commit 670ab5d

Please sign in to comment.