- {(avatar && type !== 'inbound') && (
-
- {
- typeof (avatar) === 'function' ? avatar() :
- }
-
+
+ {(type !== 'inbound' && avatar) && renderAvatar('outbound')}
+ {/* Empty
to occupy the top left corner of grid template */}
+ {(type !== 'inbound' && !avatar) &&
}
- {isTyping && (
-
- )}
+ {isTyping && renderTyping()}
{!isTyping && (
-
- {children || (
-
- {actionBar && (
-
- {actionBar}
-
- )}
-
-
+ {children || (
+
+ {actionBar && (
+
+ {actionBar}
+
)}
- onClick={onClickText}
- >
- {text}
-
- {options && (
-
- {options.map((option, idx) => {
- let cn;
- let handleClick;
+
+
+ {text}
+
+ {options && (
+
+ {options.map((option, idx) => {
+ let cn;
+ let handleClick;
- if (option.id === currentOption) {
- cn = `u-backgroundPrimary ${textClassName || 'u-textWhite'} ${disabledOption ? 'u-cursorNotAllow' : ''}`;
- handleClick = null;
- } else if (disabledOption) {
- cn = 'u-backgroundLighter u-textGray u-cursorNotAllow';
- handleClick = null;
- } else {
- cn = 'u-backgroundWhite hover:u-backgroundLightest u-textPrimary u-cursorPointer';
- handleClick = () => onSelectOption(option.id);
- }
+ if (option.id === currentOption) {
+ cn = `u-backgroundPrimary ${textClassName || 'u-textWhite'} ${disabledOption ? 'u-cursorNotAllow' : ''}`;
+ handleClick = null;
+ } else if (disabledOption) {
+ cn = 'u-backgroundLighter u-textGray u-cursorNotAllow';
+ handleClick = null;
+ } else {
+ cn = 'u-backgroundWhite hover:u-backgroundLightest u-textPrimary u-cursorPointer';
+ handleClick = () => onSelectOption(option.id);
+ }
- return (
-
- );
- })}
+ return (
+
+ );
+ })}
+
+ )}
+
- )}
-
-
- )}
- {time && (
-
- {time}
-
- )}
-
+ )}
+
)}
- {
- typeof (avatar) === 'function' ? avatar() :
- }
-
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index 5743c10..ce47829 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -86,7 +86,7 @@ const Button = React.forwardRef(({ className, variant, textClassName, children,
ref={ref}
{...props}
className={classNames(
- 'Button u-flexInline u-justifyContentCenter u-alignItemsCenter u-textDecorationNone u-roundedMedium',
+ 'Button u-flexInline u-justifyContentCenter u-alignItemsCenter u-textDecorationNone u-roundedMedium u-fontMedium',
variant && variantsClassName[variant],
variant !== 'link' && 'hover:u-textDecorationNone',
sizeOri && `Button--${sizeOri}`,
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index 64c5d7e..b255b40 100644
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -6,7 +6,6 @@ import Icon from 'components/Icon';
import Overlay from 'components/Overlay';
import Tooltip from 'components/Tooltip';
-
const propTypes = {
/**
* A set of input props passed directly to `react-textarea-autosize`'s component.
@@ -61,12 +60,11 @@ const Composer = React.forwardRef(({ className, children, sendButtonIcon, iconLe
className={classNames(
'Composer',
'u-flex u-alignItemsEnd u-borderTop u-paddingTiny',
- className && className
+ className && className,
)}
>
{!disabledAttachButton && (
-
{tooltipAttachButton ? (
{typeof (tooltipAttachButton) === 'function'
? tooltipAttachButton()
- : tooltipAttachButton
- }
+ : tooltipAttachButton}
)}
>
)}
@@ -133,8 +135,7 @@ const Composer = React.forwardRef(({ className, children, sendButtonIcon, iconLe
{typeof (tooltipSendButton) === 'function'
? tooltipSendButton()
- : tooltipSendButton
- }
+ : tooltipSendButton}
)}
>
@@ -142,11 +143,13 @@ const Composer = React.forwardRef(({ className, children, sendButtonIcon, iconLe
{...sendButtonProps}
className={classNames(
'u-roundedMedium u-flex u-alignItemsCenter u-justifyContentCenter u-flexShrink0 u-marginLeftTiny',
- sendButtonActive ? 'hover:u-backgroundPrimary hover:u-textWhite u-textPrimary u-cursorPointer' : 'u-textLight u-cursorNotAllow u-pointerEventsNone'
+ sendButtonActive ? 'hover:u-backgroundPrimary hover:u-textWhite u-textPrimary u-cursorPointer' : 'u-textLight u-cursorNotAllow u-pointerEventsNone',
+ sendButtonProps.className && sendButtonProps.className,
)}
style={{
width: 42,
height: 42,
+ ...sendButtonProps.style,
}}
>
{typeof (sendButtonIcon) === 'function'
@@ -159,11 +162,13 @@ const Composer = React.forwardRef(({ className, children, sendButtonIcon, iconLe
{...sendButtonProps}
className={classNames(
'u-roundedMedium u-flex u-alignItemsCenter u-justifyContentCenter u-flexShrink0 u-marginLeftTiny',
- sendButtonActive ? 'hover:u-backgroundPrimary hover:u-textWhite u-textPrimary u-cursorPointer' : 'u-textLight u-cursorNotAllow u-pointerEventsNone'
+ sendButtonActive ? 'hover:u-backgroundPrimary hover:u-textWhite u-textPrimary u-cursorPointer' : 'u-textLight u-cursorNotAllow u-pointerEventsNone',
+ sendButtonProps.className && sendButtonProps.className,
)}
style={{
width: 42,
height: 42,
+ ...sendButtonProps.style,
}}
>
{typeof (sendButtonIcon) === 'function'
diff --git a/src/components/Dropdown/Container.js b/src/components/Dropdown/Container.js
index 6aa1b36..1c37582 100644
--- a/src/components/Dropdown/Container.js
+++ b/src/components/Dropdown/Container.js
@@ -6,36 +6,61 @@ import usePopper from 'hooks/usePopper';
import useRootClose from 'hooks/useRootClose';
import DropdownContext from './Context';
-
const propTypes = {
+ /**
+ * Custom style
+ */
+ additionalStyles: PropTypes.object,
/**
* You can use a custom element type for this component.
* @default div
- * */
+ */
as: PropTypes.elementType,
+ /**
+ * Custom className
+ */
+ className: PropTypes.string,
+ /**
+ * Popper's `flip` modifier config.
+ * @see https://popper.js.org/docs/v2/modifiers/flip/
+ */
+ flip: PropTypes.boolean,
/**
* A set of popper options and props passed directly to react-popper's Popper component.
+ * @default {}
*/
popperConfig: PropTypes.object,
- /** A `react-transition-group` Transition component used to animate the Message on dismissal. */
+ /**
+ * The DOM event name (click, mousedown, etc) that will close the dropdown
+ * @default click
+ */
+ rootCloseEvent: PropTypes.string,
+ /**
+ * Whether PopperJS should be used
+ * @default true
+ */
+ shouldUsePopper: PropTypes.bool,
+ /**
+ * A `react-transition-group` Transition component used to animate the Message on dismissal.
+ */
transition: elementType,
- /** Custom style */
- additionalStyles: PropTypes.object,
};
const defaultProps = {
};
-const Container = React.forwardRef(({ additionalStyles, ...props }, ref) => {
+const Container = React.forwardRef((props, ref) => {
const {
- className,
+ additionalStyles,
+ as: Component = 'div',
flip,
- rootCloseEvent,
children,
+ className,
popperConfig = {},
- as: Component = 'div',
+ rootCloseEvent,
shouldUsePopper = true,
transition: Transition,
+ ...restProps
} = props;
const context = useContext(DropdownContext);
@@ -64,7 +89,7 @@ const Container = React.forwardRef(({ additionalStyles, ...props }, ref) => {
ref: setContainer,
style: { ...popper.styles, ...additionalStyles },
'aria-labelledby': toggleElement && toggleElement.id,
- ...props,
+ ...restProps,
};
useRootClose(context.containerElement, handleClose, {
clickTrigger: rootCloseEvent,
@@ -77,7 +102,7 @@ const Container = React.forwardRef(({ additionalStyles, ...props }, ref) => {
className={classNames(
'Dropdown-container',
'u-zIndexDropdownContainer u-backgroundWhite u-roundedMedium u-border u-positionAbsolute u-textLeft u-positionLeft u-marginVerticalTiny',
- className && className
+ className && className,
)}
>
{children}
diff --git a/src/components/Message/index.js b/src/components/Message/index.js
index b7c3cee..5e370e0 100644
--- a/src/components/Message/index.js
+++ b/src/components/Message/index.js
@@ -90,21 +90,19 @@ const Message = React.forwardRef((uncontrolledProps, ref) => {
{children}
{dismissible && (
setDismissButtonHover(dismissButtonHover => !dismissButtonHover)}
+ onMouseLeave={() => setDismissButtonHover(dismissButtonHover => !dismissButtonHover)}
+ onClick={handleClose}
+ className={classNames(
+ 'Message-button u-marginRightSmall u-marginTopSmall',
+ dismissButtonHover ? 'u-opacityReset' : 'u-opacityHalf',
+ variantOri.textClassName
+ )}
+ data-testid="message-close"
+ role="button"
+ aria-label="dismiss alert"
>
- setDismissButtonHover(dismissButtonHover => !dismissButtonHover)}
- onMouseLeave={() => setDismissButtonHover(dismissButtonHover => !dismissButtonHover)}
- onClick={handleClose}
- className={classNames(
- 'u-cursorPointer',
- dismissButtonHover ? 'u-opacityReset' : 'u-opacityHalf',
- variantOri.textClassName
- )}
- data-testid="message-close"
- />
+
)}
diff --git a/src/components/Modal/Header.js b/src/components/Modal/Header.js
index 9942b3d..85e2ebf 100644
--- a/src/components/Modal/Header.js
+++ b/src/components/Modal/Header.js
@@ -40,6 +40,7 @@ const Header = React.forwardRef(({ className, children, closeButton, onHide, ...
onMouseLeave={() => setCloseHover(closeHover => !closeHover)}
onClick={handleClick}
data-testid="modal-close-button"
+ aria-label="Close modal"
>
(
+const Toggle = React.forwardRef(({ className, checked, disabled, nonLabel, textLabelOn, textLabelOff, ariaLabel, as: Component = 'button', ...props }, ref) => (