From 74db232195f63f5da5e81f9ab877862fa65475b0 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 29 Jul 2021 12:06:46 -0700
Subject: [PATCH 1/4] replacing menu break-all with break-word equivalent

break-word is deprecated so also replaced it with its equivalent word-break and overflow-wrap change
---
 packages/@adobe/spectrum-css-temp/components/menu/index.css | 3 ++-
 .../@adobe/spectrum-css-temp/components/sidenav/index.css   | 3 ++-
 .../@adobe/spectrum-css-temp/components/tooltip/index.css   | 3 ++-
 packages/dev/docs/src/docs.css                              | 6 ++++--
 packages/dev/docs/src/syntax-highlight.css                  | 3 ++-
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/menu/index.css b/packages/@adobe/spectrum-css-temp/components/menu/index.css
index 9fd32a36c23..8c3313692f7 100644
--- a/packages/@adobe/spectrum-css-temp/components/menu/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/menu/index.css
@@ -110,7 +110,8 @@ governing permissions and limitations under the License.
 .spectrum-Menu-itemLabel {
   grid-area: text;
   line-height: var(--spectrum-global-font-line-height-small);
-  word-break: break-all;
+  word-break: normal;
+  overflow-wrap: anywhere;
 }
 
 .spectrum-Menu-itemLabel--wrapping {
diff --git a/packages/@adobe/spectrum-css-temp/components/sidenav/index.css b/packages/@adobe/spectrum-css-temp/components/sidenav/index.css
index 6194ef14b54..20011492b7d 100644
--- a/packages/@adobe/spectrum-css-temp/components/sidenav/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/sidenav/index.css
@@ -50,7 +50,8 @@ governing permissions and limitations under the License.
   font-style: normal;
   text-decoration: none;
 
-  word-break: break-word;
+  word-break: normal;
+  overflow-wrap: anywhere;
   hyphens: auto;
 
   cursor: pointer;
diff --git a/packages/@adobe/spectrum-css-temp/components/tooltip/index.css b/packages/@adobe/spectrum-css-temp/components/tooltip/index.css
index 7637e1194cd..6057100e5f8 100644
--- a/packages/@adobe/spectrum-css-temp/components/tooltip/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/tooltip/index.css
@@ -39,7 +39,8 @@ governing permissions and limitations under the License.
   font-size: var(--spectrum-tooltip-text-size);
   font-weight: var(--spectrum-tooltip-text-font-weight);
   line-height: var(--spectrum-tooltip-text-line-height);
-  word-break: break-word;
+  word-break: normal;
+  overflow-wrap: anywhere;
   -webkit-font-smoothing: antialiased;
 
   &.is-open {
diff --git a/packages/dev/docs/src/docs.css b/packages/dev/docs/src/docs.css
index feca8163e06..71e0462b797 100644
--- a/packages/dev/docs/src/docs.css
+++ b/packages/dev/docs/src/docs.css
@@ -343,7 +343,8 @@ footer li:last-child:after {
 }
 
 .propTable td:last-child {
-  word-break: break-word;
+  word-break: normal;
+  overflow-wrap: anywhere;
 }
 
 .propTable tr {
@@ -729,7 +730,8 @@ h2.sectionHeader {
   .propTable td[data-column] code {
     display: inline-block;
     vertical-align: text-top;
-    word-break: break-word;
+    word-break: normal;
+    overflow-wrap: anywhere;
     max-width: calc(100% - 80px);
   }
 
diff --git a/packages/dev/docs/src/syntax-highlight.css b/packages/dev/docs/src/syntax-highlight.css
index 4775ff06b85..1f1fd444da5 100644
--- a/packages/dev/docs/src/syntax-highlight.css
+++ b/packages/dev/docs/src/syntax-highlight.css
@@ -122,7 +122,8 @@
 
   text-align: left;
   word-spacing: normal;
-  word-break: break-all;
+  word-break: normal;
+  overflow-wrap: anywhere;
   line-height: 1.5;
 
   -moz-tab-size: 4;

From 586ea42d18c9e8f2fba7a229c0924d90e83a4f4c Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 29 Jul 2021 17:31:35 -0700
Subject: [PATCH 2/4] reverting to word-break: break-word since Safari does not
 support overflow-mode: anywhere

---
 packages/@adobe/spectrum-css-temp/components/menu/index.css | 3 +--
 .../@adobe/spectrum-css-temp/components/sidenav/index.css   | 3 +--
 .../@adobe/spectrum-css-temp/components/tooltip/index.css   | 3 +--
 packages/dev/docs/src/docs.css                              | 6 ++----
 packages/dev/docs/src/syntax-highlight.css                  | 3 +--
 5 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/menu/index.css b/packages/@adobe/spectrum-css-temp/components/menu/index.css
index 8c3313692f7..8b5fa4a638e 100644
--- a/packages/@adobe/spectrum-css-temp/components/menu/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/menu/index.css
@@ -110,8 +110,7 @@ governing permissions and limitations under the License.
 .spectrum-Menu-itemLabel {
   grid-area: text;
   line-height: var(--spectrum-global-font-line-height-small);
-  word-break: normal;
-  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .spectrum-Menu-itemLabel--wrapping {
diff --git a/packages/@adobe/spectrum-css-temp/components/sidenav/index.css b/packages/@adobe/spectrum-css-temp/components/sidenav/index.css
index 20011492b7d..6194ef14b54 100644
--- a/packages/@adobe/spectrum-css-temp/components/sidenav/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/sidenav/index.css
@@ -50,8 +50,7 @@ governing permissions and limitations under the License.
   font-style: normal;
   text-decoration: none;
 
-  word-break: normal;
-  overflow-wrap: anywhere;
+  word-break: break-word;
   hyphens: auto;
 
   cursor: pointer;
diff --git a/packages/@adobe/spectrum-css-temp/components/tooltip/index.css b/packages/@adobe/spectrum-css-temp/components/tooltip/index.css
index 6057100e5f8..7637e1194cd 100644
--- a/packages/@adobe/spectrum-css-temp/components/tooltip/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/tooltip/index.css
@@ -39,8 +39,7 @@ governing permissions and limitations under the License.
   font-size: var(--spectrum-tooltip-text-size);
   font-weight: var(--spectrum-tooltip-text-font-weight);
   line-height: var(--spectrum-tooltip-text-line-height);
-  word-break: normal;
-  overflow-wrap: anywhere;
+  word-break: break-word;
   -webkit-font-smoothing: antialiased;
 
   &.is-open {
diff --git a/packages/dev/docs/src/docs.css b/packages/dev/docs/src/docs.css
index 71e0462b797..feca8163e06 100644
--- a/packages/dev/docs/src/docs.css
+++ b/packages/dev/docs/src/docs.css
@@ -343,8 +343,7 @@ footer li:last-child:after {
 }
 
 .propTable td:last-child {
-  word-break: normal;
-  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .propTable tr {
@@ -730,8 +729,7 @@ h2.sectionHeader {
   .propTable td[data-column] code {
     display: inline-block;
     vertical-align: text-top;
-    word-break: normal;
-    overflow-wrap: anywhere;
+    word-break: break-word;
     max-width: calc(100% - 80px);
   }
 
diff --git a/packages/dev/docs/src/syntax-highlight.css b/packages/dev/docs/src/syntax-highlight.css
index 1f1fd444da5..9eb02a8864a 100644
--- a/packages/dev/docs/src/syntax-highlight.css
+++ b/packages/dev/docs/src/syntax-highlight.css
@@ -122,8 +122,7 @@
 
   text-align: left;
   word-spacing: normal;
-  word-break: normal;
-  overflow-wrap: anywhere;
+  word-break: break-word;
   line-height: 1.5;
 
   -moz-tab-size: 4;

From d79341f856b6f59c6b283f7872a3d86fabc11f80 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 29 Jul 2021 17:58:21 -0700
Subject: [PATCH 3/4] adding another example to picker

---
 packages/@react-spectrum/picker/stories/Picker.stories.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/@react-spectrum/picker/stories/Picker.stories.tsx b/packages/@react-spectrum/picker/stories/Picker.stories.tsx
index 03734ffa80b..b58bde9a31c 100644
--- a/packages/@react-spectrum/picker/stories/Picker.stories.tsx
+++ b/packages/@react-spectrum/picker/stories/Picker.stories.tsx
@@ -57,9 +57,9 @@ storiesOf('Picker', module)
     'default',
     () => (
       <Picker label="Test" onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
+<Item key="rarely">Short</Item>
+        <Item key="sometimes">Normal</Item>
+        <Item key="always">This item is very long and word wraps poorly</Item>
       </Picker>
     )
   )
@@ -305,6 +305,7 @@ storiesOf('Picker', module)
         <Item key="underscores">your_text_here_long_long_long_long</Item>
         <Item key="hyphens">your-text-here-long-long-long-long</Item>
         <Item key="singleWord">supercalifragilisticexpialidocious</Item>
+        <Item key="always">This item is very long and word wraps poorly</Item>
       </Picker>
     )
   )

From 11c396f59b6fdfdc0b7b2bfee5875428fe4bad47 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Thu, 29 Jul 2021 18:22:07 -0700
Subject: [PATCH 4/4] Update
 packages/@react-spectrum/picker/stories/Picker.stories.tsx

---
 packages/@react-spectrum/picker/stories/Picker.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/picker/stories/Picker.stories.tsx b/packages/@react-spectrum/picker/stories/Picker.stories.tsx
index b58bde9a31c..a0ae70d8723 100644
--- a/packages/@react-spectrum/picker/stories/Picker.stories.tsx
+++ b/packages/@react-spectrum/picker/stories/Picker.stories.tsx
@@ -57,7 +57,7 @@ storiesOf('Picker', module)
     'default',
     () => (
       <Picker label="Test" onSelectionChange={action('selectionChange')}>
-<Item key="rarely">Short</Item>
+        <Item key="rarely">Short</Item>
         <Item key="sometimes">Normal</Item>
         <Item key="always">This item is very long and word wraps poorly</Item>
       </Picker>