diff --git a/packages/components/src/components/ui-shell/_content.scss b/packages/components/src/components/ui-shell/_content.scss index a5c45c1acf6b..de7899770bc7 100644 --- 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 index 33ad579dee39..529a8d3a2703 100644 --- 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 index a36e1f4b0753..72d728868c15 100644 --- 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 index 54a7638c1ec7..67aa83e6f16f 100644 --- 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 index 73d167ac0c3e..5d1c29a04a3f 100644 --- 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 ( + + ); +}; + +Default.story = { + name: 'Number Input', +}; + +export const Playground = () => { const { numberInputArrowTranslationIds, ...rest } = props(); return ( { ); }; -export const Skeleton = () => ( -
- -
-); - -Skeleton.storyName = 'skeleton'; - -Skeleton.parameters = { - info: { - text: ` - Placeholder skeleton state to use when content is loading. - `, - }, -}; +export const Skeleton = () => ; diff --git a/packages/react/src/components/NumberInput/NumberInput.mdx b/packages/react/src/components/NumberInput/NumberInput.mdx index abaf622095f2..901727f39579 100644 --- 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 + + + + +## Skeleton State + + + + + ## Component API diff --git a/packages/react/src/components/UIShell/HeaderGlobalAction.js b/packages/react/src/components/UIShell/HeaderGlobalAction.js index 0ddc1a85cf89..329e3b5b23c9 100644 --- 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 ( - + ); }); @@ -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 index e2f3364a9415..e01067da3659 100644 --- 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 index 5f96e1c9c5aa..2e66ce7984ea 100644 --- 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.

+ + setOpen(false)}> +

+ 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. +

+ @@ -236,7 +254,8 @@ export const HeaderBaseWActions = withReadme(readme, () => ( + onClick={action('app-switcher click')} + tooltipAlignment="end"> @@ -265,7 +284,8 @@ export const HeaderBaseWSkipToContent = withReadme(readme, () => ( + onClick={action('app-switcher click')} + tooltipAlignment="end"> @@ -312,7 +332,8 @@ export const HeaderBaseWNavigationAndActions = withReadme(readme, () => ( + onClick={action('app-switcher click')} + tooltipAlignment="end"> @@ -378,7 +399,8 @@ export const HeaderBaseWNavigationActionsAndSideNav = withReadme(readme, () => ( + onClick={action('app-switcher click')} + tooltipAlignment="end"> @@ -534,7 +556,8 @@ export const HeaderBaseWActionsAndRightPanel = withReadme(readme, () => ( + onClick={action('app-switcher click')} + tooltipAlignment="end"> @@ -562,7 +585,8 @@ export const HeaderBaseWActionsAndSwitcher = withReadme(readme, () => ( + onClick={action('app-switcher click')} + tooltipAlignment="end"> @@ -810,7 +834,8 @@ export const SideNavRailWHeader = withReadme(readme, () => ( + onClick={action('app-switcher click')} + tooltipAlignment="end"> diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap index 121ec020c19b..27883cdcea1b 100644 --- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap +++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap @@ -7,37 +7,60 @@ exports[`HeaderGlobalAction should render 1`] = ` isActive={false} onClick={[MockFunction]} > - + + + + + + + `;