Merge branch 'master' into release/v10.30.0-rc.0

carbon-design-system · Mar 2, 2021 · b665c41 · b665c41
2 parents cc8376a + 7e91a93
commit b665c41
Show file tree

Hide file tree

Showing 10 changed files with 142 additions and 55 deletions.
diff --git a/packages/components/src/components/ui-shell/_content.scss b/packages/components/src/components/ui-shell/_content.scss
@@ -16,7 +16,6 @@
   .#{$prefix}--content {
     padding: 2rem;
     background: $ui-02;
-    transform: translate3d(0, 0, 0);
     will-change: margin-left;
   }
 

diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
@@ -77,6 +77,10 @@
     background-color: $shell-header-bg-03;
   }
 
+  .#{$prefix}--header__action.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
+    justify-content: center;
+  }
+
   .#{$prefix}--header__action > svg {
     fill: $shell-header-icon-02;
   }

diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
@@ -116,8 +116,9 @@
   }
 
   .#{$prefix}--side-nav__overlay {
-    position: absolute;
+    position: fixed;
     top: rem(48px);
+    left: 0;
     width: 0;
     height: 0;
     background-color: transparent;
@@ -128,7 +129,7 @@
 
   .#{$prefix}--side-nav__overlay-active {
     @include carbon--breakpoint-down('lg') {
-      width: 100%;
+      width: 100vw;
       height: 100vh;
       background-color: $overlay-01;
       opacity: 1;

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6784,6 +6784,16 @@ Map {
       "onClick": Object {
         "type": "func",
       },
+      "tooltipAlignment": Object {
+        "args": Array [
+          Array [
+            "start",
+            "center",
+            "end",
+          ],
+        ],
+        "type": "oneOf",
+      },
     },
     "render": [Function],
   },

