From 4cd729f812977a72a37711b6104f19ab48001be4 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 2 Mar 2021 11:53:36 -0800 Subject: [PATCH 1/3] fix(UIShell): fix overlay issue with modal in content (#7891) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../src/components/ui-shell/_content.scss | 1 - .../src/components/ui-shell/_side-nav.scss | 5 +++-- .../react/src/components/UIShell/SideNav.js | 2 +- .../src/components/UIShell/UIShell-story.js | 20 ++++++++++++++++++- 4 files changed, 23 insertions(+), 5 deletions(-) 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/_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/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..aa130432fbc8 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. +

+ From b9adf1d5c78ef050dad8ed121d3a67b3f9feb824 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Tue, 2 Mar 2021 14:34:05 -0600 Subject: [PATCH 2/3] fix(HeaderGlobalAction): provide visual text for link via title attribute (#7736) * fix(uishell): use aria-label text as title in header global action * chore: update headerglobalaction snapshot * fix(uishell): use + ); }); @@ -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/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js index aa130432fbc8..2e66ce7984ea 100644 --- a/packages/react/src/components/UIShell/UIShell-story.js +++ b/packages/react/src/components/UIShell/UIShell-story.js @@ -254,7 +254,8 @@ export const HeaderBaseWActions = withReadme(readme, () => ( + onClick={action('app-switcher click')} + tooltipAlignment="end"> @@ -283,7 +284,8 @@ export const HeaderBaseWSkipToContent = withReadme(readme, () => ( + onClick={action('app-switcher click')} + tooltipAlignment="end"> @@ -330,7 +332,8 @@ export const HeaderBaseWNavigationAndActions = withReadme(readme, () => ( + onClick={action('app-switcher click')} + tooltipAlignment="end"> @@ -396,7 +399,8 @@ export const HeaderBaseWNavigationActionsAndSideNav = withReadme(readme, () => ( + onClick={action('app-switcher click')} + tooltipAlignment="end"> @@ -552,7 +556,8 @@ export const HeaderBaseWActionsAndRightPanel = withReadme(readme, () => ( + onClick={action('app-switcher click')} + tooltipAlignment="end"> @@ -580,7 +585,8 @@ export const HeaderBaseWActionsAndSwitcher = withReadme(readme, () => ( + onClick={action('app-switcher click')} + tooltipAlignment="end"> @@ -828,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]} > - + + + + + + + `; From 7e91a93337e7b0f5bf98515ac1f5222b72dce1ab Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 2 Mar 2021 13:11:09 -0800 Subject: [PATCH 3/3] docs(NumberInput): update NumberInput story (#7940) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../NumberInput/NumberInput-story.js | 40 +++++++++---------- .../components/NumberInput/NumberInput.mdx | 17 +++++++- 2 files changed, 35 insertions(+), 22 deletions(-) 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