From cd1d7804b9757f033724ab4be9f771b77efae303 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Mon, 26 Jul 2021 14:40:19 -0400 Subject: [PATCH 1/4] [Banner] Add loading state to primary action --- src/components/Banner/Banner.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx index 502a0794a97..c4845d1bd06 100644 --- a/src/components/Banner/Banner.tsx +++ b/src/components/Banner/Banner.tsx @@ -22,6 +22,7 @@ import {Heading} from '../Heading'; import {ButtonGroup} from '../ButtonGroup'; import {UnstyledButton, unstyledButtonFrom} from '../UnstyledButton'; import {UnstyledLink} from '../UnstyledLink'; +import {Spinner} from '../Spinner'; import {Icon, IconProps} from '../Icon'; import {WithinContentContext} from '../../utilities/within-content-context'; @@ -94,9 +95,15 @@ export const Banner = forwardRef(function Banner( const primaryActionMarkup = action ? (
- {unstyledButtonFrom(action, { - className: styles.Button, - })} + {action.loading ? ( +
+ +
+ ) : ( + unstyledButtonFrom(action, { + className: styles.Button, + }) + )}
) : null; From 7c02cce1906f8dcea1a12cda44d9d062e38ff921 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Tue, 27 Jul 2021 11:04:32 -0400 Subject: [PATCH 2/4] Polish --- src/components/Banner/Banner.scss | 15 ++++++++++++++ src/components/Banner/Banner.tsx | 34 +++++++++++++++++++++++-------- 2 files changed, 40 insertions(+), 9 deletions(-) diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss index e71372395b1..eb7b6ffb38b 100644 --- a/src/components/Banner/Banner.scss +++ b/src/components/Banner/Banner.scss @@ -4,6 +4,7 @@ $accent-height: 3px; $ribbon-flex-basis: rem(32px); $secondary-action-vertical-padding: 0.5 * (control-height() - line-height(body)); $secondary-action-horizontal-padding: 1.5 * spacing(tight); +$spinner-size: rem(20px); @mixin banner-variants($in-page) { --p-banner-background: var(--p-background); @@ -278,3 +279,17 @@ $secondary-action-horizontal-padding: 1.5 * spacing(tight); @include focus-ring($style: 'focused'); } } + +.loading { + position: relative; + color: transparent; + pointer-events: none; +} + +.Spinner { + position: absolute; + top: 50%; + left: 50%; + margin-top: -($spinner-size / 2); + margin-left: -($spinner-size / 2); +} diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx index c4845d1bd06..7d85b875878 100644 --- a/src/components/Banner/Banner.tsx +++ b/src/components/Banner/Banner.tsx @@ -16,6 +16,7 @@ import { import {classNames, variationName} from '../../utilities/css'; import {BannerContext} from '../../utilities/banner-context'; import {useUniqueId} from '../../utilities/unique-id'; +import {useI18n} from '../../utilities/i18n'; import type {Action, DisableableAction, LoadableAction} from '../../types'; import {Button} from '../Button'; import {Heading} from '../Heading'; @@ -64,6 +65,7 @@ export const Banner = forwardRef(function Banner( ) { const withinContentContainer = useContext(WithinContentContext); const id = useUniqueId('Banner'); + const i18n = useI18n(); const { wrapperRef, handleKeyUp, @@ -93,17 +95,31 @@ export const Banner = forwardRef(function Banner( ); } + const spinnerMarkup = action?.loading ? ( + + ) : null; + const primaryActionMarkup = action ? (
- {action.loading ? ( -
- -
- ) : ( - unstyledButtonFrom(action, { - className: styles.Button, - }) - )} + {action.loading + ? spinnerMarkup + : unstyledButtonFrom(action, { + className: styles.Button, + })}
) : null; From cf4dd155e606bcf007b760e6fb8bbfcdaa176dc8 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Tue, 27 Jul 2021 11:07:07 -0400 Subject: [PATCH 3/4] Add to unreleased, revert playground --- UNRELEASED.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index 9d601766af2..6476e46f6e6 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -11,6 +11,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Bug fixes +- Fixed a bug in `Banner` where loading state wasn't getting passed to `primaryAction` ([#4338](https://github.com/Shopify/polaris-react/pull/4338)) + ### Documentation ### Development workflow From 5a55e7f4b586d18fd63bebd27caaaddcf4917f46 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Tue, 27 Jul 2021 11:54:26 -0400 Subject: [PATCH 4/4] Add tests --- src/components/Banner/tests/Banner.test.tsx | 44 ++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/src/components/Banner/tests/Banner.test.tsx b/src/components/Banner/tests/Banner.test.tsx index 596fc66e446..18246e175aa 100644 --- a/src/components/Banner/tests/Banner.test.tsx +++ b/src/components/Banner/tests/Banner.test.tsx @@ -8,7 +8,14 @@ import { } from '@shopify/polaris-icons'; import {mountWithApp} from 'test-utilities'; import {BannerContext} from 'utilities/banner-context'; -import {Button, Icon, UnstyledButton, UnstyledLink, Heading} from 'components'; +import { + Button, + Heading, + Icon, + Spinner, + UnstyledButton, + UnstyledLink, +} from 'components'; import {WithinContentContext} from '../../../utilities/within-content-context'; import {Banner, BannerHandles} from '../Banner'; @@ -101,6 +108,41 @@ describe('', () => { 'Primary action', ); }); + + it('renders a Spinner when loading', () => { + const bannerWithAction = mountWithApp( + + Hello World + , + ); + + expect(bannerWithAction).toContainReactComponent(Spinner); + }); + + it('renders a disabled button when loading', () => { + const bannerWithAction = mountWithApp( + + Hello World + , + ); + + expect(bannerWithAction).toContainReactComponent('button', { + disabled: true, + 'aria-busy': true, + }); + }); }); describe('secondaryAction', () => {