Toast: VR Certification Fixes (#3862)

pinterest · Nov 7, 2024 · 2e77d63 · 2e77d63
1 parent ddb829c
commit 2e77d63
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 8 deletions.
diff --git a/docs/pages/web/toast.tsx b/docs/pages/web/toast.tsx
@@ -1,5 +1,6 @@
 import desktop from 'docs/examples/toast/desktop';
 import mobile from 'docs/examples/toast/mobile';
+import { useDangerouslyInGestaltExperiment } from 'gestalt';
 import AccessibilitySection from '../../docs-components/AccessibilitySection';
 import docGen, { DocGen } from '../../docs-components/docgen';
 import GeneratedPropTable from '../../docs-components/GeneratedPropTable';
@@ -35,6 +36,10 @@ import success from '../../examples/toast/success';
 import textOnly from '../../examples/toast/textOnly';
 
 export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen }) {
+  const isInExperiment = useDangerouslyInGestaltExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
   return (
     <Page title={generatedDocGen?.displayName}>
       <PageHeader
@@ -234,7 +239,9 @@ Note that \`dismissButton.accessibilityLabel\` is optional as DefaultLabelProvid
         <MainSection.Subsection
           columns={2}
           description={`
-The \`text\` prop accepts either a string or [Text](/web/text). Use a string for guide toasts without any visual style. Toast will handle the text style and adherence to design guidelines. Regular strings are subject to two-line truncation.
+The \`text\` prop accepts either a string or [Text](/web/text). Use a string for guide toasts without any visual style. Toast will handle the text style and adherence to design guidelines. ${
+            isInExperiment ? '' : 'Regular strings are subject to two-line truncation.'
+          }
 
 If  confirmation toast's text with more complex style is required, such as bold text, inline links, or no truncation, use Text to wrap your message with any additional Text or Link usages contained within. When passing in your own Text component for \`text\`, do not specify \`color\` on Text. Toast will automatically pick the correct text color for the given \`type\`.
 `}

diff --git a/packages/gestalt/src/Toast.tsx b/packages/gestalt/src/Toast.tsx
@@ -131,8 +131,14 @@ export default function Toast({
   const { accessibilityDismissButtonLabel: accessibilityDismissButtonLabelDefault } =
     useDefaultLabelContext('Toast');
 
-  const { containerColor, textColor, iconColor } = COLORS_BY_TYPE[type];
-
+  const { containerColor, textColor, iconColor } =
+    isInExperiment && type === 'progress'
+      ? {
+          containerColor: 'inverse',
+          textColor: 'inverse',
+          iconColor: 'darkGray',
+        }
+      : COLORS_BY_TYPE[type];
   const isDefaultToast = type === 'default';
   const isNotDefaultToast = ['success', 'error', 'progress'].includes(type);
 
@@ -170,11 +176,13 @@ export default function Toast({
             paddingInlineEnd: isInExperiment ? TOKEN_ROUNDING_300 : TOKEN_ROUNDING_400,
           },
         }}
+        display={isInExperiment ? 'flex' : undefined}
+        minHeight={isInExperiment ? 60 : undefined}
         paddingY={3}
         rounding={4}
         width="100%"
       >
-        <Flex alignItems="center" gap={isInExperiment ? 2 : 4}>
+        <Flex alignItems="center" gap={isInExperiment ? { column: 2, row: 3 } : 4}>
           {isDefaultToast && _dangerouslySetThumbnail ? (
             <Flex.Item flex="none">{_dangerouslySetThumbnail}</Flex.Item>
           ) : null}

diff --git a/packages/gestalt/src/__snapshots__/Toast.test.tsx.snap b/packages/gestalt/src/__snapshots__/Toast.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`<Toast /> Error Toast 1`] = `
     className="box errorBase paddingY300 rounding4"
     style={
       Object {
+        "minHeight": undefined,
         "paddingInlineEnd": "var(--rounding-400)",
         "paddingInlineStart": "var(--rounding-400)",
         "width": "100%",
@@ -63,6 +64,7 @@ exports[`<Toast /> Text + _dangerouslySetPrimaryAction 1`] = `
     className="box inverse paddingY300 rounding4"
     style={
       Object {
+        "minHeight": undefined,
         "paddingInlineEnd": "var(--rounding-400)",
         "paddingInlineStart": "var(--rounding-400)",
         "width": "100%",
@@ -146,6 +148,7 @@ exports[`<Toast /> Text + Image + Button 1`] = `
     className="box inverse paddingY300 rounding4"
     style={
       Object {
+        "minHeight": undefined,
         "paddingInlineEnd": "var(--rounding-400)",
         "paddingInlineStart": "var(--rounding-400)",
         "width": "100%",
@@ -267,6 +270,7 @@ exports[`<Toast /> Text + Image 1`] = `
     className="box inverse paddingY300 rounding4"
     style={
       Object {
+        "minHeight": undefined,
         "paddingInlineEnd": "var(--rounding-400)",
         "paddingInlineStart": "var(--rounding-400)",
         "width": "100%",
@@ -359,6 +363,7 @@ exports[`<Toast /> Text Only 1`] = `
     className="box inverse paddingY300 rounding4"
     style={
       Object {
+        "minHeight": undefined,
         "paddingInlineEnd": "var(--rounding-400)",
         "paddingInlineStart": "var(--rounding-400)",
         "width": "100%",

diff --git a/packages/gestalt/src/sharedSubcomponents/thumbnailSubcomponents.tsx b/packages/gestalt/src/sharedSubcomponents/thumbnailSubcomponents.tsx
@@ -72,8 +72,8 @@ export function Message({
     };
   }, [checkEllipsisActive]);
 
-  const isTruncated = !textElement && text && ellipsisActive;
-  const isTruncatedWithHelperLink = isTruncated && helperLink;
+  const isTruncated = !textElement && text && ellipsisActive && !isInExperiment;
+  const isTruncatedWithHelperLink = isTruncated && helperLink && !isInExperiment;
 
   return (
     <Fragment>
@@ -84,7 +84,7 @@ export function Message({
           align="start"
           color={textColor}
           inline
-          lineClamp={2}
+          lineClamp={isInExperiment ? undefined : 2}
           title={isTruncated && typeof text === 'string' ? text : undefined}
           // Set title prop manually if text is truncated
           weight={isError && !isInExperiment ? 'bold' : undefined}
@@ -114,7 +114,7 @@ export function Message({
       ) : null}
       {/* Should the helkper link */}
       {isTruncatedWithHelperLink ? (
-        <Text color={textColor} weight={isError && !isInExperiment ? 'bold' : undefined}>
+        <Text color={textColor} weight={isError ? 'bold' : undefined}>
           <Link
             accessibilityLabel={helperLink?.accessibilityLabel ?? ''}
             display="inlineBlock"