Merge branch 'main' into feat/modal-iconDescription

carbon-design-system · Oct 21, 2021 · 67be21f · 67be21f
2 parents 8199a34 + 559412c
commit 67be21f
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 6 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -802,6 +802,16 @@
  "code"
  ]
  },
+ {
+ "login": "RianTavares",
+ "name": "@RianTavaresOn",
+ "avatar_url": "https://avatars.githubusercontent.com/u/8935295?v=4",
+ "profile": "https://riantavares.github.io/",
+ "contributions": [
+ "code",
+ "design"
+ ]
+ },
  {
  "login": "ColbyJohnIBM",
  "name": "ColbyJohnIBM",

diff --git a/README.md b/README.md
@@ -187,6 +187,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
  <td align="center"><a href="https://github.com/adamalston"><img src="https://avatars.githubusercontent.com/u/18297826?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Adam Alston</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=adamalston" title="Documentation">📖</a></td>
  <td align="center"><a href="https://github.com/Kiittyka"><img src="https://avatars.githubusercontent.com/u/41021851?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Krithika S Udupa</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Kiittyka" title="Documentation">📖</a></td>
  <td align="center"><a href="https://github.com/egriff38"><img src="https://avatars.githubusercontent.com/u/6627718?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Eshin Griffith</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=egriff38" title="Code">💻</a></td>
+ <td align="center"><a href="https://riantavares.github.io/"><img src="https://avatars.githubusercontent.com/u/8935295?v=4?s=100" width="100px;" alt=""/><br /><sub><b>@RianTavaresOn</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=RianTavares" title="Code">💻</a> <a href="#design-RianTavares" title="Design">🎨</a></td>
  <td align="center"><a href="https://github.com/ColbyJohnIBM"><img src="https://avatars.githubusercontent.com/u/19613692?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ColbyJohnIBM</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ColbyJohnIBM" title="Code">💻</a></td>
  </tr>
 </table>

diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
@@ -245,6 +245,25 @@
  position: relative;
  }
 
+ .#{$prefix}--header__submenu--current::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ border-bottom: 3px solid $border-interactive;
+ content: '';
+ }
+
+ .#{$prefix}--header__submenu--current:focus {
+ border: 2px solid $focus;
+ }
+
+ .#{$prefix}--header__submenu--current:focus::after {
+ border: 0;
+ }
+
  .#{$prefix}--header__menu-title[aria-haspopup='true'] {
  position: relative;
  }

diff --git a/packages/react/src/components/UIShell/HeaderMenu.js b/packages/react/src/components/UIShell/HeaderMenu.js
@@ -160,6 +160,7 @@ class HeaderMenu extends React.Component {
  render() {
  const prefix = this.context;
  const {
+ isCurrentPage,
  'aria-label': ariaLabel,
  'aria-labelledby': ariaLabelledBy,
  className: customClassName,
@@ -174,7 +175,12 @@ class HeaderMenu extends React.Component {
  'aria-label': ariaLabel,
  'aria-labelledby': ariaLabelledBy,
  };
- const className = cx(`${prefix}--header__submenu`, customClassName);
+ const className = cx({
+ [`${prefix}--header__submenu`]: true,
+ [customClassName]: true,
+ [`${prefix}--header__submenu--current`]: isCurrentPage,
+ });
+
  // Notes on eslint comments and based on the examples in:
  // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
  // - The focus is handled by the <a> menuitem, onMouseOver is for mouse

diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js
@@ -203,14 +203,14 @@ export const HeaderBaseWNavigation = withReadme(readme, () => (
  [Platform]
  </HeaderName>
  <HeaderNavigation aria-label="IBM [Platform]">
- <HeaderMenuItem isCurrentPage href="#">
- Link 1
- </HeaderMenuItem>
+ <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
  <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
  <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
- <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
+ <HeaderMenu aria-label="Link 4" menuLinkName="Link 4" isCurrentPage>
  <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
- <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
+ <HeaderMenuItem href="#" isCurrentPage>
+ Sub-link 2
+ </HeaderMenuItem>
  <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
  </HeaderMenu>
  </HeaderNavigation>

diff --git a/packages/styles/scss/components/ui-shell/header/_header.scss b/packages/styles/scss/components/ui-shell/header/_header.scss
@@ -269,6 +269,25 @@
  position: relative;
  }
 
+ .#{$prefix}--header__submenu--current::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ border-bottom: 3px solid $border-interactive;
+ content: '';
+ }
+
+ .#{$prefix}--header__submenu--current:focus {
+ border: 2px solid $focus;
+ }
+
+ .#{$prefix}--header__submenu--current:focus::after {
+ border: 0;
+ }
+
  .#{$prefix}--header__menu-title[aria-haspopup='true'] {
  position: relative;
  }