From d7070ca3e87f15e8abdda148184703e9c5c9f7e3 Mon Sep 17 00:00:00 2001 From: acarreras Date: Fri, 11 Oct 2024 20:33:58 +0200 Subject: [PATCH 01/14] moer --- packages/gestalt/src/BannerCallout.css | 16 +++++- packages/gestalt/src/BannerCallout.tsx | 72 +++++++++++++++++++++----- 2 files changed, 74 insertions(+), 14 deletions(-) diff --git a/packages/gestalt/src/BannerCallout.css b/packages/gestalt/src/BannerCallout.css index 9c25f7e1d7..58bd86aeb2 100644 --- a/packages/gestalt/src/BannerCallout.css +++ b/packages/gestalt/src/BannerCallout.css @@ -1,11 +1,23 @@ +.dismissButton { + position: absolute; +} + html[dir="rtl"] .rtlPos { left: 0; - position: absolute; top: 0; } html:not([dir="rtl"]) .rtlPos { - position: absolute; right: 0; top: 0; } + +html[dir="rtl"] .rtlVRPos { + left: var(--sema-space-400); + top: var(--sema-space-400); +} + +html:not([dir="rtl"]) .rtlVRPos { + right: var(--sema-space-400); + top: var(--sema-space-400); +} diff --git a/packages/gestalt/src/BannerCallout.tsx b/packages/gestalt/src/BannerCallout.tsx index 6b0d803598..a2cb42eb0e 100644 --- a/packages/gestalt/src/BannerCallout.tsx +++ b/packages/gestalt/src/BannerCallout.tsx @@ -1,14 +1,20 @@ import { Children, ComponentProps, ReactElement } from 'react'; import classnames from 'classnames'; +import { + SEMA_SPACE_800, + SEMA_SPACE_1200, +} from 'gestalt-design-tokens/dist/js/vr-theme/constants.es'; import styles from './BannerCallout.css'; import Box from './Box'; import Button from './Button'; import ButtonLink from './ButtonLink'; import { useDefaultLabelContext } from './contexts/DefaultLabelProvider'; +import Heading from './Heading'; import Icon from './Icon'; import IconButton from './IconButton'; import MESSAGING_TYPE_ATTRIBUTES from './MESSAGING_TYPE_ATTRIBUTES'; import Text from './Text'; +import useInExperiment from './useInExperiment'; import useResponsiveMinWidth from './useResponsiveMinWidth'; export type ActionDataType = @@ -114,7 +120,16 @@ function BannerCalloutAction({ stacked?: boolean; type: string; }) { - const color = type === 'primary' ? 'white' : 'transparent'; + const isInVRExperiment = useInExperiment({ + webExperimentName: 'web_gestalt_visualRefresh', + mwebExperimentName: 'web_gestalt_visualRefresh', + }); + + const primaryColor: ComponentProps['color'] = isInVRExperiment ? 'red' : 'white'; + + const secondaryColor = isInVRExperiment ? 'white' : 'transparent'; + + const color = type === 'primary' ? primaryColor : secondaryColor; const { accessibilityLabel, disabled, label } = data; @@ -183,6 +198,13 @@ export default function BannerCallout({ iconAccessibilityLabelWarning, } = useDefaultLabelContext('BannerCallout'); + const isRtl = typeof document === 'undefined' ? false : document?.dir === 'rtl'; + + const isInVRExperiment = useInExperiment({ + webExperimentName: 'web_gestalt_visualRefresh', + mwebExperimentName: 'web_gestalt_visualRefresh', + }); + const getDefaultIconAccessibilityLabel = () => { switch (type) { case 'success': @@ -204,9 +226,19 @@ export default function BannerCallout({ - + {title && ( - - {title} - + {isInVRExperiment ? ( + + {title} + + ) : ( + + {title} + + )} )} {typeof message === 'string' ? ( @@ -281,13 +324,18 @@ export default function BannerCallout({ )} {dismissButton && ( -
+
From 7994f035ce20344f2bbcad9b32e7410dedc7e0b0 Mon Sep 17 00:00:00 2001 From: acarreras Date: Fri, 11 Oct 2024 21:00:31 +0200 Subject: [PATCH 02/14] moe --- .../examples/bannercallout/variantDefault.tsx | 30 +++++++++++++++ docs/pages/web/bannercallout.tsx | 38 ++++++++----------- packages/gestalt/src/BannerCallout.tsx | 26 +++++++++---- packages/gestalt/src/ButtonLink.tsx | 12 ++---- .../gestalt/src/MESSAGING_TYPE_ATTRIBUTES.ts | 6 +++ 5 files changed, 72 insertions(+), 40 deletions(-) create mode 100644 docs/examples/bannercallout/variantDefault.tsx diff --git a/docs/examples/bannercallout/variantDefault.tsx b/docs/examples/bannercallout/variantDefault.tsx new file mode 100644 index 0000000000..afc937a999 --- /dev/null +++ b/docs/examples/bannercallout/variantDefault.tsx @@ -0,0 +1,30 @@ +import { BannerCallout, Flex } from 'gestalt'; + +export default function Example() { + return ( + + {}, + }} + message="Inspiration to build the life you love." + primaryAction={{ + accessibilityLabel: 'Log in', + href: 'https://pinterest.com', + label: 'Sign up', + target: 'blank', + role: 'link', + }} + secondaryAction={{ + accessibilityLabel: 'Log in', + href: 'https://pinterest.com', + label: 'Log in', + target: 'blank', + role: 'link', + }} + title="Pinterest is the place for inspiration" + type="default" + /> + + ); +} diff --git a/docs/pages/web/bannercallout.tsx b/docs/pages/web/bannercallout.tsx index 5d884d10bb..142e2d0a74 100644 --- a/docs/pages/web/bannercallout.tsx +++ b/docs/pages/web/bannercallout.tsx @@ -16,6 +16,7 @@ import localizationLabels from '../../examples/bannercallout/localizationLabels' import main from '../../examples/bannercallout/main'; import placeAtTop from '../../examples/bannercallout/placeAtTop'; import productMessages from '../../examples/bannercallout/productMessages'; +import variantDefault from '../../examples/bannercallout/variantDefault'; import variantError from '../../examples/bannercallout/variantError'; import variantInfo from '../../examples/bannercallout/variantInfo'; import variantMessage from '../../examples/bannercallout/variantMessage'; @@ -146,7 +147,6 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen code={accessibilityExample} layout="column" name="BannerCallout labels" - // hideEditor /> } /> @@ -160,6 +160,17 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen /> + + + } + /> + + + } /> @@ -188,7 +194,6 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen code={variantRecommendation} layout="column" name="Variants - Recommendation" - // hideEditor /> } /> @@ -200,12 +205,7 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen + } /> @@ -221,7 +221,6 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen code={variantWarning} layout="column" name="Variants - Warning" - // hideEditor previewHeight={460} /> } @@ -239,7 +238,6 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen code={variantError} layout="column" name="Variants - Error" - // hideEditor previewHeight={380} /> } @@ -262,12 +260,7 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen + } /> @@ -289,7 +282,6 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen code={dismissibleExample} layout="column" name="Dismissable BannerCallout" - // hideEditor /> } /> diff --git a/packages/gestalt/src/BannerCallout.tsx b/packages/gestalt/src/BannerCallout.tsx index a2cb42eb0e..105b3d230d 100644 --- a/packages/gestalt/src/BannerCallout.tsx +++ b/packages/gestalt/src/BannerCallout.tsx @@ -104,7 +104,7 @@ type Props = { /** * The category of BannerCallout. See [Variants](https://gestalt.pinterest.systems/web/bannercallout#Variants) to learn more. */ - type: 'error' | 'info' | 'recommendation' | 'success' | 'warning'; + type: 'default' | 'error' | 'info' | 'recommendation' | 'success' | 'warning'; /** * Brief title summarizing BannerCallout. Content should be [localized](https://gestalt.pinterest.systems/web/bannercallout#Localization). */ @@ -114,11 +114,13 @@ type Props = { function BannerCalloutAction({ data, stacked, + level, type, }: { data: ActionDataType; stacked?: boolean; - type: string; + level: string; + type: 'default' | 'error' | 'info' | 'recommendation' | 'success' | 'warning'; }) { const isInVRExperiment = useInExperiment({ webExperimentName: 'web_gestalt_visualRefresh', @@ -127,9 +129,13 @@ function BannerCalloutAction({ const primaryColor: ComponentProps['color'] = isInVRExperiment ? 'red' : 'white'; - const secondaryColor = isInVRExperiment ? 'white' : 'transparent'; + let secondaryColor = isInVRExperiment ? 'white' : 'transparent'; - const color = type === 'primary' ? primaryColor : secondaryColor; + if (type === 'default') { + secondaryColor = 'gray'; + } + + const color = level === 'primary' ? primaryColor : secondaryColor; const { accessibilityLabel, disabled, label } = data; @@ -138,7 +144,7 @@ function BannerCalloutAction({ alignItems="center" display="block" justifyContent="center" - marginTop={type === 'secondary' && stacked ? 2 : undefined} + marginTop={level === 'secondary' && stacked ? 2 : undefined} paddingX={1} smDisplay="flex" smMarginBottom="auto" @@ -224,6 +230,7 @@ export default function BannerCallout({ return ( {secondaryAction && responsiveMinWidth !== 'xs' && ( - + + )} + {primaryAction && ( + )} - {primaryAction && } {secondaryAction && responsiveMinWidth === 'xs' && ( )} diff --git a/packages/gestalt/src/ButtonLink.tsx b/packages/gestalt/src/ButtonLink.tsx index 6086740f50..0bdbd5f327 100644 --- a/packages/gestalt/src/ButtonLink.tsx +++ b/packages/gestalt/src/ButtonLink.tsx @@ -1,6 +1,7 @@ -import { forwardRef, useImperativeHandle, useRef } from 'react'; +import { type ComponentProps, forwardRef, useImperativeHandle, useRef } from 'react'; import getAriaLabel from './accessibility/getAriaLabel'; import NewTabAccessibilityLabel from './accessibility/NewTabAccessibilityLabel'; +import Button from './Button'; import { useColorScheme } from './contexts/ColorSchemeProvider'; import { useDefaultLabelContext } from './contexts/DefaultLabelProvider'; import Flex from './Flex'; @@ -35,14 +36,7 @@ type ButtonProps = { /** * The background color of ButtonLink. */ - color?: - | 'gray' - | 'red' - | 'blue' - | 'transparent' - | 'semiTransparentWhite' - | 'transparentWhiteText' - | 'white'; + color?: ComponentProps['color']; /** * Available for testing purposes, if needed. Consider [better queries](https://testing-library.com/docs/queries/about/#priority) before using this prop. */ diff --git a/packages/gestalt/src/MESSAGING_TYPE_ATTRIBUTES.ts b/packages/gestalt/src/MESSAGING_TYPE_ATTRIBUTES.ts index ea4c3febf1..ac096dbe93 100644 --- a/packages/gestalt/src/MESSAGING_TYPE_ATTRIBUTES.ts +++ b/packages/gestalt/src/MESSAGING_TYPE_ATTRIBUTES.ts @@ -2,6 +2,12 @@ export default Object.freeze({ neutral: { backgroundColor: 'secondary', }, + default: { + icon: 'pinterest', + iconColor: 'default', + color: 'white', + backgroundColor: 'white', + }, success: { icon: 'check-circle', iconColor: 'success', From 9b1393ef802194643e4bb56b3ec905402da0124b Mon Sep 17 00:00:00 2001 From: acarreras Date: Fri, 11 Oct 2024 21:29:25 +0200 Subject: [PATCH 03/14] more --- packages/gestalt/src/BannerCallout.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/gestalt/src/BannerCallout.tsx b/packages/gestalt/src/BannerCallout.tsx index 105b3d230d..eff40eea2e 100644 --- a/packages/gestalt/src/BannerCallout.tsx +++ b/packages/gestalt/src/BannerCallout.tsx @@ -129,13 +129,14 @@ function BannerCalloutAction({ const primaryColor: ComponentProps['color'] = isInVRExperiment ? 'red' : 'white'; - let secondaryColor = isInVRExperiment ? 'white' : 'transparent'; + let secondaryColor: 'white' | 'transparent' | 'gray' = isInVRExperiment ? 'white' : 'transparent'; if (type === 'default') { secondaryColor = 'gray'; } - const color = level === 'primary' ? primaryColor : secondaryColor; + const color: ComponentProps['color'] = + level === 'primary' ? primaryColor : secondaryColor; const { accessibilityLabel, disabled, label } = data; From 1fca5fdf31a165531fa58f7237544da27b4b8caa Mon Sep 17 00:00:00 2001 From: acarreras Date: Fri, 11 Oct 2024 21:43:00 +0200 Subject: [PATCH 04/14] more --- .../DatePicker.jsdom.test.tsx.snap | 66 +++++++++---------- packages/gestalt/src/BannerCallout.tsx | 2 +- packages/gestalt/src/ButtonLink.tsx | 2 +- .../__snapshots__/BannerCallout.test.tsx.snap | 4 +- 4 files changed, 37 insertions(+), 37 deletions(-) diff --git a/packages/gestalt-datepicker/src/__snapshots__/DatePicker.jsdom.test.tsx.snap b/packages/gestalt-datepicker/src/__snapshots__/DatePicker.jsdom.test.tsx.snap index 92383a5435..b2adf3e450 100644 --- a/packages/gestalt-datepicker/src/__snapshots__/DatePicker.jsdom.test.tsx.snap +++ b/packages/gestalt-datepicker/src/__snapshots__/DatePicker.jsdom.test.tsx.snap @@ -9,14 +9,14 @@ exports[`DatePicker Mobile Datepicker renders 1`] = ` class="_gestalt" >