diff --git a/packages/@adobe/spectrum-css-temp/components/table/index.css b/packages/@adobe/spectrum-css-temp/components/table/index.css index f9b19c9991a..14015fe2e95 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..343eb76f710 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) => { - 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 ( -
-
{props.children}
+
+
+ {props.children} +
); }; @@ -746,6 +772,14 @@ 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 ( @@ -770,14 +804,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' } ) ) }> - - + + {columnProps.allowsSorting && } @@ -786,7 +820,7 @@ function ResizableTableColumnHeader(props) {
{column.rendered}
} { - columnProps.allowsResizing && resizingColumn == null && + columnProps.allowsResizing && }
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) ) ) + .add( + 'should fill cell width allowsResizing', + () => ( + onSelectionChange([...s])}> + + File Name + Type + Size + Description + + + + 2018 Proposal + PDF + 214 KB + very very very very very very long long long long long description + + + + + 100% + + + + + 100% + + + + + 100% + + + + + very very very very very very long long long long long description + + + + + + + 50% div + + + + + 70% div + + + + + 70% div + + + + + very very very very very very long long long long long description + + + + + + + span child + + + + + span child + + + + span child + + + + + very very very very very very long long long long long description + + + + + + ) + ) .add( 'column widths and dividers', () => (