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.

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

feat!: deprecate Truncate component #3336

Merged
merged 1 commit into from
Dec 11, 2024
Merged

feat!: deprecate Truncate component #3336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
32 changes: 17 additions & 15 deletions src/Truncate/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,44 +5,46 @@ components:
- Truncate
categories:
- Content
status: 'New'
status: 'Deprecate Soon'
designStatus: 'Done'
devStatus: 'Done'
notes: |
Plan to replace with native css implementation as per https://github.com/openedx/paragon/issues/3311
---

A Truncate component can help you crop multiline text. There will be three dots at the end of the text.

## Basic Usage

```jsx live
<Truncate lines={2}>
<Truncate.Deprecated lines={2}>
Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons
for using the platform and objectives to accomplish. To help members of each group learn about what edX
offers, reach goals, and solve problems, edX provides a variety of information resources.
Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons
for using the platform and objectives to accomplish. To help members of each group learn about what edX
offers, reach goals, and solve problems, edX provides a variety of information resources.
</Truncate>
</Truncate.Deprecated>
```

### With the custom ellipsis

```jsx live
<Truncate lines={2} ellipsis="🎉🎉🎉" whiteSpace>
<Truncate.Deprecated lines={2} ellipsis="🎉🎉🎉" whiteSpace>
Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons
for using the platform and objectives to accomplish. To help members of each group learn about what edX
offers, reach goals, and solve problems, edX provides a variety of information resources.
</Truncate>
</Truncate.Deprecated>
```

### With the onTruncate

```jsx live
<Truncate lines={2} onTruncate={() => console.log('onTruncate')}>
<Truncate.Deprecated lines={2} onTruncate={() => console.log('onTruncate')}>
Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons
for using the platform and objectives to accomplish. To help members of each group learn about what edX
offers, reach goals, and solve problems, edX provides a variety of information resources.
</Truncate>
</Truncate.Deprecated>
```

### Example usage in Card
Expand All @@ -59,22 +61,22 @@ A Truncate component can help you crop multiline text. There will be three dots
/>
<Card.Header
title={
<Truncate lines={2}>
<Truncate.Deprecated lines={2}>
Using Enhanced Capabilities In Your Course
</Truncate>}
</Truncate.Deprecated>}
/>
<Card.Section>
<Truncate lines={4}>
<Truncate.Deprecated lines={4}>
Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons
for using the platform and objectives to accomplish. To help members of each group learn about what edX
offers, reach goals, and solve problems, edX provides a variety of information resources.
</Truncate>
</Truncate.Deprecated>
</Card.Section>
<Card.Footer
textElement={
<Truncate lines={2}>
<Truncate.Deprecated lines={2}>
Using Enhanced Capabilities In Your Course
</Truncate>}
</Truncate.Deprecated>}
>
<Button style={{ minWidth: 100 }}>Action 1</Button>
</Card.Footer>
Expand All @@ -88,7 +90,7 @@ A Truncate component can help you crop multiline text. There will be three dots
**Note**: `Truncate` supports only plain `HTML` children and not `jsx`.

```jsx live
<Truncate lines={1}>
<Truncate.Deprecated lines={1}>
<a href="#">Learners</a>, course teams, researchers, developers: the edX community includes <strong class="strong-class"><i class="i-class">groups with <u>a range</u> of <q>reasons</q></i></strong> for using the platform and objectives to accomplish.
</Truncate>
</Truncate.Deprecated>
```
8 changes: 4 additions & 4 deletions src/Truncate/Truncate.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import Truncate from '.';

describe('<Truncate />', () => {
render(
<Truncate className="pgn__truncate">
<Truncate.Deprecated className="pgn__truncate">
Learners, course teams, researchers, developers.
</Truncate>,
</Truncate.Deprecated>,
);
it('render with className', () => {
const element = screen.getByText(/Learners, course teams, researchers, developers./i);
Expand All @@ -18,9 +18,9 @@ describe('<Truncate />', () => {
it('render with onTruncate', () => {
const mockFn = jest.fn();
render(
<Truncate className="pgn__truncate" onTruncate={mockFn}>
<Truncate.Deprecated className="pgn__truncate" onTruncate={mockFn}>
Learners, course teams, researchers, developers.
</Truncate>,
</Truncate.Deprecated>,
);
expect(mockFn).toHaveBeenCalledTimes(2);
});
Expand Down
17 changes: 13 additions & 4 deletions src/Truncate/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, {
useLayoutEffect, useRef,
useLayoutEffect, useRef, useEffect,
} from 'react';
import PropTypes from 'prop-types';
import { truncateLines } from './utils';
Expand All @@ -9,7 +9,7 @@
const DEFAULT_TRUNCATE_ELLIPSIS = '...';
const DEFAULT_TRUNCATE_ELEMENT_TYPE = 'div';

function Truncate({
function TruncateDeprecated({
children, lines, ellipsis, elementType, className, whiteSpace, onTruncate,
}) {
const textContainer = useRef();
Expand Down Expand Up @@ -40,7 +40,7 @@
});
}

Truncate.propTypes = {
TruncateDeprecated.propTypes = {
/** The expected text to which the ellipsis would be applied. */
children: PropTypes.string.isRequired,
/** The number of lines the text to be truncated to. */
Expand All @@ -57,7 +57,7 @@
onTruncate: PropTypes.func,
};

Truncate.defaultProps = {
TruncateDeprecated.defaultProps = {
lines: DEFAULT_TRUNCATE_LINES,
ellipsis: DEFAULT_TRUNCATE_ELLIPSIS,
whiteSpace: false,
Expand All @@ -66,4 +66,13 @@
onTruncate: undefined,
};

function Truncate() {
useEffect(() => {

Check warning on line 70 in src/Truncate/index.jsx

View check run for this annotation

Codecov / codecov/patch

src/Truncate/index.jsx#L69-L70 

Added lines #L69 - L70 were not covered by tests
// eslint-disable-next-line no-console
console.log('Please use Truncate.Deprecated until a replacement is created');

Check warning on line 72 in src/Truncate/index.jsx

View check run for this annotation

Codecov / codecov/patch

src/Truncate/index.jsx#L72 

Added line #L72 was not covered by tests
}, []);
return null;

Check warning on line 74 in src/Truncate/index.jsx

View check run for this annotation

Codecov / codecov/patch

src/Truncate/index.jsx#L74 

Added line #L74 was not covered by tests
Copy link
Member

Choose a reason for hiding this comment

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

[consideration] I wonder if it'd be worth having something like a console.log or similar here to give some output when this no-op component is used, e.g.

function Truncate() {
  useEffect(() => {
    console.log('Please use Truncate.Deprecated until a replacement is created');
  }, []);
  return null;
}

}
Truncate.Deprecated = TruncateDeprecated;

export default Truncate;
Loading