fix(toast): added ability to wrap toast content with long words (#4738)

* fix(toast): added ability to wrap toast content with long words * ci: updated golden image cache --------- Co-authored-by: Rajdeep Chandra <rajdeepchandra@rajdeeps-mbp-2.macromedia.com>
adobe · Sep 11, 2024 · 302d6fe · 302d6fe
1 parent 4c6a0dc
commit 302d6fe
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 7 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 77fc745068639c0f956c26f7635c7ff5643ea905
+        default: 1bee3571a815481151a0d4fad5a225cb0e8d36a1
     wireit_cache_name:
         type: string
         default: wireit

diff --git a/packages/toast/package.json b/packages/toast/package.json
@@ -64,7 +64,7 @@
         "@spectrum-web-components/shared": "^0.47.2"
     },
     "devDependencies": {
-        "@spectrum-css/toast": "^10.1.0"
+        "@spectrum-css/toast": "^10.2.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/toast/src/spectrum-toast.css b/packages/toast/src/spectrum-toast.css
@@ -104,6 +104,7 @@ governing permissions and limitations under the License.
             var(--spectrum-toast-background-color-default)
         )
     );
+    overflow-wrap: anywhere;
     flex-direction: row;
     align-items: stretch;
     padding-inline-start: var(

diff --git a/packages/toast/stories/toast.stories.ts b/packages/toast/stories/toast.stories.ts
@@ -110,6 +110,14 @@ export const Negative = (args: Properties): TemplateResult =>
 export const Info = (args: Properties): TemplateResult =>
     variantDemo({ ...args, variant: 'info' });
 
+export const Wrapping = (args: Properties): TemplateResult =>
+    variantDemo({
+        ...args,
+        variant: 'info',
+        content:
+            'A new version of Lightroom Classic is now available. Use the Update button below to start using the new version.',
+    });
+
 const overlayStyles = html`
     <style>
         html,

diff --git a/yarn.lock b/yarn.lock
@@ -5303,10 +5303,10 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/thumbnail/-/thumbnail-6.1.0.tgz#72e4ad895564607eedf1ae69a9923cb0c4e76273"
   integrity sha512-RW22T2lgJN60KuPg23xES4R5tjMseVoOUzuzubToqfGxRHFCIVl3VV9I8/F+SSZ3USdFWYcg6SVBx5InZWJDzQ==
 
-"@spectrum-css/toast@^10.1.0":
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-10.1.0.tgz#07e397d18ec1c7d9c919e8aae464686862b91f47"
-  integrity sha512-TxkSE8ZvmIj80oCuPRbWHxJQna0/PeowjfXBrHBoKT7pJKF9LfWD2K+AIHwNVYJfaGCPJxsRlZUsldL7PmzfJw==
+"@spectrum-css/toast@^10.2.0":
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-10.2.0.tgz#70e7e3103a48e909b85b2412c3ad00b2df1b1ac7"
+  integrity sha512-cXfj8ggl7bEF7SDkpwnbyrS0uzRmraDwA4mbJxNKda32eO5luy/PPrulE4btm2/N/RpJ7f+pS3E2QuAQ67i90g==
 
 "@spectrum-css/tokens-v2@npm:@spectrum-css/tokens@^14.0.0-next.3":
   version "14.0.0-next.3"
@@ -5349,7 +5349,7 @@
   integrity sha512-rGfd7jqXOdR69bEjrRP58ynuIeJU0czPfwQvzhtCzg7jKVukV+efNHqrs086sC6xutB3W4TF71K/dZMr3oyTyg==
 
 "@spectrum-web-components/eslint-plugin@file:./linters/eslint":
-  version "0.47.1"
+  version "0.47.2"
 
 "@storybook/addon-a11y@^7.5.0":
   version "7.6.19"