Skip to content
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.

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

fix(flat-table-cell, flat-table-header): raise specificity of spacing styles FE-3838 #3872

Merged
merged 4 commits into from
Apr 13, 2021

Conversation

edleeks87
Copy link
Contributor

@edleeks87 edleeks87 commented Apr 1, 2021

fix #3846

Proposed behaviour

Raises specificity of the space styles applied to div container within FlatTableCell, FlatTableRowHeader and
FlatTableHeader so any values passed via styled-system props take precedence of the cell-sizes
configs

Adds width prop for FlatTableCell. Adds truncate and title props to support styling content
that overflows the width of the column and overriding the text displayed when the mouse hovers over
a cell.

After speaking to @harpalsingh it was decided to remove the nowrap styling on cells and only apply it when truncate is true

Current behaviour

Styled-system props are overridden by the size config
No ability to truncate cell content

Checklist

  • Commits follow our style guide
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Cypress automation tests added or updated if required
  • Storybook added or updated if required
  • Typescript d.ts file added or updated if required
  • Carbon implementation and Design System documentation are congruent

Additional context

image

Testing instructions

design-system-flat-table--with-truncated-cell-content has been created

https://codesandbox.io/s/carbon-quickstart-forked-fm951?file=/src/index.js

@codesandbox-ci
Copy link

codesandbox-ci bot commented Apr 1, 2021

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6827513:

Sandbox Source
carbon-quickstart Configuration
carbon-quickstart PR
carbon-quickstart (forked) PR

@edleeks87 edleeks87 force-pushed the FE-3838-cell-width-and-truncate branch from fa8eba0 to 88fb78c Compare April 1, 2021 13:19
bulaj
bulaj previously approved these changes Apr 7, 2021
src/components/flat-table/flat-table.stories.mdx Outdated Show resolved Hide resolved
@nicktitchmarsh
Copy link
Contributor

nicktitchmarsh commented Apr 8, 2021

Combining expandable rows with truncate doesn't actually truncate the content of the main row. Seems to work for sub rows however.
image

@edleeks87 edleeks87 force-pushed the FE-3838-cell-width-and-truncate branch 2 times, most recently from 09318db to 4227e80 Compare April 8, 2021 09:36
nicktitchmarsh
nicktitchmarsh previously approved these changes Apr 8, 2021
nicktitchmarsh
nicktitchmarsh previously approved these changes Apr 8, 2021
@DipperTheDan DipperTheDan marked this pull request as ready for review April 8, 2021 14:56
@DipperTheDan DipperTheDan requested review from a team as code owners April 8, 2021 14:56
DipperTheDan
DipperTheDan previously approved these changes Apr 8, 2021
bulaj
bulaj previously approved these changes Apr 8, 2021
… styles

Raises specificity of the `space` styles applied to div container within `FlatTableCell` and
`FlatTableHeader` so any values passed via `styled-system` props take precedence of the cell-sizes
configs

fix #3846
… cell and new truncate styling

Adds `width` prop for `FlatTableCell`. Adds `truncate` and `title` props to support styling content
that overflows the width of the column and overriding the text displayed when the mouse hovers over
a cell.
@edleeks87 edleeks87 dismissed stale reviews from bulaj, DipperTheDan, and nicktitchmarsh via 86b42b8 April 13, 2021 12:12
@edleeks87 edleeks87 force-pushed the FE-3838-cell-width-and-truncate branch from f2bc672 to 86b42b8 Compare April 13, 2021 12:12
@edleeks87 edleeks87 merged commit 8f2137a into master Apr 13, 2021
@edleeks87 edleeks87 deleted the FE-3838-cell-width-and-truncate branch April 13, 2021 12:34
@carbonci
Copy link
Collaborator

🎉 This PR is included in version 68.17.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

Styled components padding does not apply correctly to table cells
7 participants