Skip to content

feat(TCCUI-221): Add tooltip for Status component #3399

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

Merged
frassinier merged 2 commits into from
Aug 23, 2021
Merged

feat(TCCUI-221): Add tooltip for Status component #3399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0728549
feat(TCCUI-221): Add tooltip for Status component
mkondzera Aug 20, 2021
61ba1d2
update snapshot
mkondzera Aug 20, 2021
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
12 changes: 9 additions & 3 deletions ...ages/components/src/CollapsiblePanel/__snapshots__/CollapsiblePanel.snapshot.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ exports[`CollapsiblePanel should render default with expanded key/value content
<coral.icon name="fa fa-check">
</coral.icon>
</span>
<span class="theme-tc-status-label tc-status-label theme-info">
<span class="theme-tc-status-label tc-status-label theme-info"
aria-describedby="42"
>
inProgress
</span>
<div class="tc-actions theme-tc-status-actions tc-status-actions btn-group">
Expand Down Expand Up @@ -125,7 +127,9 @@ exports[`CollapsiblePanel should render default with key/value content 1`] = `
<coral.icon name="fa fa-check">
</coral.icon>
</span>
<span class="theme-tc-status-label tc-status-label theme-info">
<span class="theme-tc-status-label tc-status-label theme-info"
aria-describedby="42"
>
inProgress
</span>
<div class="tc-actions theme-tc-status-actions tc-status-actions btn-group">
Expand Down Expand Up @@ -230,7 +234,9 @@ exports[`CollapsiblePanel should render default without content 1`] = `
<coral.icon name="fa fa-check">
</coral.icon>
</span>
<span class="theme-tc-status-label tc-status-label theme-info">
<span class="theme-tc-status-label tc-status-label theme-info"
aria-describedby="42"
>
inProgress
</span>
<div class="tc-actions theme-tc-status-actions tc-status-actions btn-group">
Expand Down
9 changes: 7 additions & 2 deletions packages/components/src/Status/Status.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Actions from '../Actions/Actions.component';
import CircularProgress from '../CircularProgress/CircularProgress.component';
import Icon from '../Icon';
import Skeleton from '../Skeleton';
import TooltipTrigger from '../TooltipTrigger';

import css from './Status.scss';

Expand Down Expand Up @@ -94,7 +95,7 @@ function renderLabel(status, label) {
return label;
}

export function Status({ status, label, icon, actions, progress }) {
export function Status({ status, label, icon, actions, progress, tooltip }) {
const rootClassnames = classNames(css['tc-status'], 'tc-status', {
[css.action]: actions && actions.length,
});
Expand All @@ -110,11 +111,14 @@ export function Status({ status, label, icon, actions, progress }) {
'tc-status-label',
css[getbsStyleFromStatus(status)],
);
const labelText = renderLabel(status, label);

return (
<div role="status" className={rootClassnames}>
<span className={iconClassnames}>{renderIcon(status, icon, progress)}</span>
<span className={labelClassNames}>{renderLabel(status, label)}</span>
<TooltipTrigger label={tooltip || labelText} tooltipPlacement="top">
<span className={labelClassNames}>{labelText}</span>
</TooltipTrigger>
<Actions
actions={actions}
className={classNames(css['tc-status-actions'], 'tc-status-actions')}
Expand All @@ -138,6 +142,7 @@ Status.propTypes = {
icon: PropTypes.string,
actions: Actions.propTypes.actions,
progress: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
tooltip: PropTypes.string,
};

Status.defaultProps = {
Expand Down
4 changes: 4 additions & 0 deletions packages/components/src/Status/Status.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,10 @@ storiesOf('Messaging & Communication/Status', module).add('default', () => (
icon=""
progress="50"
/>
<h3>
Status with <code>tooltip</code>
</h3>
<Status {...myStatus} actions={[]} tooltip='tooltip test' />
<br />
</div>
));
42 changes: 42 additions & 0 deletions packages/components/src/Status/__snapshots__/Status.snapshot.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,14 @@ exports[`Status should render a label 1`] = `

</span>
<span
aria-describedby="42"
className="theme-tc-status-label tc-status-label theme-success"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyPress={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
Successful
</span>
Expand Down Expand Up @@ -67,7 +74,14 @@ exports[`Status should render a label with Icon 1`] = `
/>
</span>
<span
aria-describedby="42"
className="theme-tc-status-label tc-status-label theme-success"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyPress={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
Successful
</span>
Expand Down Expand Up @@ -123,7 +137,14 @@ exports[`Status should render a label with Icon without actions 1`] = `
/>
</span>
<span
aria-describedby="42"
className="theme-tc-status-label tc-status-label theme-success"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyPress={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
Successful
</span>
Expand Down Expand Up @@ -164,7 +185,14 @@ exports[`Status should render a label with a continuous circular progress 1`] =
</svg>
</span>
<span
aria-describedby="42"
className="theme-tc-status-label tc-status-label theme-info"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyPress={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
In Progress
</span>
Expand Down Expand Up @@ -238,7 +266,14 @@ exports[`Status should render a label with a fixed circular progress 1`] = `
</svg>
</span>
<span
aria-describedby="42"
className="theme-tc-status-label tc-status-label theme-info"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyPress={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
In Progress
</span>
Expand Down Expand Up @@ -301,7 +336,14 @@ exports[`Status should render a label with a skeleton 1`] = `
/>
</span>
<span
aria-describedby="42"
className="theme-tc-status-label tc-status-label theme-skeleton"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyPress={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<span
aria-label="text (loading)"
Expand Down