diff --git a/packages/react/src/components/NumberInput/NumberInput-story.js b/packages/react/src/components/NumberInput/NumberInput-story.js
@@ -30,7 +30,7 @@ const sizes = {
 const props = () => ({
   className: 'some-class',
   id: 'tj-input',
-  label: text('Label (label)', 'Number Input label'),
+  label: text('Label (label)', 'NumberInput label'),
   hideLabel: boolean('No label (hideLabel)', false),
   min: number('Minimum value (min)', 0),
   max: number('Maximum value (max)', 100),
@@ -80,6 +80,23 @@ export default {
 };
 
 export const Default = () => {
+  return (
+    <NumberInput
+      min={0}
+      max={100}
+      value={50}
+      label="NumberInput label"
+      helperText="Optional helper text."
+      invalidText="Number is not valid"
+    />
+  );
+};
+
+Default.story = {
+  name: 'Number Input',
+};
+
+export const Playground = () => {
   const { numberInputArrowTranslationIds, ...rest } = props();
   return (
     <NumberInput
@@ -89,23 +106,4 @@ export const Default = () => {
   );
 };
 
-export const Skeleton = () => (
-  <div
-    aria-label="loading number input"
-    aria-live="assertive"
-    role="status"
-    tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
-  >
-    <NumberInputSkeleton />
-  </div>
-);
-
-Skeleton.storyName = 'skeleton';
-
-Skeleton.parameters = {
-  info: {
-    text: `
-        Placeholder skeleton state to use when content is loading.
-      `,
-  },
-};
+export const Skeleton = () => <NumberInputSkeleton />;
diff --git a/packages/react/src/components/NumberInput/NumberInput.mdx b/packages/react/src/components/NumberInput/NumberInput.mdx
@@ -1,4 +1,4 @@
-import { Props } from '@storybook/addon-docs/blocks';
+import { Props, Preview, Story } from '@storybook/addon-docs/blocks';
 
 # NumberInput
 
@@ -10,8 +10,23 @@ import { Props } from '@storybook/addon-docs/blocks';
 
 ## Table of Contents
 
+- [Overview](#overview)
+- [Skeleton state](#skeleton-state)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
 ## Overview
 
+<Preview>
+  <Story id="components-numberinput--default" />
+</Preview>
+
+## Skeleton State
+
+<Preview>
+  <Story id="components-numberinput--skeleton" />
+</Preview>
+
 ## Component API
 
 <Props />

diff --git a/packages/react/src/components/UIShell/HeaderGlobalAction.js b/packages/react/src/components/UIShell/HeaderGlobalAction.js
@@ -10,6 +10,7 @@ import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
+import Button from '../Button';
 
 const { prefix } = settings;
 
@@ -29,6 +30,7 @@ const HeaderGlobalAction = React.forwardRef(function HeaderGlobalAction(
     className: customClassName,
     onClick,
     isActive,
+    tooltipAlignment,
     ...rest
   },
   ref
@@ -43,15 +45,19 @@ const HeaderGlobalAction = React.forwardRef(function HeaderGlobalAction(
     'aria-labelledby': ariaLabelledBy,
   };
   return (
-    <button
+    <Button
       {...rest}
       {...accessibilityLabel}
       className={className}
       onClick={onClick}
       type="button"
+      hasIconOnly
+      iconDescription={ariaLabel}
+      tooltipPosition="bottom"
+      tooltipAlignment={tooltipAlignment}
       ref={ref}>
       {children}
-    </button>
+    </Button>
   );
 });
 
@@ -82,6 +88,12 @@ HeaderGlobalAction.propTypes = {
    * button fires it's onclick event
    */
   onClick: PropTypes.func,
+
+  /**
+   * Specify the alignment of the tooltip to the icon-only button.
+   * Can be one of: start, center, or end.
+   */
+  tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
 };
 
 HeaderGlobalAction.displayName = 'HeaderGlobalAction';

diff --git a/packages/react/src/components/UIShell/SideNav.js b/packages/react/src/components/UIShell/SideNav.js
@@ -74,7 +74,7 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
 
   const overlayClassName = cx({
     [`${prefix}--side-nav__overlay`]: true,
-    [`${prefix}--side-nav__overlay-active`]: expanded,
+    [`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState,
   });
 
   let childrenToRender = children;

diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js
@@ -11,7 +11,7 @@ import { Search20, Notification20, AppSwitcher20 } from '@carbon/icons-react';
 
 import { action } from '@storybook/addon-actions';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { withReadme } from 'storybook-readme';
 import readme from './README.md';
 import HeaderContainer from './HeaderContainer';
@@ -42,6 +42,9 @@ import {
   SwitcherItem,
   SwitcherDivider,
 } from '../UIShell';
+import Modal from '../Modal';
+import Button from '../Button';
+
 import mdx from './UIShell.mdx';
 
 SideNav.displayName = 'SideNav';
@@ -60,6 +63,7 @@ const Fade16 = () => (
 );
 
 const StoryContent = ({ useResponsiveOffset = true }) => {
+  const [open, setOpen] = useState(false);
   const classNameFirstColumn = cx({
     'bx--col-lg-13': true,
     'bx--offset-lg-3': useResponsiveOffset,
@@ -112,6 +116,20 @@ const StoryContent = ({ useResponsiveOffset = true }) => {
             on a page when using a side-nav, then the tabs are secondary in
             hierarchy to the side-nav.
           </p>
+          <Button onClick={() => setOpen(true)}>Launch modal</Button>
+          <Modal
+            modalHeading="Add a custom domain"
+            modalLabel="Account resources"
+            primaryButtonText="Add"
+            secondaryButtonText="Cancel"
+            open={open}
+            onRequestClose={() => setOpen(false)}>
+            <p style={{ marginBottom: '1rem' }}>
+              Custom domains direct requests for your apps in this Cloud Foundry
+              organization to a URL that you own. A custom domain can be a
+              shared domain, a shared subdomain, or a shared domain and host.
+            </p>
+          </Modal>
         </div>
       </div>
     </div>
@@ -236,7 +254,8 @@ export const HeaderBaseWActions = withReadme(readme, () => (
       </HeaderGlobalAction>
       <HeaderGlobalAction
         aria-label="App Switcher"
-        onClick={action('app-switcher click')}>
+        onClick={action('app-switcher click')}
+        tooltipAlignment="end">
         <AppSwitcher20 />
       </HeaderGlobalAction>
     </HeaderGlobalBar>
@@ -265,7 +284,8 @@ export const HeaderBaseWSkipToContent = withReadme(readme, () => (
         </HeaderGlobalAction>
         <HeaderGlobalAction
           aria-label="App Switcher"
-          onClick={action('app-switcher click')}>
+          onClick={action('app-switcher click')}
+          tooltipAlignment="end">
           <AppSwitcher20 />
         </HeaderGlobalAction>
       </HeaderGlobalBar>
@@ -312,7 +332,8 @@ export const HeaderBaseWNavigationAndActions = withReadme(readme, () => (
           </HeaderGlobalAction>
           <HeaderGlobalAction
             aria-label="App Switcher"
-            onClick={action('app-switcher click')}>
+            onClick={action('app-switcher click')}
+            tooltipAlignment="end">
             <AppSwitcher20 />
           </HeaderGlobalAction>
         </HeaderGlobalBar>
@@ -378,7 +399,8 @@ export const HeaderBaseWNavigationActionsAndSideNav = withReadme(readme, () => (
             </HeaderGlobalAction>
             <HeaderGlobalAction
               aria-label="App Switcher"
-              onClick={action('app-switcher click')}>
+              onClick={action('app-switcher click')}
+              tooltipAlignment="end">
               <AppSwitcher20 />
             </HeaderGlobalAction>
           </HeaderGlobalBar>
@@ -534,7 +556,8 @@ export const HeaderBaseWActionsAndRightPanel = withReadme(readme, () => (
       </HeaderGlobalAction>
       <HeaderGlobalAction
         aria-label="App Switcher"
-        onClick={action('app-switcher click')}>
+        onClick={action('app-switcher click')}
+        tooltipAlignment="end">
         <AppSwitcher20 />
       </HeaderGlobalAction>
     </HeaderGlobalBar>
@@ -562,7 +585,8 @@ export const HeaderBaseWActionsAndSwitcher = withReadme(readme, () => (
       <HeaderGlobalAction
         aria-label="App Switcher"
         isActive
-        onClick={action('app-switcher click')}>
+        onClick={action('app-switcher click')}
+        tooltipAlignment="end">
         <AppSwitcher20 />
       </HeaderGlobalAction>
     </HeaderGlobalBar>
@@ -810,7 +834,8 @@ export const SideNavRailWHeader = withReadme(readme, () => (
             </HeaderGlobalAction>
             <HeaderGlobalAction
               aria-label="App Switcher"
-              onClick={action('app-switcher click')}>
+              onClick={action('app-switcher click')}
+              tooltipAlignment="end">
               <AppSwitcher20 />
             </HeaderGlobalAction>
           </HeaderGlobalBar>