From ac2408548946c885ce53cb4134a32bd9a9398210 Mon Sep 17 00:00:00 2001
From: "Harbarth, Lukas" <lukas.harbarth@sap.com>
Date: Thu, 14 Nov 2019 13:17:17 +0100
Subject: [PATCH 1/3] fix(Text): Added default width of '100%' so ellipsis is
 shown if text is overflowing

---
 packages/main/src/components/Text/demo.stories.tsx | 2 +-
 packages/main/src/components/Text/index.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/components/Text/demo.stories.tsx b/packages/main/src/components/Text/demo.stories.tsx
index b33766d11ff..44b21ae2d0b 100644
--- a/packages/main/src/components/Text/demo.stories.tsx
+++ b/packages/main/src/components/Text/demo.stories.tsx
@@ -8,7 +8,7 @@ export const renderStory = () => {
     <Text
       wrapping={boolean('wrapping', true)}
       renderWhitespace={boolean('renderWhitespace', false)}
-      width={text('width', '')}
+      width={text('width', '100%')}
     >
       Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
       magna aliquyam erat, sed diam voluptua.
diff --git a/packages/main/src/components/Text/index.tsx b/packages/main/src/components/Text/index.tsx
index 913eb066dbf..51ccaa69d58 100644
--- a/packages/main/src/components/Text/index.tsx
+++ b/packages/main/src/components/Text/index.tsx
@@ -52,7 +52,7 @@ const Text: FC<TextProps> = forwardRef((props: TextProps, ref: Ref<HTMLSpanEleme
 Text.defaultProps = {
   renderWhitespace: false,
   wrapping: true,
-  width: null
+  width: '100%'
 };
 
 Text.displayName = 'Text';

From 790e0ddc2e7ef11e7499a6b812383fd7b94383bb Mon Sep 17 00:00:00 2001
From: "Harbarth, Lukas" <lukas.harbarth@sap.com>
Date: Thu, 14 Nov 2019 13:33:02 +0100
Subject: [PATCH 2/3] fix(Text): Updated snapshots

---
 .../AnalyticalCard.test.tsx.snap              |  1 +
 .../__snapshots__/MessageBox.test.tsx.snap    | 10 ++++++++++
 .../__snapshots__/Notification.test.tsx.snap  |  5 +++++
 .../NotificationGroup.test.tsx.snap           | 15 ++++++++++++++
 .../__snapshots__/ObjectPage.test.tsx.snap    |  9 +++++++++
 .../SideNavigation.test.tsx.snap              | 20 +++++++++++++++++++
 .../Text/__snapshots__/Text.test.tsx.snap     |  3 +++
 7 files changed, 63 insertions(+)

diff --git a/packages/main/src/components/AnalyticalCard/__snapshots__/AnalyticalCard.test.tsx.snap b/packages/main/src/components/AnalyticalCard/__snapshots__/AnalyticalCard.test.tsx.snap
index bebd30b9a92..f16aa03784d 100644
--- a/packages/main/src/components/AnalyticalCard/__snapshots__/AnalyticalCard.test.tsx.snap
+++ b/packages/main/src/components/AnalyticalCard/__snapshots__/AnalyticalCard.test.tsx.snap
@@ -101,6 +101,7 @@ exports[`Analytical Card Render without Crashing 1`] = `
   >
     <span
       class="Text--text-"
+      style="width: 100%;"
     >
       I'm a content!
     </span>
diff --git a/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap b/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap
index 15281cd07d7..52cc9d55c86 100644
--- a/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap
+++ b/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap
@@ -49,6 +49,7 @@ exports[`MessageBox Confirm - Cancel 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
+    style="width: 100%;"
   >
     Confirm - Cancel
   </span>
@@ -105,6 +106,7 @@ exports[`MessageBox Confirm - OK 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
+    style="width: 100%;"
   >
     Confirm - OK
   </span>
@@ -152,6 +154,7 @@ exports[`MessageBox Error 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
+    style="width: 100%;"
   >
     Error
   </span>
@@ -199,6 +202,7 @@ exports[`MessageBox Information 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
+    style="width: 100%;"
   >
     Information
   </span>
@@ -255,6 +259,7 @@ exports[`MessageBox No Title 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
+    style="width: 100%;"
   >
     No Title
   </span>
@@ -302,6 +307,7 @@ exports[`MessageBox Not open 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
+    style="width: 100%;"
   >
     Custom Success
   </span>
@@ -357,6 +363,7 @@ exports[`MessageBox Show 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
+    style="width: 100%;"
   >
     Custom
   </span>
@@ -404,6 +411,7 @@ exports[`MessageBox Success 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
+    style="width: 100%;"
   >
     Success
   </span>
@@ -451,6 +459,7 @@ exports[`MessageBox Success w/ custom title 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
+    style="width: 100%;"
   >
     Custom Success
   </span>
@@ -498,6 +507,7 @@ exports[`MessageBox Warning 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
+    style="width: 100%;"
   >
     Warning
   </span>
diff --git a/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap b/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap
index e9c33899561..9f48f8992c3 100644
--- a/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap
+++ b/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap
@@ -36,6 +36,7 @@ exports[`Notification Default 1`] = `
         >
           <span
             class="Text--text- Notification--descriptionEllipsised-"
+            style="width:100%"
           />
           <div
             class="Notification--metadata-"
@@ -108,6 +109,7 @@ exports[`Notification Long Title and Description 1`] = `
         >
           <span
             class="Text--text- Notification--descriptionEllipsised-"
+            style="width:100%"
             title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
           >
             Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -183,6 +185,7 @@ exports[`Notification Long Title and Description w/o truncation 1`] = `
         >
           <span
             class="Text--text- Notification--descriptionFull-"
+            style="width:100%"
             title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
           >
             Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -277,6 +280,7 @@ exports[`Notification w/ Props 1`] = `
         >
           <span
             class="Text--text- Notification--descriptionEllipsised-"
+            style="width:100%"
             title="description"
           >
             description
@@ -381,6 +385,7 @@ exports[`Notification w/ custom Avatar 1`] = `
         >
           <span
             class="Text--text- Notification--descriptionEllipsised-"
+            style="width:100%"
           />
           <div
             class="Notification--metadata-"
diff --git a/packages/main/src/components/NotificationGroup/__snapshots__/NotificationGroup.test.tsx.snap b/packages/main/src/components/NotificationGroup/__snapshots__/NotificationGroup.test.tsx.snap
index d64a5322725..1d8abaa2195 100644
--- a/packages/main/src/components/NotificationGroup/__snapshots__/NotificationGroup.test.tsx.snap
+++ b/packages/main/src/components/NotificationGroup/__snapshots__/NotificationGroup.test.tsx.snap
@@ -38,6 +38,7 @@ exports[`NotificationGroup Collapsed 1`] = `
         >
           <span
             class="Text--text- Notification--descriptionEllipsised-"
+            style="width:100%"
           />
           <div
             class="Notification--metadata-"
@@ -117,6 +118,7 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
+              style="width:100%"
             />
             <div
               class="Notification--metadata-"
@@ -211,6 +213,7 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
+              style="width:100%"
               title="description"
             >
               description
@@ -312,6 +315,7 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
+              style="width:100%"
             />
             <div
               class="Notification--metadata-"
@@ -381,6 +385,7 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionFull-"
+              style="width:100%"
               title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
             >
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -477,6 +482,7 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
+              style="width:100%"
               title="description"
             >
               description
@@ -577,6 +583,7 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
+              style="width:100%"
               title="description"
             >
               description
@@ -647,6 +654,7 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
+              style="width:100%"
             />
             <div
               class="Notification--metadata-"
@@ -714,6 +722,7 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
+              style="width:100%"
             />
             <div
               class="Notification--metadata-"
@@ -788,6 +797,7 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
+              style="width:100%"
             />
             <div
               class="Notification--metadata-"
@@ -882,6 +892,7 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
+              style="width:100%"
               title="description"
             >
               description
@@ -983,6 +994,7 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
+              style="width:100%"
             />
             <div
               class="Notification--metadata-"
@@ -1052,6 +1064,7 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionFull-"
+              style="width:100%"
               title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
             >
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -1128,6 +1141,7 @@ exports[`NotificationGroup w/o children 1`] = `
         >
           <span
             class="Text--text- Notification--descriptionEllipsised-"
+            style="width:100%"
           />
           <div
             class="Notification--metadata-"
@@ -1200,6 +1214,7 @@ exports[`NotificationGroup w/o children 2`] = `
         >
           <span
             class="Text--text- Notification--descriptionEllipsised-"
+            style="width:100%"
           />
           <div
             class="Notification--metadata-"
diff --git a/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap b/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap
index 321cd620ade..f2de1ecfde1 100644
--- a/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap
+++ b/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap
@@ -91,16 +91,19 @@ exports[`ObjectPage IconTabBar Mode 1`] = `
                   </ui5-link>
                   <span
                     class="Text--text-"
+                    style="width: 100%;"
                   >
                     Address 1
                   </span>
                   <span
                     class="Text--text-"
+                    style="width: 100%;"
                   >
                     Address 2
                   </span>
                   <span
                     class="Text--text-"
+                    style="width: 100%;"
                   >
                     Address 3
                   </span>
@@ -826,16 +829,19 @@ exports[`ObjectPage Only Sections 1`] = `
                   </ui5-link>
                   <span
                     class="Text--text-"
+                    style="width: 100%;"
                   >
                     Address 1
                   </span>
                   <span
                     class="Text--text-"
+                    style="width: 100%;"
                   >
                     Address 2
                   </span>
                   <span
                     class="Text--text-"
+                    style="width: 100%;"
                   >
                     Address 3
                   </span>
@@ -1203,16 +1209,19 @@ exports[`ObjectPage With Subsections 1`] = `
                   </ui5-link>
                   <span
                     class="Text--text-"
+                    style="width: 100%;"
                   >
                     Address 1
                   </span>
                   <span
                     class="Text--text-"
+                    style="width: 100%;"
                   >
                     Address 2
                   </span>
                   <span
                     class="Text--text-"
+                    style="width: 100%;"
                   >
                     Address 3
                   </span>
diff --git a/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap b/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap
index 0efc0ee4507..d0d7ae1f0c2 100644
--- a/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap
+++ b/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap
@@ -253,6 +253,7 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         Overview
       </span>
@@ -269,6 +270,7 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         Calendar
       </span>
@@ -285,6 +287,7 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         Customers
       </span>
@@ -301,6 +304,7 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         Sales
       </span>
@@ -325,6 +329,7 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         My Opportunities
       </span>
@@ -342,6 +347,7 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         My Leads
       </span>
@@ -358,6 +364,7 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         My CPQS
       </span>
@@ -374,6 +381,7 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         Deliveries
       </span>
@@ -405,6 +413,7 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         Legal Information
       </span>
@@ -421,6 +430,7 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         Useful Links
       </span>
@@ -449,6 +459,7 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         Overview
       </span>
@@ -461,6 +472,7 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         Calendar
       </span>
@@ -473,6 +485,7 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         Customers
       </span>
@@ -485,6 +498,7 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         Sales
       </span>
@@ -506,6 +520,7 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         My Opportunities
       </span>
@@ -520,6 +535,7 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         My Leads
       </span>
@@ -533,6 +549,7 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         My CPQS
       </span>
@@ -545,6 +562,7 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         Deliveries
       </span>
@@ -572,6 +590,7 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         Legal Information
       </span>
@@ -584,6 +603,7 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
+        style="width: 100%;"
       >
         Useful Links
       </span>
diff --git a/packages/main/src/components/Text/__snapshots__/Text.test.tsx.snap b/packages/main/src/components/Text/__snapshots__/Text.test.tsx.snap
index 9d004bf2ff9..248a154027e 100644
--- a/packages/main/src/components/Text/__snapshots__/Text.test.tsx.snap
+++ b/packages/main/src/components/Text/__snapshots__/Text.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Text No Wrap 1`] = `
 <span
   class="Text--text- Text--noWrap-"
+  style="width: 100%;"
 >
   Lorem Ipsum dolor sit amed
 </span>
@@ -11,6 +12,7 @@ exports[`Text No Wrap 1`] = `
 exports[`Text Render Basic Text 1`] = `
 <span
   class="Text--text-"
+  style="width: 100%;"
 >
   FioriText
 </span>
@@ -19,6 +21,7 @@ exports[`Text Render Basic Text 1`] = `
 exports[`Text Render Whitespace 1`] = `
 <span
   class="Text--text- Text--renderWhitespace-"
+  style="width: 100%;"
 >
   Lorem Ipsum dolor sit amed
 </span>

From f9357d46a306c933d7340be4700dae9822680d66 Mon Sep 17 00:00:00 2001
From: "Harbarth, Lukas" <lukas.harbarth@sap.com>
Date: Thu, 14 Nov 2019 16:51:00 +0100
Subject: [PATCH 3/3] fix(Text): Added max-width, reverted default width to
 null

---
 .../AnalyticalCard.test.tsx.snap              |  1 -
 .../__snapshots__/MessageBox.test.tsx.snap    | 10 ----------
 .../__snapshots__/Notification.test.tsx.snap  |  5 -----
 .../NotificationGroup.test.tsx.snap           | 15 --------------
 .../__snapshots__/ObjectPage.test.tsx.snap    |  9 ---------
 .../SideNavigation.test.tsx.snap              | 20 -------------------
 packages/main/src/components/Text/Text.jss.ts |  3 ++-
 .../Text/__snapshots__/Text.test.tsx.snap     |  3 ---
 .../main/src/components/Text/demo.stories.tsx |  2 +-
 packages/main/src/components/Text/index.tsx   |  2 +-
 10 files changed, 4 insertions(+), 66 deletions(-)

diff --git a/packages/main/src/components/AnalyticalCard/__snapshots__/AnalyticalCard.test.tsx.snap b/packages/main/src/components/AnalyticalCard/__snapshots__/AnalyticalCard.test.tsx.snap
index f16aa03784d..bebd30b9a92 100644
--- a/packages/main/src/components/AnalyticalCard/__snapshots__/AnalyticalCard.test.tsx.snap
+++ b/packages/main/src/components/AnalyticalCard/__snapshots__/AnalyticalCard.test.tsx.snap
@@ -101,7 +101,6 @@ exports[`Analytical Card Render without Crashing 1`] = `
   >
     <span
       class="Text--text-"
-      style="width: 100%;"
     >
       I'm a content!
     </span>
diff --git a/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap b/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap
index 52cc9d55c86..15281cd07d7 100644
--- a/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap
+++ b/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap
@@ -49,7 +49,6 @@ exports[`MessageBox Confirm - Cancel 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
-    style="width: 100%;"
   >
     Confirm - Cancel
   </span>
@@ -106,7 +105,6 @@ exports[`MessageBox Confirm - OK 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
-    style="width: 100%;"
   >
     Confirm - OK
   </span>
@@ -154,7 +152,6 @@ exports[`MessageBox Error 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
-    style="width: 100%;"
   >
     Error
   </span>
@@ -202,7 +199,6 @@ exports[`MessageBox Information 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
-    style="width: 100%;"
   >
     Information
   </span>
@@ -259,7 +255,6 @@ exports[`MessageBox No Title 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
-    style="width: 100%;"
   >
     No Title
   </span>
@@ -307,7 +302,6 @@ exports[`MessageBox Not open 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
-    style="width: 100%;"
   >
     Custom Success
   </span>
@@ -363,7 +357,6 @@ exports[`MessageBox Show 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
-    style="width: 100%;"
   >
     Custom
   </span>
@@ -411,7 +404,6 @@ exports[`MessageBox Success 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
-    style="width: 100%;"
   >
     Success
   </span>
@@ -459,7 +451,6 @@ exports[`MessageBox Success w/ custom title 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
-    style="width: 100%;"
   >
     Custom Success
   </span>
@@ -507,7 +498,6 @@ exports[`MessageBox Warning 1`] = `
   </footer>
   <span
     class="Text--text- MessageBox--content-"
-    style="width: 100%;"
   >
     Warning
   </span>
diff --git a/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap b/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap
index 9f48f8992c3..e9c33899561 100644
--- a/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap
+++ b/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap
@@ -36,7 +36,6 @@ exports[`Notification Default 1`] = `
         >
           <span
             class="Text--text- Notification--descriptionEllipsised-"
-            style="width:100%"
           />
           <div
             class="Notification--metadata-"
@@ -109,7 +108,6 @@ exports[`Notification Long Title and Description 1`] = `
         >
           <span
             class="Text--text- Notification--descriptionEllipsised-"
-            style="width:100%"
             title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
           >
             Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -185,7 +183,6 @@ exports[`Notification Long Title and Description w/o truncation 1`] = `
         >
           <span
             class="Text--text- Notification--descriptionFull-"
-            style="width:100%"
             title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
           >
             Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -280,7 +277,6 @@ exports[`Notification w/ Props 1`] = `
         >
           <span
             class="Text--text- Notification--descriptionEllipsised-"
-            style="width:100%"
             title="description"
           >
             description
@@ -385,7 +381,6 @@ exports[`Notification w/ custom Avatar 1`] = `
         >
           <span
             class="Text--text- Notification--descriptionEllipsised-"
-            style="width:100%"
           />
           <div
             class="Notification--metadata-"
diff --git a/packages/main/src/components/NotificationGroup/__snapshots__/NotificationGroup.test.tsx.snap b/packages/main/src/components/NotificationGroup/__snapshots__/NotificationGroup.test.tsx.snap
index 1d8abaa2195..d64a5322725 100644
--- a/packages/main/src/components/NotificationGroup/__snapshots__/NotificationGroup.test.tsx.snap
+++ b/packages/main/src/components/NotificationGroup/__snapshots__/NotificationGroup.test.tsx.snap
@@ -38,7 +38,6 @@ exports[`NotificationGroup Collapsed 1`] = `
         >
           <span
             class="Text--text- Notification--descriptionEllipsised-"
-            style="width:100%"
           />
           <div
             class="Notification--metadata-"
@@ -118,7 +117,6 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
-              style="width:100%"
             />
             <div
               class="Notification--metadata-"
@@ -213,7 +211,6 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
-              style="width:100%"
               title="description"
             >
               description
@@ -315,7 +312,6 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
-              style="width:100%"
             />
             <div
               class="Notification--metadata-"
@@ -385,7 +381,6 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionFull-"
-              style="width:100%"
               title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
             >
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -482,7 +477,6 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
-              style="width:100%"
               title="description"
             >
               description
@@ -583,7 +577,6 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
-              style="width:100%"
               title="description"
             >
               description
@@ -654,7 +647,6 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
-              style="width:100%"
             />
             <div
               class="Notification--metadata-"
@@ -722,7 +714,6 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
-              style="width:100%"
             />
             <div
               class="Notification--metadata-"
@@ -797,7 +788,6 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
-              style="width:100%"
             />
             <div
               class="Notification--metadata-"
@@ -892,7 +882,6 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
-              style="width:100%"
               title="description"
             >
               description
@@ -994,7 +983,6 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionEllipsised-"
-              style="width:100%"
             />
             <div
               class="Notification--metadata-"
@@ -1064,7 +1052,6 @@ Array [
           >
             <span
               class="Text--text- Notification--descriptionFull-"
-              style="width:100%"
               title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
             >
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -1141,7 +1128,6 @@ exports[`NotificationGroup w/o children 1`] = `
         >
           <span
             class="Text--text- Notification--descriptionEllipsised-"
-            style="width:100%"
           />
           <div
             class="Notification--metadata-"
@@ -1214,7 +1200,6 @@ exports[`NotificationGroup w/o children 2`] = `
         >
           <span
             class="Text--text- Notification--descriptionEllipsised-"
-            style="width:100%"
           />
           <div
             class="Notification--metadata-"
diff --git a/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap b/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap
index f2de1ecfde1..321cd620ade 100644
--- a/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap
+++ b/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap
@@ -91,19 +91,16 @@ exports[`ObjectPage IconTabBar Mode 1`] = `
                   </ui5-link>
                   <span
                     class="Text--text-"
-                    style="width: 100%;"
                   >
                     Address 1
                   </span>
                   <span
                     class="Text--text-"
-                    style="width: 100%;"
                   >
                     Address 2
                   </span>
                   <span
                     class="Text--text-"
-                    style="width: 100%;"
                   >
                     Address 3
                   </span>
@@ -829,19 +826,16 @@ exports[`ObjectPage Only Sections 1`] = `
                   </ui5-link>
                   <span
                     class="Text--text-"
-                    style="width: 100%;"
                   >
                     Address 1
                   </span>
                   <span
                     class="Text--text-"
-                    style="width: 100%;"
                   >
                     Address 2
                   </span>
                   <span
                     class="Text--text-"
-                    style="width: 100%;"
                   >
                     Address 3
                   </span>
@@ -1209,19 +1203,16 @@ exports[`ObjectPage With Subsections 1`] = `
                   </ui5-link>
                   <span
                     class="Text--text-"
-                    style="width: 100%;"
                   >
                     Address 1
                   </span>
                   <span
                     class="Text--text-"
-                    style="width: 100%;"
                   >
                     Address 2
                   </span>
                   <span
                     class="Text--text-"
-                    style="width: 100%;"
                   >
                     Address 3
                   </span>
diff --git a/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap b/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap
index d0d7ae1f0c2..0efc0ee4507 100644
--- a/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap
+++ b/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap
@@ -253,7 +253,6 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         Overview
       </span>
@@ -270,7 +269,6 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         Calendar
       </span>
@@ -287,7 +285,6 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         Customers
       </span>
@@ -304,7 +301,6 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         Sales
       </span>
@@ -329,7 +325,6 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         My Opportunities
       </span>
@@ -347,7 +342,6 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         My Leads
       </span>
@@ -364,7 +358,6 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         My CPQS
       </span>
@@ -381,7 +374,6 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         Deliveries
       </span>
@@ -413,7 +405,6 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         Legal Information
       </span>
@@ -430,7 +421,6 @@ exports[`SideNavigation Expanded 1`] = `
       />
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         Useful Links
       </span>
@@ -459,7 +449,6 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         Overview
       </span>
@@ -472,7 +461,6 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         Calendar
       </span>
@@ -485,7 +473,6 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         Customers
       </span>
@@ -498,7 +485,6 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         Sales
       </span>
@@ -520,7 +506,6 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         My Opportunities
       </span>
@@ -535,7 +520,6 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         My Leads
       </span>
@@ -549,7 +533,6 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         My CPQS
       </span>
@@ -562,7 +545,6 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         Deliveries
       </span>
@@ -590,7 +572,6 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         Legal Information
       </span>
@@ -603,7 +584,6 @@ exports[`SideNavigation Expanded without Icons 1`] = `
     >
       <span
         class="Text--text- SideNavigationListItem--text-"
-        style="width: 100%;"
       >
         Useful Links
       </span>
diff --git a/packages/main/src/components/Text/Text.jss.ts b/packages/main/src/components/Text/Text.jss.ts
index 179153e3dfe..36fbc42f71c 100644
--- a/packages/main/src/components/Text/Text.jss.ts
+++ b/packages/main/src/components/Text/Text.jss.ts
@@ -10,7 +10,8 @@ export const TextStyles = ({ parameters }: JSSTheme) => ({
     display: 'inline-block',
     boxSizing: 'border-box',
     whiteSpace: 'pre-line',
-    wordWrap: 'break-word'
+    wordWrap: 'break-word',
+    maxWidth: '100%'
   },
   renderWhitespace: {
     whiteSpace: 'pre-wrap'
diff --git a/packages/main/src/components/Text/__snapshots__/Text.test.tsx.snap b/packages/main/src/components/Text/__snapshots__/Text.test.tsx.snap
index 248a154027e..9d004bf2ff9 100644
--- a/packages/main/src/components/Text/__snapshots__/Text.test.tsx.snap
+++ b/packages/main/src/components/Text/__snapshots__/Text.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`Text No Wrap 1`] = `
 <span
   class="Text--text- Text--noWrap-"
-  style="width: 100%;"
 >
   Lorem Ipsum dolor sit amed
 </span>
@@ -12,7 +11,6 @@ exports[`Text No Wrap 1`] = `
 exports[`Text Render Basic Text 1`] = `
 <span
   class="Text--text-"
-  style="width: 100%;"
 >
   FioriText
 </span>
@@ -21,7 +19,6 @@ exports[`Text Render Basic Text 1`] = `
 exports[`Text Render Whitespace 1`] = `
 <span
   class="Text--text- Text--renderWhitespace-"
-  style="width: 100%;"
 >
   Lorem Ipsum dolor sit amed
 </span>
diff --git a/packages/main/src/components/Text/demo.stories.tsx b/packages/main/src/components/Text/demo.stories.tsx
index 44b21ae2d0b..b33766d11ff 100644
--- a/packages/main/src/components/Text/demo.stories.tsx
+++ b/packages/main/src/components/Text/demo.stories.tsx
@@ -8,7 +8,7 @@ export const renderStory = () => {
     <Text
       wrapping={boolean('wrapping', true)}
       renderWhitespace={boolean('renderWhitespace', false)}
-      width={text('width', '100%')}
+      width={text('width', '')}
     >
       Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
       magna aliquyam erat, sed diam voluptua.
diff --git a/packages/main/src/components/Text/index.tsx b/packages/main/src/components/Text/index.tsx
index 51ccaa69d58..913eb066dbf 100644
--- a/packages/main/src/components/Text/index.tsx
+++ b/packages/main/src/components/Text/index.tsx
@@ -52,7 +52,7 @@ const Text: FC<TextProps> = forwardRef((props: TextProps, ref: Ref<HTMLSpanEleme
 Text.defaultProps = {
   renderWhitespace: false,
   wrapping: true,
-  width: '100%'
+  width: null
 };
 
 Text.displayName = 'Text';