fix(ui-shell): fix onclick menu bugs (#5274)

* fix(ui-shell): fix onclick dropdown bugs * fix(ui-shell): update snapshots * fix(icon-helpers): remove unnecessary style attr * fix(tests): update tests * fix(icons): update helper files
carbon-design-system · Feb 11, 2020 · 616b182 · 616b182
1 parent 3e77d6d
commit 616b182
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 37 deletions.
diff --git a/packages/icon-helpers/src/getAttributes.js b/packages/icon-helpers/src/getAttributes.js
@@ -12,9 +12,6 @@ export const defaultAttributes = {
  // `focusable` is a string attribute which is why we do not use a boolean here
  focusable: 'false',
  preserveAspectRatio: 'xMidYMid meet',
- // Reference:
- // https://github.com/ckeditor/ckeditor5/issues/668#issuecomment-344844027
- style: 'will-change: transform;',
 };
 
 /**

diff --git a/packages/icons/examples/preview/index.js b/packages/icons/examples/preview/index.js
@@ -134,9 +134,7 @@ function App({ meta }) {
  <td className="icon-name">
  <a href={`#${id}`}>{name}</a>
  </td>
- <td className="icon-size">{`${attrs.width}x${
- attrs.height
- }`}</td>
+ <td className="icon-size">{`${attrs.width}x${attrs.height}`}</td>
  <td className="icon-preview-container">
  <div className="icon-preview">{svg}</div>
  </td>
@@ -201,22 +199,24 @@ function js2svg(descriptor) {
  attributes = {
  ...iconAttributes,
  style: style
- .split(';')
- .map(declaration => {
- const [property, value] = declaration
- .split(':')
- .map(string => string.trim());
- return {
- [property]: value,
- };
- })
- .reduce(
- (acc, declaration) => ({
- ...acc,
- ...declaration,
- }),
- {}
- ),
+ ? style
+ .split(';')
+ .map(declaration => {
+ const [property, value] = declaration
+ .split(':')
+ .map(string => string.trim());
+ return {
+ [property]: value,
+ };
+ })
+ .reduce(
+ (acc, declaration) => ({
+ ...acc,
+ ...declaration,
+ }),
+ {}
+ )
+ : null,
  };
  }
 
@@ -232,16 +232,16 @@ function format(attrs) {
 }
 
 function getBugTemplate(info, source) {
- const url = new URL('https://github.com/carbon-design-system/carbon/issues/new');
+ const url = new URL(
+ 'https://github.com/carbon-design-system/carbon/issues/new'
+ );
  const params = new URLSearchParams();
  params.append('title', `🔍 Visual bug for the \`${info.filename}\` icon`);
  params.append(
  'body',
  `<!-- Feel free to remove sections that aren't relevant. -->
 
-There is an issue for the \`${
- info.basename
- }\` icon when viewing [the elements demo](https://carbon-elements.netlify.com/icons/examples/preview/).
+There is an issue for the \`${info.basename}\` icon when viewing [the elements demo](https://carbon-elements.netlify.com/icons/examples/preview/).
 
 The source for this icon is available [here](${source}).
 

diff --git a/packages/react/src/components/UIShell/HeaderMenu.js b/packages/react/src/components/UIShell/HeaderMenu.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ChevronDownGlyph } from '@carbon/icons-react';
+import { ChevronDown16 } from '@carbon/icons-react';
 import { settings } from 'carbon-components';
 import cx from 'classnames';
 import React from 'react';
@@ -16,7 +16,7 @@ import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
 const { prefix } = settings;
 
 const defaultRenderMenuContent = () => (
- <ChevronDownGlyph className={`${prefix}--header__menu-arrow`} />
+ <ChevronDown16 className={`${prefix}--header__menu-arrow`} />
 );
 
 /**

diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
@@ -21,38 +21,38 @@ exports[`HeaderMenu should render 1`] = `
  tabIndex={0}
  >
  <defaultRenderMenuContent>
- <ForwardRef(ChevronDownGlyph)
+ <ForwardRef(ChevronDown16)
  className="bx--header__menu-arrow"
  >
  <Icon
  className="bx--header__menu-arrow"
- height={6}
+ height={16}
  preserveAspectRatio="xMidYMid meet"
- viewBox="0 0 10 6"
- width={10}
+ viewBox="0 0 16 16"
+ width={16}
  xmlns="http://www.w3.org/2000/svg"
  >
  <svg
  aria-hidden={true}
  className="bx--header__menu-arrow"
  focusable="false"
- height={6}
+ height={16}
  preserveAspectRatio="xMidYMid meet"
  style={
  Object {
  "willChange": "transform",
  }
  }
- viewBox="0 0 10 6"
- width={10}
+ viewBox="0 0 16 16"
+ width={16}
  xmlns="http://www.w3.org/2000/svg"
  >
  <path
- d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"
+ d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
  />
  </svg>
  </Icon>
- </ForwardRef(ChevronDownGlyph)>
+ </ForwardRef(ChevronDown16)>
  </defaultRenderMenuContent>
  </a>
  <ul