From e0bbfa85c1e59a63dce2f0e89924bba6ce7ce6f4 Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Wed, 11 Jan 2023 14:33:31 -0800
Subject: [PATCH 1/2] Column header menu alignment

---
 .../components/table/index.css                |  35 ++++--
 .../@react-spectrum/table/src/TableView.tsx   |  46 ++++++--
 .../table/stories/Table.stories.tsx           | 109 ++++++++++++++++++
 3 files changed, 171 insertions(+), 19 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/table/index.css b/packages/@adobe/spectrum-css-temp/components/table/index.css
index fbcae25d601..d5b420bba33 100644
--- a/packages/@adobe/spectrum-css-temp/components/table/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/table/index.css
@@ -18,6 +18,7 @@ governing permissions and limitations under the License.
   --spectrum-table-cell-spacious-padding-y: var(--spectrum-global-dimension-size-175);
   --spectrum-table-row-border-radius: calc(var(--spectrum-table-border-radius) - 1px);
   --spectrum-table-row-sticky-focus-indicator-width: 3px;
+  --spectrum-table-column-resizer-placeholder-width: 10px;
 }
 
 .spectrum-Table {
@@ -42,7 +43,6 @@ svg.spectrum-Table-sortedIcon {
 }
 
 .spectrum-Table-menuChevron.spectrum-Table-menuChevron {
-  display: none;
   flex: 0 0 auto;
   margin-inline-start: var(--spectrum-table-header-sort-icon-gap);
   min-inline-size: var(--spectrum-icon-chevron-down-medium-width);
@@ -106,10 +106,6 @@ svg.spectrum-Table-sortedIcon {
     }
     .spectrum-Table-headCellButton {
       box-sizing: border-box;
-      padding-block-start: var(--spectrum-table-header-padding-y);
-      padding-inline-end: 0;
-      padding-block-end: var(--spectrum-table-header-padding-y);
-      padding-inline-start: var(--spectrum-table-header-padding-x);
 
       /* truncate text with ellipsis */
       overflow: hidden;
@@ -117,12 +113,6 @@ svg.spectrum-Table-sortedIcon {
       text-overflow: ellipsis;
     }
   }
-  .is-hovered,
-  &.focus-ring {
-    .spectrum-Table-menuChevron {
-      display: inline-block;
-    }
-  }
 }
 
 .spectrum-Table-columnResizer {
@@ -151,7 +141,7 @@ svg.spectrum-Table-sortedIcon {
 .spectrum-Table-columnResizerPlaceholder {
   flex: 0 0 auto;
   box-sizing: border-box;
-  inline-size: 10px;
+  inline-size: var(--spectrum-table-column-resizer-placeholder-width);
   block-size: 100%;
   user-select: none;
 }
@@ -305,6 +295,27 @@ svg.spectrum-Table-sortedIcon {
   display: flex;
   align-items: center;
 }
+.spectrum-Table-headCellButton--alignStart {
+  justify-content: flex-start;
+  padding-block-start: var(--spectrum-table-header-padding-y);
+  padding-inline-end: 0;
+  padding-block-end: var(--spectrum-table-header-padding-y);
+  padding-inline-start: var(--spectrum-table-header-padding-x);
+}
+.spectrum-Table-headCellButton--alignCenter {
+  justify-content: center;
+  padding-block-start: var(--spectrum-table-header-padding-y);
+  padding-inline-end: calc(var(--spectrum-table-header-padding-x) - var(--spectrum-table-column-resizer-placeholder-width));
+  padding-block-end: var(--spectrum-table-header-padding-y);
+  padding-inline-start: var(--spectrum-table-header-padding-x);
+}
+.spectrum-Table-headCellButton--alignEnd {
+  justify-content: flex-end;
+  padding-block-start: var(--spectrum-table-header-padding-y);
+  padding-inline-end: calc(var(--spectrum-table-header-padding-x) - var(--spectrum-table-column-resizer-placeholder-width));
+  padding-block-end: var(--spectrum-table-header-padding-y);
+  padding-inline-start: 0;
+}
 
 .spectrum-Table-headerCellText {
   flex: 0 1 auto;
diff --git a/packages/@react-spectrum/table/src/TableView.tsx b/packages/@react-spectrum/table/src/TableView.tsx
index 89860fba723..b55f0ba9560 100644
--- a/packages/@react-spectrum/table/src/TableView.tsx
+++ b/packages/@react-spectrum/table/src/TableView.tsx
@@ -632,14 +632,40 @@ function TableColumnHeader(props) {
 }
 
 let _TableColumnHeaderButton = (props, ref: FocusableRef<HTMLDivElement>) => {
-  let {focusProps, ...otherProps} = props;
+  let {focusProps, alignment, ...otherProps} = props;
   let {isEmpty} = useTableContext();
   let domRef = useFocusableRef(ref);
   let {buttonProps} = useButton({...otherProps, elementType: 'div', isDisabled: isEmpty}, domRef);
   let {hoverProps, isHovered} = useHover({...otherProps, isDisabled: isEmpty});
+
   return (
-    <div className={classNames(styles, 'spectrum-Table-headCellContents', {'is-hovered': isHovered})} {...hoverProps}>
-      <div className={classNames(styles, 'spectrum-Table-headCellButton')} {...mergeProps(buttonProps, focusProps)} ref={domRef}>{props.children}</div>
+    <div
+      className={
+        classNames(
+          styles,
+          'spectrum-Table-headCellContents',
+          {
+            'is-hovered': isHovered
+          }
+        )
+      }
+      {...hoverProps}>
+      <div
+        className={
+          classNames(
+            styles,
+            'spectrum-Table-headCellButton',
+            {
+              'spectrum-Table-headCellButton--alignStart': alignment === 'start',
+              'spectrum-Table-headCellButton--alignCenter': alignment === 'center',
+              'spectrum-Table-headCellButton--alignEnd': alignment === 'end'
+            }
+          )
+        }
+        {...mergeProps(buttonProps, focusProps)}
+        ref={domRef}>
+        {props.children}
+      </div>
     </div>
   );
 };
@@ -746,6 +772,12 @@ function ResizableTableColumnHeader(props) {
   }, []);
 
   let showResizer = !isEmpty && ((headerRowHovered && getInteractionModality() !== 'keyboard') || resizingColumn != null);
+  let alignment = 'start';
+  if (columnProps.align === 'center' || column.colspan > 1) {
+    alignment = 'center';
+  } else if (columnProps.align === 'end') {
+    alignment = 'end';
+  }
 
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
@@ -770,14 +802,14 @@ function ResizableTableColumnHeader(props) {
               stylesOverrides,
               'react-spectrum-Table-cell',
               {
-                'react-spectrum-Table-cell--alignCenter': columnProps.align === 'center' || column.colspan > 1,
-                'react-spectrum-Table-cell--alignEnd': columnProps.align === 'end'
+                'react-spectrum-Table-cell--alignCenter': alignment === 'center',
+                'react-spectrum-Table-cell--alignEnd': alignment === 'end'
               }
             )
           )
         }>
         <MenuTrigger onOpenChange={setHeaderMenuOpen}>
-          <TableColumnHeaderButton ref={triggerRef} focusProps={focusProps}>
+          <TableColumnHeaderButton alignment={alignment} ref={triggerRef} focusProps={focusProps}>
             {columnProps.allowsSorting &&
               <ArrowDownSmall UNSAFE_className={classNames(styles, 'spectrum-Table-sortedIcon')} />
             }
@@ -786,7 +818,7 @@ function ResizableTableColumnHeader(props) {
               <div className={classNames(styles, 'spectrum-Table-headerCellText')}>{column.rendered}</div>
             }
             {
-              columnProps.allowsResizing && resizingColumn == null && <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Table-menuChevron')} />
+              columnProps.allowsResizing && <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Table-menuChevron')} />
             }
           </TableColumnHeaderButton>
           <Menu onAction={onMenuSelect} minWidth="size-2000" items={items}>
diff --git a/packages/@react-spectrum/table/stories/Table.stories.tsx b/packages/@react-spectrum/table/stories/Table.stories.tsx
index 76c33b8cf32..6a3fff6204a 100644
--- a/packages/@react-spectrum/table/stories/Table.stories.tsx
+++ b/packages/@react-spectrum/table/stories/Table.stories.tsx
@@ -673,6 +673,115 @@ storiesOf('TableView', module)
       </TableView>
     )
   )
