[BD-46] feat: development Truncate component by peterkulko · Pull Request #1472 · openedx/paragon

peterkulko · 2022-07-13T17:24:51Z

Description

The base requirements for a standalone component would be as follows:

Customize the number of lines of text that should be preserved.
Customize the ellipsis, but it should default to … (accepting string or another component)
Provide an option to trim unnecessary whitespace.. That is, any extra spaces between a truncated string and the `…, e.g. "courses ..." would become "courses..."
Standalone component page on the Paragon documentation site with example usage.
Added new onTruncate props.

Deploy Preview

Truncate component

Merge Checklist

If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
Does your change adhere to the documented style conventions?
Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
Were your changes tested in the example app?
Is there adequate test coverage for your changes?
Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

Verify your changes were released to NPM at the expected version.
If you'd like, share your contribution in #show-and-tell.
🎉 🙌 Celebrate! Thanks for your contribution.

openedx-webhooks · 2022-07-13T17:24:54Z

Thanks for the pull request, @PKulkoRaccoonGang!

When this pull request is ready, tag your edX technical lead.

netlify · 2022-07-13T17:24:57Z

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`2d249fd`
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/62fc8d8a92978a0008d71980
😎 Deploy Preview	https://deploy-preview-1472--paragon-openedx.netlify.app/components/truncate
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

codecov · 2022-07-13T22:26:50Z

Codecov Report

Merging #1472 (2d249fd) into master (a5fd4fa) will increase coverage by 0.27%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master    #1472      +/-   ##
==========================================
+ Coverage   91.30%   91.57%   +0.27%     
==========================================
  Files         205      208       +3     
  Lines        3438     3537      +99     
  Branches      799      821      +22     
==========================================
+ Hits         3139     3239     +100     
+ Misses        285      283       -2     
- Partials       14       15       +1

Impacted Files	Coverage Δ
src/Truncate/index.jsx	`100.00% <100.00%> (ø)`
src/Truncate/utils.js	`100.00% <100.00%> (ø)`
src/Card/index.jsx	`100.00% <0.00%> (ø)`
src/Tabs/index.jsx	`93.54% <0.00%> (ø)`
src/Menu/SelectMenu.jsx	`64.06% <0.00%> (ø)`
src/Form/FormControl.jsx	`100.00% <0.00%> (ø)`
src/Collapsible/index.jsx	`69.23% <0.00%> (ø)`
src/Dropzone/DefaultContent.jsx	`100.00% <0.00%> (ø)`
src/Collapsible/CollapsibleBody.jsx	`100.00% <0.00%> (ø)`
src/Collapsible/CollapsibleAdvanced.jsx	`88.57% <0.00%> (ø)`
... and 7 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

…tions

…dDecrementCoefficient functions

adamstankiewicz

Very cool! Been toying around with different examples in the docs site and it seems to be working as intended. Left a few feedback comments.

adamstankiewicz · 2022-08-05T13:49:39Z

I've noticed the occasional odd behavior with Truncate (e.g., it occasionally shows 2.5 lines with the ellipsis half way through a line), though I haven't been able to really identify an exact issue. From the sync earlier today, @monteri mentioned potentially using ResizeObserver here which might improve the truncate behavior.

Likewise, we discussed another prop (onTruncate) for this component that would be great for consumers to know when their content is truncated (e.g., to render a tooltip only when text is truncated). We can treat that as a separate task (let's file a new Github issue in this case), or build it into this PR; I'll leave that decision up to you!

adamstankiewicz · 2022-08-12T12:50:56Z

+### Basic Usage
+
+```jsx live
+  <Truncate lines={2}>


@PKulkoRaccoonGang Even though lines={2} in the "Basic Usage" example on the docs site, I'm seeing it with like 2.5 lines on initial render, until I click "Show code example"; then, it reverts to 2 lines as expected:

Any ideas what might be causing this?

This behavior is caused by the width of the container, which is different for each theme. When using truncation by the consumer, there will be no such problems.

adamstankiewicz · 2022-08-12T12:52:39Z

+### With the custom ellipsis
+
+```jsx live
+() => {


Let's keep this example solely about the custom ellipsis, and add a separate example for using onTruncate. For now, we can just include an example that includes a console.log() inside of onTruncate.

adamstankiewicz · 2022-08-12T12:54:14Z

+}
+```
+
+### Usage in component properties


nit: maybe rename this to Example usage in Card?

openedx-webhooks · 2022-08-19T11:09:36Z

@PKulkoRaccoonGang 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

# [20.10.0](v20.9.3...v20.10.0) (2022-08-19) ### Features * [BD-46] add Truncate component ([#1472](#1472)) ([da3a247](da3a247))

edx-semantic-release · 2022-08-19T11:19:16Z

🎉 This PR is included in version 20.10.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

docs: development Truncate component

a12f0d4

openedx-webhooks added the blended PR is managed through 2U's blended developmnt program label Jul 13, 2022

peterkulko changed the title ~~[BD-46] docs: development Truncate component~~ [BD-46] DRAFT: development Truncate component Jul 13, 2022

refactor: added snapshot test and props description

