feat(worklist): New worklist buttons and tooltips (#3989)
This commit is contained in:
Ibrahim authored and GitHub committed
1 parent
6b79dff5c1
commit
9bcd1ae6f5
13 files changed
+120
-36
No files matched your search
@@ -1,7 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<g fill-rule="evenodd">
|
||||
<circle cx="12" cy="12" r="12" fill="currentColor" fill-opacity="0.2"/>
|
||||
<path fill="currentcolor" fill-rule="nonzero" d="M17.207 10.793c.36.36.388.928.083 1.32l-.083.094-5 5c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094 4.292-4.293-4.292-4.293c-.36-.36-.388-.928-.083-1.32l.083-.094c.36-.36.928-.388 1.32-.083l.094.083 5 5z"/>
|
||||
<path fill="currentcolor" fill-rule="nonzero" d="M17.5 11.5c0 .513-.386.936-.883.993l-.117.007H6c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L6 10.5h10.5c.552 0 1 .448 1 1z"/>
|
||||
<circle cx="12" cy="12" r="12" fill="currentColor" fill-opacity="1"/>
|
||||
<path fill="#348cfd" fill-rule="nonzero" d="M17.207 10.793c.36.36.388.928.083 1.32l-.083.094-5 5c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094 4.292-4.293-4.292-4.293c-.36-.36-.388-.928-.083-1.32l.083-.094c.36-.36.928-.388 1.32-.083l.094.083 5 5z"/>
|
||||
<path fill="#348cfd" fill-rule="nonzero" d="M17.5 11.5c0 .513-.386.936-.883.993l-.117.007H6c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L6 10.5h10.5c.552 0 1 .448 1 1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 648 B After Width: | Height: | Size: 636 B |
@@ -1,7 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="22" viewBox="0 0 21 22">
|
||||
<g fill="currentColor" fill-rule="evenodd">
|
||||
<path d="M10.5.31C4.87.31.308 4.872.308 10.501c0 5.629 4.563 10.192 10.192 10.192 5.63 0 10.192-4.563 10.192-10.192C20.692 4.872 16.13.309 10.5.309zm0 1c5.077 0 9.192 4.115 9.192 9.192 0 5.076-4.115 9.192-9.192 9.192s-9.192-4.116-9.192-9.192c0-5.077 4.115-9.193 9.192-9.193z" transform="translate(0 .5)"/>
|
||||
<path d="M9.692 8.385c.677 0 1.234.514 1.301 1.174l.007.133v5.654c0 .276-.224.5-.5.5-.245 0-.45-.177-.492-.41l-.008-.09V9.692c0-.145-.101-.267-.237-.3l-.07-.007H8.076c-.276 0-.5-.224-.5-.5 0-.246.177-.45.41-.492l.09-.008h1.615zM9.288 4.346l.114.007c.446.056.79.436.79.897 0 .5-.404.904-.904.904-.499 0-.903-.405-.903-.904 0-.46.344-.841.79-.897l.113-.007z" transform="translate(0 .5)"/>
|
||||
<path d="M12.923 14.848c.276 0 .5.224.5.5 0 .245-.177.45-.41.492l-.09.008H8.077c-.276 0-.5-.224-.5-.5 0-.246.177-.45.41-.492l.09-.008h4.846z" transform="translate(0 .5)"/>
|
||||
<g fill-rule="evenodd">
|
||||
<circle cx="10.5" cy="11" r="10.192" fill="#000000"/>
|
||||
<path fill="#348cfd" d="M10.5.31C4.87.31.308 4.872.308 10.501c0 5.629 4.563 10.192 10.192 10.192 5.63 0 10.192-4.563 10.192-10.192C20.692 4.872 16.13.309 10.5.309zm0 1c5.077 0 9.192 4.115 9.192 9.192 0 5.076-4.115 9.192-9.192 9.192s-9.192-4.116-9.192-9.192c0-5.077 4.115-9.193 9.192-9.193z" transform="translate(0 .5)"/>
|
||||
<path fill="#348cfd" d="M9.692 8.385c.677 0 1.234.514 1.301 1.174l.007.133v5.654c0 .276-.224.5-.5.5-.245 0-.45-.177-.492-.41l-.008-.09V9.692c0-.145-.101-.267-.237-.3l-.07-.007H8.076c-.276 0-.5-.224-.5-.5 0-.246.177-.45.41-.492l.09-.008h1.615zM9.288 4.346l.114.007c.446.056.79.436.79.897 0 .5-.404.904-.904.904-.499 0-.903-.405-.903-.904 0-.46.344-.841.79-.897l.113-.007z" transform="translate(0 .5)"/>
|
||||
<path fill="#348cfd" d="M12.923 14.848c.276 0 .5.224.5.5 0 .245-.177.45-.41.492l-.09.008H8.077c-.276 0-.5-.224-.5-.5 0-.246.177-.45.41-.492l.09-.008h4.846z" transform="translate(0 .5)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import * as ButtonEnums from './ButtonEnums';
|
||||
import Tooltip from '../Tooltip/Tooltip';
|
||||
|
||||
const sizeClasses = {
|
||||
[ButtonEnums.size.small]: 'h-[26px] text-[13px]',
|
||||
@@ -66,11 +67,13 @@ const Button = ({
|
||||
name,
|
||||
className,
|
||||
onClick,
|
||||
startIconTooltip = null,
|
||||
endIconTooltip = null,
|
||||
}) => {
|
||||
const startIcon = startIconProp && (
|
||||
<>
|
||||
{React.cloneElement(startIconProp, {
|
||||
className: classnames('w-4 h-4 fill-current'),
|
||||
className: classnames('w-4 h-4 fill-current', startIconProp?.props?.className),
|
||||
})}
|
||||
</>
|
||||
);
|
||||
@@ -78,7 +81,7 @@ const Button = ({
|
||||
const endIcon = endIconProp && (
|
||||
<>
|
||||
{React.cloneElement(endIconProp, {
|
||||
className: classnames('w-4 h-4 fill-current'),
|
||||
className: classnames('w-4 h-4 fill-current', endIconProp?.props?.className),
|
||||
})}
|
||||
</>
|
||||
);
|
||||
@@ -108,9 +111,9 @@ const Button = ({
|
||||
onClick={handleOnClick}
|
||||
data-cy={`${name}-btn`}
|
||||
>
|
||||
{startIcon}
|
||||
{startIconTooltip ? <Tooltip content={startIconTooltip}>{startIcon}</Tooltip> : startIcon}
|
||||
{children}
|
||||
{endIcon}
|
||||
{endIconTooltip ? <Tooltip content={endIconTooltip}>{endIcon}</Tooltip> : endIcon}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@@ -141,6 +144,10 @@ Button.propTypes = {
|
||||
endIcon: PropTypes.node,
|
||||
/** Additional TailwindCSS classnames */
|
||||
className: PropTypes.string,
|
||||
/** Tooltip for the start icon */
|
||||
startIconTooltip: PropTypes.node,
|
||||
/** Tooltip for the end icon */
|
||||
endIconTooltip: PropTypes.node,
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -23,7 +23,7 @@ const StudyListTableRow = props => {
|
||||
className={classnames(
|
||||
'w-full transition duration-300',
|
||||
{
|
||||
'border-primary-light hover:border-secondary-light mb-2 overflow-hidden rounded border':
|
||||
'border-primary-light hover:border-secondary-light mb-2 overflow-visible rounded border':
|
||||
isExpanded,
|
||||
},
|
||||
{
|
||||
|
||||
Reference in new issue
Block a user