Skip to content

Making TableView cell content fill 100% width of its cell #2042

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Jul 27, 2021
Merged

Making TableView cell content fill 100% width of its cell #2042

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
a05e172
making TableView cell content fill 100% width
LFDanLu Jun 21, 2021
e4ab678
updating approach to fix text truncation
LFDanLu Jun 22, 2021
bd5b51d
fixing where min-width is applied for table cell contents
LFDanLu Jun 22, 2021
8089dde
changing table child styles so user has to provide alignment and text…
LFDanLu Jun 29, 2021
162a4df
fixing lint
LFDanLu Jun 29, 2021
4a5492f
Merge branch 'main' into issue_1865
LFDanLu Jul 19, 2021
61b108a
cleaning up story
LFDanLu Jul 19, 2021
ba6b661
Merge branch 'issue_1865' of github.com:adobe/react-spectrum into iss…
LFDanLu Jul 19, 2021
319a48a
Merge branch 'main' into issue_1865
LFDanLu Jul 20, 2021
3915979
Merge branch 'main' into issue_1865
LFDanLu Jul 26, 2021
94a9355
addressing review comments
LFDanLu Jul 27, 2021
a3b9427
Merge branch 'main' into issue_1865
LFDanLu Jul 27, 2021
bd00d75
Merge branch 'main' into issue_1865
LFDanLu Jul 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/@adobe/spectrum-css-temp/components/table/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,10 @@ 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;
white-space: nowrap;
Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/table/src/TableView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -626,6 +626,7 @@ function TableCell({cell}) {
stylesOverrides,
'react-spectrum-Table-cell',
{
'react-spectrum-Table-cell--alignStart': columnProps.align === 'start',
Copy link
Member Author

@LFDanLu LFDanLu Jun 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added for consistency

'react-spectrum-Table-cell--alignCenter': columnProps.align === 'center',
'react-spectrum-Table-cell--alignEnd': columnProps.align === 'end'
}
Expand Down
7 changes: 7 additions & 0 deletions packages/@react-spectrum/table/src/table.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,18 @@
height: 100%;
}

.react-spectrum-Table-cell--alignStart {
text-align: start;
Copy link
Member Author

@LFDanLu LFDanLu Jul 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

adding text-align so we handle alignment if user passes in spans as the cell content

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;
}

Expand Down
109 changes: 109 additions & 0 deletions packages/@react-spectrum/table/stories/Table.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,6 +380,115 @@ 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>
<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>
<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',
() => (
Expand Down