fix: tab: fixes stat tabs word wrap and spacing when border is false #826
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
SUMMARY:
Updates Stat Tabs layout fixing line clamp word break bug and insets. Addresses TODOs noted here.
padding
whenbordered
isfalse
, but preserves verticalpadding
to preserve existing layoutsmargin-left
andmargin-right
from first and lastStat
whenbordered
isfalse
word-break: break-all;
to only apply whenlineClamp
is activeBefore:
![opportunity](https://private-user-images.githubusercontent.com/99700808/326948474-c0c0aa2b-127e-4da5-aee6-f5a8053549b2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5NzU1NzIsIm5iZiI6MTczODk3NTI3MiwicGF0aCI6Ii85OTcwMDgwOC8zMjY5NDg0NzQtYzBjMGFhMmItMTI3ZS00ZGE1LWFlZTYtZjVhODA1MzU0OWIyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA4VDAwNDExMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdmMWIyMzU1YjU4NWRiYjczZDA4MTcyMGZiOTdjYzQ3MmFmOTY4NzA0ODFhOWJiNzUzNWU0MjVjZjBhNzAxZGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.KkvZRP52AMhgErFf3Yqtah2ll5wNp17rY4NtNm52yEY)
After:
![afterFixup](https://private-user-images.githubusercontent.com/99700808/326948995-32c06c42-87be-4da6-be31-8c4214de6b26.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5NzU1NzIsIm5iZiI6MTczODk3NTI3MiwicGF0aCI6Ii85OTcwMDgwOC8zMjY5NDg5OTUtMzJjMDZjNDItODdiZS00ZGE2LWJlMzEtOGM0MjE0ZGU2YjI2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA4VDAwNDExMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQ2NmY3NjZkZWI5YTM4YmUzOGFjNTA3MDYyNjBiOTBjYjM1OGJjNGNiYTQyYTE5YWU5OWQ5MmY1YjYzNzAxZWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.yD7ne7H_-J8dzL1msRdCr_rLCmq21RXtU8AfeQ3D05w)
JIRA TASK (Eightfold Employees Only):
ENG-87058
CHANGE TYPE:
TEST COVERAGE:
TEST PLAN:
Pull the PR branch and run
yarn
andyarn storybook
. Verify theStat Tabs
stories behave as expected.