+  .add(
+    'should fill cell width allowsResizing',
+    () => (
+      <TableView aria-label="TableView with filled cells" selectionMode="multiple" width={500} height={200} onSelectionChange={s => onSelectionChange([...s])}>
+        <TableHeader>
+          <Column allowsResizing>File Name</Column>
+          <Column align="center" allowsResizing>Type</Column>
+          <Column align="end" allowsResizing>Size</Column>
+          <Column allowsResizing>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>
+              <View
+                width="100%"
+                backgroundColor="gray-200">
+                100%
+              </View>
+            </Cell>
+            <Cell>
+              <View
+                UNSAFE_style={{margin: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
+                width="100%"
+                backgroundColor="gray-200">
+                100%
+              </View>
+            </Cell>
+            <Cell>
+              <View
+                UNSAFE_style={{marginInlineStart: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
+                width="100%"
+                backgroundColor="gray-200">
+                100%
+              </View>
+            </Cell>
+            <Cell>
+              <View
+                UNSAFE_style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
+                width="100%"
+                backgroundColor="gray-200">
+                very very very very very very long long long long long description
+              </View>
+            </Cell>
+          </Row>
+          <Row>
+            <Cell>
+              <View
+                UNSAFE_style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
+                width="50%"
+                backgroundColor="gray-200">
+                50% div
+              </View>
+            </Cell>
+            <Cell>
+              <View
+                UNSAFE_style={{margin: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
+                width="70%"
+                backgroundColor="gray-200">
+                70% div
+              </View>
+            </Cell>
+            <Cell>
+              <View
+                UNSAFE_style={{float: 'right', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
+                width="70%"
+                backgroundColor="gray-200">
+                70% div
+              </View>
+            </Cell>
+            <Cell>
+              <View
+                UNSAFE_style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
+                width="70%"
+                backgroundColor="gray-200">
+                very very very very very very long long long long long description
+              </View>
+            </Cell>
+          </Row>
+          <Row>
+            <Cell>
+              <span style={{backgroundColor: 'var(--spectrum-global-color-gray-200'}}>
+                span child
+              </span>
+            </Cell>
+            <Cell>
+              <span style={{backgroundColor: 'var(--spectrum-global-color-gray-200'}}>
+                span child</span>
+            </Cell>
+            <Cell>
+              <span style={{backgroundColor: 'var(--spectrum-global-color-gray-200'}}>
+                span child
+              </span>
+            </Cell>
+            <Cell>
+              <span style={{backgroundColor: 'var(--spectrum-global-color-gray-200'}}>
+                very very very very very very long long long long long description
+              </span>
+            </Cell>
+          </Row>
+        </TableBody>
+      </TableView>
+    )
+  )
   .add(
     'column widths and dividers',
     () => (

From 4f9ba56226b263be79e112034567bdc7af7732d7 Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Wed, 11 Jan 2023 16:37:46 -0800
Subject: [PATCH 2/2] set alignment based on column header alignment

---
 packages/@react-spectrum/table/src/TableView.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/table/src/TableView.tsx b/packages/@react-spectrum/table/src/TableView.tsx
index b55f0ba9560..343eb76f710 100644
--- a/packages/@react-spectrum/table/src/TableView.tsx
+++ b/packages/@react-spectrum/table/src/TableView.tsx
@@ -773,10 +773,12 @@ function ResizableTableColumnHeader(props) {
 
   let showResizer = !isEmpty && ((headerRowHovered && getInteractionModality() !== 'keyboard') || resizingColumn != null);
   let alignment = 'start';
+  let menuAlign = 'start' as 'start' | 'end';
   if (columnProps.align === 'center' || column.colspan > 1) {
     alignment = 'center';
   } else if (columnProps.align === 'end') {
     alignment = 'end';
+    menuAlign = 'end';
   }
 
   return (
@@ -808,7 +810,7 @@ function ResizableTableColumnHeader(props) {
             )
           )
         }>
-        <MenuTrigger onOpenChange={setHeaderMenuOpen}>
+        <MenuTrigger onOpenChange={setHeaderMenuOpen} align={menuAlign}>
           <TableColumnHeaderButton alignment={alignment} ref={triggerRef} focusProps={focusProps}>
             {columnProps.allowsSorting &&
               <ArrowDownSmall UNSAFE_className={classNames(styles, 'spectrum-Table-sortedIcon')} />