From a05e1721620d2af325ae9b696d397048af4f87ec Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 21 Jun 2021 14:14:56 -0700
Subject: [PATCH 1/7] making TableView cell content fill 100% width

---
 .../components/table/index.css                |  4 ++
 .../table/stories/Table.stories.tsx           | 69 +++++++++++++++++++
 2 files changed, 73 insertions(+)

diff --git a/packages/@adobe/spectrum-css-temp/components/table/index.css b/packages/@adobe/spectrum-css-temp/components/table/index.css
index 7383757f46a..c150641227c 100644
--- a/packages/@adobe/spectrum-css-temp/components/table/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/table/index.css
@@ -150,6 +150,10 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Table-cellContents {
+  display: flex;
+  justify-content: inherit;
+  flex: 1 1 0%;
+
   /* truncate text with ellipsis */
   overflow: hidden;
   white-space: nowrap;
diff --git a/packages/@react-spectrum/table/stories/Table.stories.tsx b/packages/@react-spectrum/table/stories/Table.stories.tsx
index 6cf76b482b3..402f2644c39 100644
--- a/packages/@react-spectrum/table/stories/Table.stories.tsx
+++ b/packages/@react-spectrum/table/stories/Table.stories.tsx
@@ -376,6 +376,75 @@ storiesOf('TableView', module)
     ),
     {chromatic: {disable: true}}
   )