d60d381

peterkulko added 3 commits July 14, 2022 21:51

refactor: code refactoring

2e6c79b

refactor: added tests coverage

24c85f6

refactor: added tests coverage

1552b60

peterkulko force-pushed the Peter_Kulko/development-Truncate-text-component branch from 8487b5a to 1552b60 Compare July 15, 2022 16:30

peterkulko added 2 commits July 18, 2022 11:24

refactor: added tests coverage for clampLines, createCopyElement func…

e1d0b38

…tions

refactor: writing tests for calculateEllipsisElementHeight, calculate…

4d9fb56

…dDecrementCoefficient functions

peterkulko force-pushed the Peter_Kulko/development-Truncate-text-component branch from a0b2f5a to 4d9fb56 Compare July 18, 2022 12:06

refactor: refactoring snapshots

74d0e17

peterkulko force-pushed the Peter_Kulko/development-Truncate-text-component branch 2 times, most recently from 6875acf to 189c2b7 Compare July 18, 2022 20:39

refactor: remove snapshot tests

6ebe95d

peterkulko force-pushed the Peter_Kulko/development-Truncate-text-component branch from 189c2b7 to 6ebe95d Compare July 19, 2022 12:54

peterkulko added 3 commits July 20, 2022 10:50

refactor: code refactoring

3500382

docs: mock scrollHeight

c7f78e4

docs: added resize calcucation

57d8a80

peterkulko force-pushed the Peter_Kulko/development-Truncate-text-component branch from e7b58dd to 57d8a80 Compare July 21, 2022 23:40

peterkulko changed the title ~~[BD-46] DRAFT: development Truncate component~~ [BD-46] docs: development Truncate component Jul 22, 2022

ihor-romaniuk reviewed Jul 22, 2022

View reviewed changes

Comment thread src/Truncate/index.jsx Outdated

ihor-romaniuk reviewed Jul 22, 2022

View reviewed changes

Comment thread src/Truncate/utils.js Outdated

refactor: renamed const

427b2cf

ihor-romaniuk approved these changes Jul 22, 2022

View reviewed changes

peterkulko changed the title ~~[BD-46] docs: development Truncate component~~ [BD-46] feat: development Truncate component Jul 22, 2022

viktorrusakov linked an issue Jul 27, 2022 that may be closed by this pull request

Show truncation examples for Card #1369

Closed

adamstankiewicz reviewed Jul 29, 2022

View reviewed changes

Comment thread src/Card/Card.scss Outdated

Comment thread src/Truncate/index.jsx Outdated

Comment thread src/Truncate/utils.js

Comment thread src/Truncate/index.jsx Outdated

Comment thread src/Truncate/index.jsx Outdated

refactor: refactoring after review

a91ef05

refactor: fixed ellipsis

f674abd

peterkulko force-pushed the Peter_Kulko/development-Truncate-text-component branch from 1e11e3f to a622750 Compare August 10, 2022 13:36

feat: added onTruncate props and example usage

ed2d8c7

peterkulko force-pushed the Peter_Kulko/development-Truncate-text-component branch from a622750 to ed2d8c7 Compare August 10, 2022 13:47

adamstankiewicz reviewed Aug 12, 2022

View reviewed changes

refactor: refactoring after review

2d249fd

adamstankiewicz approved these changes Aug 19, 2022

View reviewed changes

adamstankiewicz merged commit da3a247 into openedx:master Aug 19, 2022

edx-semantic-release pushed a commit that referenced this pull request Aug 19, 2022

chore(release): 20.10.0 [skip ci]

4699580

# [20.10.0](v20.9.3...v20.10.0) (2022-08-19) ### Features * [BD-46] add Truncate component ([#1472](#1472)) ([da3a247](da3a247))

edx-semantic-release added the released label Aug 19, 2022

Uh oh!

Conversation

peterkulko commented Jul 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Deploy Preview

Merge Checklist

Post-merge Checklist

Uh oh!

openedx-webhooks commented Jul 13, 2022

Uh oh!

netlify Bot commented Jul 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for paragon-openedx ready!

Uh oh!

codecov Bot commented Jul 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

adamstankiewicz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

adamstankiewicz commented Aug 5, 2022

Uh oh!

adamstankiewicz Aug 12, 2022

Choose a reason for hiding this comment

Uh oh!

peterkulko Aug 17, 2022

Choose a reason for hiding this comment

Uh oh!

adamstankiewicz Aug 12, 2022

Choose a reason for hiding this comment

Uh oh!

peterkulko Aug 17, 2022

Choose a reason for hiding this comment

Uh oh!

adamstankiewicz Aug 12, 2022

Choose a reason for hiding this comment

Uh oh!

peterkulko Aug 17, 2022

Choose a reason for hiding this comment

Uh oh!

openedx-webhooks commented Aug 19, 2022

Uh oh!

edx-semantic-release commented Aug 19, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

peterkulko commented Jul 13, 2022 •

edited

Loading

netlify Bot commented Jul 13, 2022 •

edited

Loading

codecov Bot commented Jul 13, 2022 •

edited

Loading