Skip to content

Commit

Permalink
truncateText prop (#233)
Browse files Browse the repository at this point in the history
  • Loading branch information
@daigof
daigof authored May 4, 2020
1 parent 5425220 commit 1106cfd
Show file tree
Hide file tree
Showing 6 changed files with 25 additions and 29 deletions.
22 changes: 11 additions & 11 deletions docs/alert.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ We should avoid using alerts to show flow-level success states (i.e. Cancellatio

Alerts contain some visual marker, an icon `16px` or avatar `32px`

Alerts should have a **bolded** portion of the text that helps inform the user what the alert is about. The text should be short and preferably not extend more than 2 lines. Ellipses (...) will be used to truncate past 2 lines by default. Truncate text functionality can be turned off via the prop `preventTextTruncating`.
Alerts should have a **bolded** portion of the text that helps inform the user what the alert is about. The text should be short and preferably not extend more than 2 lines. Ellipses (...) can be used to truncate past 2 lines via the prop `truncateText`.

Alerts can contain a CTA section. These should be reserved for really important actions. These alerts persists until an action is taken.

Expand Down Expand Up @@ -56,7 +56,7 @@ import { Alert } from 'radiance-ui';
}
duration="sticky"
avatarSrc={avatarImageSrc}
preventTextTruncating
truncateText
/>
<Alert
content={
Expand All @@ -76,15 +76,15 @@ import { Alert } from 'radiance-ui';
### Proptypes
| prop | propType | required | default | description |
| --------------------- | ---------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------- |
| avatarSrc | string | no | - | to display a 32x32 small avatar instead of an icon |
| content | node | yes | - | content of the alert |
| ctaContent | node | no | - | content of the CTA section. The handler can be provided in the `onExit` prop |
| duration | number or string | no | 3 | can be the string `sticky` for the alert to persist or a number in seconds before the alert is automatically dismissed |
| preventTextTruncating | bool | no | false | prevents text truncate after 2 lines |
| type | string | no | default | must be one of: 'success', 'error', 'default' |
| onExit | func | no | ()->{} | function to be called on dismissal of the alert. The function will receive all of the component's props as the argument |
| prop | propType | required | default | description |
| ------------ | ---------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------- |
| avatarSrc | string | no | - | to display a 32x32 small avatar instead of an icon |
| content | node | yes | - | content of the alert |
| ctaContent | node | no | - | content of the CTA section. The handler can be provided in the `onExit` prop |
| duration | number or string | no | 3 | can be the string `sticky` for the alert to persist or a number in seconds before the alert is automatically dismissed |
| truncateText | bool | no | false | truncate text after 2 lines |
| type | string | no | default | must be one of: 'success', 'error', 'default' |
| onExit | func | no | ()->{} | function to be called on dismissal of the alert. The function will receive all of the component's props as the argument |
### Notes
Expand Down
10 changes: 5 additions & 5 deletions src/shared-components/alert/__snapshots__/test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ exports[`Alert UI snapshots renders a default alert 1`] = `
.emotion-2 {
margin: -3px 0 0 1rem;
max-height: 48px;
max-height: none;
}
<div
Expand Down Expand Up @@ -274,7 +274,7 @@ exports[`Alert UI snapshots renders a sticky alert 1`] = `
.emotion-2 {
margin: -3px 0 0 1rem;
max-height: 48px;
max-height: none;
}
<div
Expand Down Expand Up @@ -456,7 +456,7 @@ exports[`Alert UI snapshots renders custom component passed in content prop 1`]
.emotion-2 {
margin: -3px 0 0 1rem;
max-height: 48px;
max-height: none;
}
<div
Expand Down Expand Up @@ -618,7 +618,7 @@ exports[`Alert UI snapshots renders error alert 1`] = `
.emotion-2 {
margin: -3px 0 0 1rem;
max-height: 48px;
max-height: none;
}
.emotion-6 {
Expand Down Expand Up @@ -768,7 +768,7 @@ exports[`Alert UI snapshots renders success alert 1`] = `
.emotion-2 {
margin: -3px 0 0 1rem;
max-height: 48px;
max-height: none;
}
.emotion-6 {
Expand Down
15 changes: 6 additions & 9 deletions src/shared-components/alert/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ class Alert extends React.Component {
content: PropTypes.node.isRequired,
ctaContent: PropTypes.node,
duration: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
preventTextTruncating: PropTypes.bool,
truncateText: PropTypes.bool,
type: PropTypes.oneOf(['success', 'error', 'default']),
onExit: PropTypes.func,
};
Expand All @@ -44,7 +44,7 @@ class Alert extends React.Component {
avatarSrc: '',
ctaContent: null,
duration: 3,
preventTextTruncating: false,
truncateText: false,
type: 'default',
onExit: () => undefined,
};
Expand All @@ -60,10 +60,10 @@ class Alert extends React.Component {
};

componentDidMount() {
const { duration, ctaContent, preventTextTruncating } = this.props;
const { duration, ctaContent, truncateText } = this.props;

// Truncate text logic
if (!preventTextTruncating) {
if (truncateText) {
const contentElement = this.contentText.current;
const wordsArray = contentElement.innerHTML.split(' ');
while (contentElement.scrollHeight > contentElement.offsetHeight) {
Expand Down Expand Up @@ -112,7 +112,7 @@ class Alert extends React.Component {
avatarSrc,
content,
ctaContent,
preventTextTruncating,
truncateText,
type,
// need to destructure onExit to avoid passing as AlertContainer attribute with ...rest
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Expand Down Expand Up @@ -142,10 +142,7 @@ class Alert extends React.Component {
<Icon fill={COLORS.white} />
)}
</IconContainer>
<ContentContainer
preventTextTruncating={preventTextTruncating}
ref={this.contentText}
>
<ContentContainer truncateText={truncateText} ref={this.contentText}>
{content}
</ContentContainer>
</MainContainer>
Expand Down
3 changes: 1 addition & 2 deletions src/shared-components/alert/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,7 @@ export const MainContainer = styled.div`

export const ContentContainer = styled.div`
margin: -3px 0 0 ${SPACER.medium};
max-height: ${({ preventTextTruncating }) =>
preventTextTruncating ? 'none' : '48px'};
max-height: ${({ truncateText }) => (truncateText ? '48px' : 'none')};
`;

export const CtaContent = styled.div`
Expand Down
2 changes: 1 addition & 1 deletion src/shared-components/alert/test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import TestRenderer from 'react-test-renderer';

import Alert from './index';

// Note on preventTextTruncating prop test: this cannot be tested because element scrollHeight and offsetHeight are not simulated correctly
// Note on truncateText prop test: this cannot be tested because element scrollHeight and offsetHeight are not simulated correctly

const alertText = 'Your email address was updated successfully!';

Expand Down
2 changes: 1 addition & 1 deletion stories/alert/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ stories.add(
}
duration="sticky"
avatarSrc={avatarImageSrc}
preventTextTruncating
truncateText
/>
<Alert
content={
Expand Down

0 comments on commit 1106cfd

Please sign in to comment.