+  .add(
+    'should fill cell width',
+    () => (
+      <TableView aria-label="TableView with filled cells" selectionMode="multiple" width={500} height={200} onSelectionChange={s => onSelectionChange([...s])}>
+        <TableHeader>
+          <Column>File Name</Column>
+          <Column align="center">Type</Column>
+          <Column align="end">Size</Column>
+        </TableHeader>
+        <TableBody>
+          <Row>
+            <Cell>2018 Proposal</Cell>
+            <Cell>PDF</Cell>
+            <Cell>214 KB</Cell>
+          </Row>
+          <Row>
+            <Cell>
+              <View
+                width="100%"
+                backgroundColor="gray-200">
+                Budget
+              </View>
+            </Cell>
+            <Cell>
+              <View
+                width="100%"
+                backgroundColor="gray-200"
+                UNSAFE_style={{textAlign: 'center'}}>
+                XLS
+              </View>
+            </Cell>
+            <Cell>
+              <View
+                width="100%"
+                backgroundColor="gray-200"
+                UNSAFE_style={{textAlign: 'end'}}>
+                120 KB
+              </View>
+            </Cell>
+          </Row>
+          <Row>
+            <Cell>
+              <View
+                width="70%"
+                backgroundColor="gray-200">
+                70% width
+              </View>
+            </Cell>
+            <Cell>
+              <View
+                width="70%"
+                backgroundColor="gray-200"
+                UNSAFE_style={{textAlign: 'center'}}>
+                70% width
+              </View>
+            </Cell>
+            <Cell>
+              <View
+                width="70%"
+                backgroundColor="gray-200"
+                UNSAFE_style={{textAlign: 'end'}}>
+                70% width
+              </View>
+            </Cell>
+          </Row>
+        </TableBody>
+      </TableView>
+    )
+  )
   .add(
     'column widths and dividers',
     () => (

From e4ab678942d91d862274201df20b11a72aed78b8 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 22 Jun 2021 10:23:39 -0700
Subject: [PATCH 2/7] updating approach to fix text truncation

---
 .../components/table/index.css                 | 10 ++++++++--
 .../@react-spectrum/table/src/TableView.tsx    |  1 +
 packages/@react-spectrum/table/src/table.css   |  9 +++++++++
 .../table/stories/Table.stories.tsx            | 18 ++++++++++++++++++
 4 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/table/index.css b/packages/@adobe/spectrum-css-temp/components/table/index.css
index c150641227c..e4bf964ae4b 100644
--- a/packages/@adobe/spectrum-css-temp/components/table/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/table/index.css
@@ -150,8 +150,6 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Table-cellContents {
-  display: flex;
-  justify-content: inherit;
   flex: 1 1 0%;
 
   /* truncate text with ellipsis */
@@ -162,6 +160,14 @@ governing permissions and limitations under the License.
   /* allow focus ring of child to extend outside the bounds */
   padding: 4px;
   margin: -4px;
+
+  /*
+   * This is so user provided content follows the column alignment setting.
+   * Has a specificity of 0 1 0, which is the same as a single class.
+   */
+  > * {
+    display: inline;
+  }
 }
 
 .spectrum-Table-cell--hideHeader {
diff --git a/packages/@react-spectrum/table/src/TableView.tsx b/packages/@react-spectrum/table/src/TableView.tsx
index 791a6b88941..14c4cac8d18 100644
--- a/packages/@react-spectrum/table/src/TableView.tsx
+++ b/packages/@react-spectrum/table/src/TableView.tsx
@@ -612,6 +612,7 @@ function TableCell({cell}) {
               stylesOverrides,
               'react-spectrum-Table-cell',
               {
+                'react-spectrum-Table-cell--alignStart': columnProps.align === 'start',
                 'react-spectrum-Table-cell--alignCenter': columnProps.align === 'center',
                 'react-spectrum-Table-cell--alignEnd': columnProps.align === 'end'
               }
diff --git a/packages/@react-spectrum/table/src/table.css b/packages/@react-spectrum/table/src/table.css
index b43c3fb86d8..ca19e83b463 100644
--- a/packages/@react-spectrum/table/src/table.css
+++ b/packages/@react-spectrum/table/src/table.css
@@ -19,17 +19,26 @@
 .react-spectrum-Table-cell {
   display: flex;
   align-items: center;
+  /* To ensure the flex child only takes up available width, see https://makandracards.com/makandra/66994-css-flex-and-min-width */
+  min-width: 0px;
 }
 
 .react-spectrum-Table-cellWrapper > .react-spectrum-Table-cell {
   height: 100%;
 }
 
+.react-spectrum-Table-cell--alignStart {
+  text-align: start;
+  justify-content: start;
+}
+
 .react-spectrum-Table-cell--alignCenter {
+  text-align: center;
   justify-content: center;
 }
 
 .react-spectrum-Table-cell--alignEnd {
+  text-align: end;
   justify-content: flex-end;
 }
 
diff --git a/packages/@react-spectrum/table/stories/Table.stories.tsx b/packages/@react-spectrum/table/stories/Table.stories.tsx
index 402f2644c39..65b549509da 100644
--- a/packages/@react-spectrum/table/stories/Table.stories.tsx
+++ b/packages/@react-spectrum/table/stories/Table.stories.tsx
@@ -384,12 +384,14 @@ storiesOf('TableView', module)
           <Column>File Name</Column>
           <Column align="center">Type</Column>
           <Column align="end">Size</Column>
+          <Column>Description</Column>
         </TableHeader>
         <TableBody>
           <Row>
             <Cell>2018 Proposal</Cell>
             <Cell>PDF</Cell>
             <Cell>214 KB</Cell>
+            <Cell>very very very very very very long long long long long description</Cell>
           </Row>
           <Row>
             <Cell>
@@ -415,6 +417,14 @@ storiesOf('TableView', module)
                 120 KB
               </View>
             </Cell>
+            <Cell>
+              <View
+                width="100%"
+                backgroundColor="gray-200"
+                UNSAFE_style={{textAlign: 'end'}}>
+                very very very very very very long long long long long description
+              </View>
+            </Cell>
           </Row>
           <Row>
             <Cell>
@@ -440,6 +450,14 @@ storiesOf('TableView', module)
                 70% width
               </View>
             </Cell>
+            <Cell>
+              <View
+                width="70%"
+                backgroundColor="gray-200"
+                UNSAFE_style={{textAlign: 'end'}}>
+                very very very very very very long long long long long description
+              </View>
+            </Cell>
           </Row>
         </TableBody>
       </TableView>

From bd5b51d1eaf5bfcf7f72df31be577bc547e0a862 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 22 Jun 2021 15:13:21 -0700
Subject: [PATCH 3/7] fixing where min-width is applied for table cell contents

---
 packages/@adobe/spectrum-css-temp/components/table/index.css | 2 ++
 packages/@react-spectrum/table/src/table.css                 | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/table/index.css b/packages/@adobe/spectrum-css-temp/components/table/index.css
index e4bf964ae4b..1a9dc7c6941 100644
--- a/packages/@adobe/spectrum-css-temp/components/table/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/table/index.css
@@ -151,6 +151,8 @@ governing permissions and limitations under the License.
 
 .spectrum-Table-cellContents {
   flex: 1 1 0%;
+  /* To ensure the flex child only takes up available width, see https://makandracards.com/makandra/66994-css-flex-and-min-width */
+  min-width: 0px;
 
   /* truncate text with ellipsis */
   overflow: hidden;
diff --git a/packages/@react-spectrum/table/src/table.css b/packages/@react-spectrum/table/src/table.css
index ca19e83b463..acb4ed9617c 100644
--- a/packages/@react-spectrum/table/src/table.css
+++ b/packages/@react-spectrum/table/src/table.css
@@ -19,8 +19,6 @@
 .react-spectrum-Table-cell {
   display: flex;
   align-items: center;
-  /* To ensure the flex child only takes up available width, see https://makandracards.com/makandra/66994-css-flex-and-min-width */
-  min-width: 0px;
 }
 
 .react-spectrum-Table-cellWrapper > .react-spectrum-Table-cell {

From 8089ddea7287efd665309995fd81fc5ff1a4dd5c Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 29 Jun 2021 13:31:33 -0700
Subject: [PATCH 4/7] changing table child styles so user has to provide
 alignment and text truncation if providing block children

---
 .../components/table/index.css                |  8 ---
 .../table/stories/Table.stories.tsx           | 70 ++++++++++++++-----
 2 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/table/index.css b/packages/@adobe/spectrum-css-temp/components/table/index.css
index 1a9dc7c6941..0d27c5b0b66 100644
--- a/packages/@adobe/spectrum-css-temp/components/table/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/table/index.css
@@ -162,14 +162,6 @@ governing permissions and limitations under the License.
   /* allow focus ring of child to extend outside the bounds */
   padding: 4px;
   margin: -4px;
-
-  /*
-   * This is so user provided content follows the column alignment setting.
-   * Has a specificity of 0 1 0, which is the same as a single class.
-   */
-  > * {
-    display: inline;
-  }
 }
 
 .spectrum-Table-cell--hideHeader {
diff --git a/packages/@react-spectrum/table/stories/Table.stories.tsx b/packages/@react-spectrum/table/stories/Table.stories.tsx
index 65b549509da..8c25c447e42 100644
--- a/packages/@react-spectrum/table/stories/Table.stories.tsx
+++ b/packages/@react-spectrum/table/stories/Table.stories.tsx
@@ -398,30 +398,30 @@ storiesOf('TableView', module)
               <View
                 width="100%"
                 backgroundColor="gray-200">
-                Budget
+                100%
               </View>
             </Cell>
             <Cell>
               <View
+                UNSAFE_style={{margin: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
                 width="100%"
-                backgroundColor="gray-200"
-                UNSAFE_style={{textAlign: 'center'}}>
-                XLS
+                backgroundColor="gray-200">
+                100%
               </View>
             </Cell>
             <Cell>
               <View
+                UNSAFE_style={{float: 'right', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
                 width="100%"
-                backgroundColor="gray-200"
-                UNSAFE_style={{textAlign: 'end'}}>
-                120 KB
+                backgroundColor="gray-200">
+                100%
               </View>
             </Cell>
             <Cell>
               <View
+                UNSAFE_style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
                 width="100%"
-                backgroundColor="gray-200"
-                UNSAFE_style={{textAlign: 'end'}}>
+                backgroundColor="gray-200">
                 very very very very very very long long long long long description
               </View>
             </Cell>
@@ -429,36 +429,68 @@ storiesOf('TableView', module)
           <Row>
             <Cell>
               <View
-                width="70%"
+                UNSAFE_style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
+                width="50%"
                 backgroundColor="gray-200">
-                70% width
+                50% div
               </View>
             </Cell>
             <Cell>
               <View
+                UNSAFE_style={{margin: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
                 width="70%"
-                backgroundColor="gray-200"
-                UNSAFE_style={{textAlign: 'center'}}>
-                70% width
+                backgroundColor="gray-200">
+                70% div
               </View>
             </Cell>
             <Cell>
               <View
+                UNSAFE_style={{float: 'right', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
                 width="70%"
-                backgroundColor="gray-200"
-                UNSAFE_style={{textAlign: 'end'}}>
-                70% width
+                backgroundColor="gray-200">
+                70% div
               </View>
             </Cell>
             <Cell>
               <View
+                UNSAFE_style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
                 width="70%"
-                backgroundColor="gray-200"
-                UNSAFE_style={{textAlign: 'end'}}>
+                backgroundColor="gray-200">
                 very very very very very very long long long long long description
               </View>
             </Cell>
           </Row>
+          <Row>
+            <Cell>
+              <span
+                // style={{width: '70%', backgroundColor:"lightblue", textAlign:'center'}}
+                style={{backgroundColor:"lightblue"}}
+                >
+                span child
+              </span>
+            </Cell>
+            <Cell>
+              <span
+                // style={{width: '70%', backgroundColor:"lightblue", textAlign:'center'}}
+                style={{backgroundColor:"lightblue"}}
+                >
+                span child</span>
+            </Cell>
+            <Cell>
+              <span
+                // style={{width: '70%', backgroundColor:"lightblue", textAlign:'end'}}
+                style={{backgroundColor:"lightblue"}}
+                >span child
+              </span>
+            </Cell>
+            <Cell>
+              <span
+                // style={{width: '70%', backgroundColor:"lightblue", textAlign:'center'}}
+                style={{width: '70%', backgroundColor:"lightblue"}}
+                >very very very very very very long long long long long description
+              </span>
+            </Cell>
+          </Row>
         </TableBody>
       </TableView>
     )

From 162a4dfd609bd97c7bc8a33d90c16aa12ca80fac Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 29 Jun 2021 13:43:35 -0700
Subject: [PATCH 5/7] fixing lint

---
 .../table/stories/Table.stories.tsx           | 22 +++++--------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/packages/@react-spectrum/table/stories/Table.stories.tsx b/packages/@react-spectrum/table/stories/Table.stories.tsx
index 8c25c447e42..f6463689284 100644
--- a/packages/@react-spectrum/table/stories/Table.stories.tsx
+++ b/packages/@react-spectrum/table/stories/Table.stories.tsx
@@ -462,32 +462,22 @@ storiesOf('TableView', module)
           </Row>
           <Row>
             <Cell>
-              <span
-                // style={{width: '70%', backgroundColor:"lightblue", textAlign:'center'}}
-                style={{backgroundColor:"lightblue"}}
-                >
+              <span style={{backgroundColor: 'lightblue'}}>
                 span child
               </span>
             </Cell>
             <Cell>
-              <span
-                // style={{width: '70%', backgroundColor:"lightblue", textAlign:'center'}}
-                style={{backgroundColor:"lightblue"}}
-                >
+              <span style={{backgroundColor: 'lightblue'}}>
                 span child</span>
             </Cell>
             <Cell>
-              <span
-                // style={{width: '70%', backgroundColor:"lightblue", textAlign:'end'}}
-                style={{backgroundColor:"lightblue"}}
-                >span child
+              <span style={{backgroundColor: 'lightblue'}}>
+                span child
               </span>
             </Cell>
             <Cell>
-              <span
-                // style={{width: '70%', backgroundColor:"lightblue", textAlign:'center'}}
-                style={{width: '70%', backgroundColor:"lightblue"}}
-                >very very very very very very long long long long long description
+              <span style={{width: '70%', backgroundColor: 'lightblue'}}>
+                very very very very very very long long long long long description
               </span>
             </Cell>
           </Row>

From 61b108ace5ccd6f8766f756c1579e43532e345d9 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 19 Jul 2021 11:34:03 -0700
Subject: [PATCH 6/7] cleaning up story

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

diff --git a/packages/@react-spectrum/table/stories/Table.stories.tsx b/packages/@react-spectrum/table/stories/Table.stories.tsx
index f6463689284..b5bc0358067 100644
--- a/packages/@react-spectrum/table/stories/Table.stories.tsx
+++ b/packages/@react-spectrum/table/stories/Table.stories.tsx
@@ -476,7 +476,7 @@ storiesOf('TableView', module)
               </span>
             </Cell>
             <Cell>
-              <span style={{width: '70%', backgroundColor: 'lightblue'}}>
+              <span style={{backgroundColor: 'lightblue'}}>
                 very very very very very very long long long long long description
               </span>
             </Cell>

From 94a935586bb0bbb354c7f8c2a1de9e06d5872171 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 26 Jul 2021 17:26:07 -0700
Subject: [PATCH 7/7] addressing review comments

---
 .../@react-spectrum/table/stories/Table.stories.tsx    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/@react-spectrum/table/stories/Table.stories.tsx b/packages/@react-spectrum/table/stories/Table.stories.tsx
index b5bc0358067..3fd58ae9fb1 100644
--- a/packages/@react-spectrum/table/stories/Table.stories.tsx
+++ b/packages/@react-spectrum/table/stories/Table.stories.tsx
@@ -411,7 +411,7 @@ storiesOf('TableView', module)
             </Cell>
             <Cell>
               <View
-                UNSAFE_style={{float: 'right', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
+                UNSAFE_style={{marginInlineStart: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
                 width="100%"
                 backgroundColor="gray-200">
                 100%
@@ -462,21 +462,21 @@ storiesOf('TableView', module)
           </Row>
           <Row>
             <Cell>
-              <span style={{backgroundColor: 'lightblue'}}>
+              <span style={{backgroundColor: 'var(--spectrum-global-color-gray-200'}}>
                 span child
               </span>
             </Cell>
             <Cell>
-              <span style={{backgroundColor: 'lightblue'}}>
+              <span style={{backgroundColor: 'var(--spectrum-global-color-gray-200'}}>
                 span child</span>
             </Cell>
             <Cell>
-              <span style={{backgroundColor: 'lightblue'}}>
+              <span style={{backgroundColor: 'var(--spectrum-global-color-gray-200'}}>
                 span child
               </span>
             </Cell>
             <Cell>
-              <span style={{backgroundColor: 'lightblue'}}>
+              <span style={{backgroundColor: 'var(--spectrum-global-color-gray-200'}}>
                 very very very very very very long long long long long description
               </span>
             </Cell>