From b565fb594b9adb8f07f5f1d665373cfbec656d74 Mon Sep 17 00:00:00 2001 From: khuctrang Date: Tue, 18 Jan 2022 17:11:38 +0700 Subject: [PATCH 01/24] fix: use bottom aligned avatar for bubble chat --- src/components/BubbleChat/index.js | 257 ++++++++++++++++------------- 1 file changed, 141 insertions(+), 116 deletions(-) diff --git a/src/components/BubbleChat/index.js b/src/components/BubbleChat/index.js index 503538c..a33dab4 100644 --- a/src/components/BubbleChat/index.js +++ b/src/components/BubbleChat/index.js @@ -94,7 +94,7 @@ const typeThemeClassNames = { const typeRadiusClassNames = { inbound: 'u-roundedExtraLarge u-roundedBottomRightNone', - outbound: 'u-roundedExtraLarge u-roundedBottomLeftNone', + outbound: 'u-roundedExtraLarge u-roundedBottomLeftNone', system: 'u-roundedExtraLarge', }; @@ -105,7 +105,63 @@ const BubbleChat = React.forwardRef(({ className, isTyping, text, type, variant, else if (type === 'outbound') variantOri = 'light'; else if (type === 'system') variantOri = 'primaryLight'; } + const context = useMemo(() => ({ type }), [type]); + + const renderTime = () => ( + <> + {type !== 'inbound' &&
} +
+ {time} +
+ {type === 'inbound' &&
} + + ); + + const renderTyping = () => ( +
+
+
+
+
+ ); + + const renderAvatar = (type = 'outbound') => ( +
+ {typeof (avatar) === 'function' + ? avatar() + : + } +
+ ); + return (
-
- {(avatar && type !== 'inbound') && ( -
- { - typeof (avatar) === 'function' ? avatar() : - } -
+
+ {(type !== 'inbound' && avatar) && renderAvatar('outbound')} + {(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} -
- )} - + )} + )}
- {(avatar && (type !== 'outbound' && type !== 'system')) && ( -
- { - typeof (avatar) === 'function' ? avatar() : - } -
- )} + + {((type !== 'outbound' && type !== 'system') && avatar) && renderAvatar('inbound')} + {((type !== 'outbound' && type !== 'system') && !avatar) &&
} + + {time && renderTime()}
From ec7c0b93f96c0789ac73c355700631066e674ef4 Mon Sep 17 00:00:00 2001 From: khuctrang Date: Tue, 18 Jan 2022 17:12:01 +0700 Subject: [PATCH 02/24] fix: make bubble chat image style more predictable --- src/components/BubbleChat/Image.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/BubbleChat/Image.js b/src/components/BubbleChat/Image.js index c09381d..786421d 100644 --- a/src/components/BubbleChat/Image.js +++ b/src/components/BubbleChat/Image.js @@ -10,10 +10,12 @@ const BubbleChatImage = React.forwardRef(({ className, ...props }, ref) => { ref={ref} className={classNames( 'BubbleChat-image', - 'u-marginBottomTiny', (type === 'inbound') && 'u-textRight', className && className )} + style={{ + lineHeight: 0, + }} >
From ea23d0ab872f61f72fcd8ba43ad159c4d3f0df9d Mon Sep 17 00:00:00 2001 From: khuctrang Date: Tue, 18 Jan 2022 17:25:40 +0700 Subject: [PATCH 03/24] fix: add comments for hacky implementation --- src/components/BubbleChat/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/BubbleChat/index.js b/src/components/BubbleChat/index.js index a33dab4..7f9ebe5 100644 --- a/src/components/BubbleChat/index.js +++ b/src/components/BubbleChat/index.js @@ -110,6 +110,7 @@ const BubbleChat = React.forwardRef(({ className, isTyping, text, type, variant, const renderTime = () => ( <> + {/* Empty
to occupy the bottom left corner of grid template */} {type !== 'inbound' &&
}
{time}
+ {/* Empty
to occupy the bottom right corner of grid template */} {type === 'inbound' &&
} ); @@ -185,6 +187,7 @@ const BubbleChat = React.forwardRef(({ className, isTyping, text, type, variant, }} > {(type !== 'inbound' && avatar) && renderAvatar('outbound')} + {/* Empty
to occupy the top left corner of grid template */} {(type !== 'inbound' && !avatar) &&
}
{((type !== 'outbound' && type !== 'system') && avatar) && renderAvatar('inbound')} + {/* Empty
to occupy the top right corner of grid template */} {((type !== 'outbound' && type !== 'system') && !avatar) &&
} {time && renderTime()} From eb8aa2c9872ba439696a79ac9bf84f1feb55c5a2 Mon Sep 17 00:00:00 2001 From: khuctrang Date: Tue, 18 Jan 2022 17:26:03 +0700 Subject: [PATCH 04/24] docs: update CHANGELOG.md --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ae56773..6440a7c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## Release 2.0.4 - Unreleased +### Fixed +* BubbleChat: Use bottom alignment for avatar +* BubbleChat.Image: Set `lineHeight` to `0` to make image in the same baseline with avatar ## Release 2.0.3 - January 18, 2022 ### Fixed * Code base: use absolute imports, rearrange hooks and utils From 1720f7303f016870d6071c7ba275fd2b99fad962 Mon Sep 17 00:00:00 2001 From: khuctrang Date: Tue, 18 Jan 2022 17:57:06 +0700 Subject: [PATCH 05/24] chore: update browserslist --- .browserslistrc | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/.browserslistrc b/.browserslistrc index 8289333..2e8bf2b 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -1,11 +1,12 @@ > 1% ie >= 8 -edge >= 15 +edge >= 16 ie_mob >= 10 -ff >= 45 -chrome >= 45 -safari >= 7 -opera >= 23 -ios >= 7 -android >= 4 +ff >= 52 +chrome >= 57 +safari >= 10.1 +opera >= 44 +ios >= 10.3 +and_uc >= 12.12 +and_chr >= 97 bb >= 10 From a685ec732e7ee7954cda3c0fed6edd8e7a008399 Mon Sep 17 00:00:00 2001 From: khuctrang Date: Tue, 18 Jan 2022 18:02:35 +0700 Subject: [PATCH 06/24] fix: prioritize classnames over inline style --- src/components/BubbleChat/Image.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/BubbleChat/Image.js b/src/components/BubbleChat/Image.js index 786421d..50bc8a2 100644 --- a/src/components/BubbleChat/Image.js +++ b/src/components/BubbleChat/Image.js @@ -10,12 +10,10 @@ const BubbleChatImage = React.forwardRef(({ className, ...props }, ref) => { ref={ref} className={classNames( 'BubbleChat-image', + 'u-lineHeightNone', (type === 'inbound') && 'u-textRight', className && className )} - style={{ - lineHeight: 0, - }} >
From dfc63630ba3833577aee89429e3cc2d0b0bb6f7e Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 19 Jan 2022 10:55:18 +0700 Subject: [PATCH 07/24] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6440a7c..38f34f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ### Fixed * BubbleChat: Use bottom alignment for avatar * BubbleChat.Image: Set `lineHeight` to `0` to make image in the same baseline with avatar + ## Release 2.0.3 - January 18, 2022 ### Fixed * Code base: use absolute imports, rearrange hooks and utils From 9a9a2f93f57b4690e042f4aa5b207f1dec7b3422 Mon Sep 17 00:00:00 2001 From: eric-macpro-2019 Date: Wed, 19 Jan 2022 10:58:20 +0700 Subject: [PATCH 08/24] chore: update alpha version 2.0.4-alpha.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fbd3d41..c91080e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ahaui/react", - "version": "2.0.3", + "version": "2.0.4-alpha.1", "main": "lib/index.js", "module": "es/index.js", "files": [ From 56f5dfc6d9a74c62254133d797c5d95a807dff7c Mon Sep 17 00:00:00 2001 From: khuctrang Date: Wed, 19 Jan 2022 14:48:35 +0700 Subject: [PATCH 09/24] fix: update typing indicator style --- src/components/BubbleChat/index.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/BubbleChat/index.js b/src/components/BubbleChat/index.js index 7f9ebe5..406dee9 100644 --- a/src/components/BubbleChat/index.js +++ b/src/components/BubbleChat/index.js @@ -130,10 +130,14 @@ const BubbleChat = React.forwardRef(({ className, isTyping, text, type, variant, ); const renderTyping = () => ( -
Date: Wed, 19 Jan 2022 14:58:44 +0700 Subject: [PATCH 10/24] chore: update alpha version 2.0.4-alpha.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c91080e..d2660cb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ahaui/react", - "version": "2.0.4-alpha.1", + "version": "2.0.4-alpha.2", "main": "lib/index.js", "module": "es/index.js", "files": [ From 9cc9fb6f2faad27ffaa11d3c30fcdcbb2bdb1484 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguye=CC=82=CC=83n=20Thanh=20So=CC=9Bn?= Date: Wed, 16 Feb 2022 14:37:16 +0700 Subject: [PATCH 11/24] refactor: Add proptypes docs & clean up Dropdown.Container --- src/components/Dropdown/Container.js | 44 +++++++++++++++++++++------- 1 file changed, 34 insertions(+), 10 deletions(-) diff --git a/src/components/Dropdown/Container.js b/src/components/Dropdown/Container.js index 6aa1b36..ad1398c 100644 --- a/src/components/Dropdown/Container.js +++ b/src/components/Dropdown/Container.js @@ -6,21 +6,44 @@ 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 = { @@ -28,12 +51,12 @@ const defaultProps = { const Container = React.forwardRef(({ additionalStyles, ...props }, ref) => { const { - className, + as: Component = 'div', flip, - rootCloseEvent, children, + className, popperConfig = {}, - as: Component = 'div', + rootCloseEvent, shouldUsePopper = true, transition: Transition, } = props; @@ -73,11 +96,11 @@ const Container = React.forwardRef(({ additionalStyles, ...props }, ref) => { const container = ( {children} @@ -85,6 +108,7 @@ const Container = React.forwardRef(({ additionalStyles, ...props }, ref) => { ); if (!Transition) return show ? container : null; return ( + // eslint-disable-next-line react/jsx-props-no-spreading {container} From 3f88b935f17182e4a2be468df6cdb20c9e5f0a78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguye=CC=82=CC=83n=20Thanh=20So=CC=9Bn?= Date: Wed, 16 Feb 2022 14:40:17 +0700 Subject: [PATCH 12/24] fix: Only use compatible props for Container --- src/components/Dropdown/Container.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Dropdown/Container.js b/src/components/Dropdown/Container.js index ad1398c..da43778 100644 --- a/src/components/Dropdown/Container.js +++ b/src/components/Dropdown/Container.js @@ -59,6 +59,7 @@ const Container = React.forwardRef(({ additionalStyles, ...props }, ref) => { rootCloseEvent, shouldUsePopper = true, transition: Transition, + ...restProps } = props; const context = useContext(DropdownContext); @@ -87,7 +88,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, From df17b00523cc2352d4fc06d5da2329922cb4ecda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguye=CC=82=CC=83n=20Thanh=20So=CC=9Bn?= Date: Wed, 16 Feb 2022 14:41:51 +0700 Subject: [PATCH 13/24] refactor: Organize props destructuring assignments --- src/components/Dropdown/Container.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Dropdown/Container.js b/src/components/Dropdown/Container.js index da43778..b8513f9 100644 --- a/src/components/Dropdown/Container.js +++ b/src/components/Dropdown/Container.js @@ -49,8 +49,9 @@ const propTypes = { const defaultProps = { }; -const Container = React.forwardRef(({ additionalStyles, ...props }, ref) => { +const Container = React.forwardRef((props, ref) => { const { + additionalStyles, as: Component = 'div', flip, children, From 1bc6f6d7c26889e06525bd306814da806ac2b3d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguye=CC=82=CC=83n=20Thanh=20So=CC=9Bn?= Date: Wed, 16 Feb 2022 15:03:17 +0700 Subject: [PATCH 14/24] refactor: Format Composer file --- src/components/Composer/index.js | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js index 64c5d7e..5270bc8 100644 --- a/src/components/Composer/index.js +++ b/src/components/Composer/index.js @@ -1,3 +1,5 @@ +/* eslint-disable react/jsx-props-no-spreading */ + import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -6,7 +8,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,29 +62,27 @@ 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 ? ( ( + overlay={(props) => ( {typeof (tooltipAttachButton) === 'function' ? tooltipAttachButton() - : tooltipAttachButton - } + : tooltipAttachButton} )} >
( + overlay={(props) => ( {typeof (tooltipSendButton) === 'function' ? tooltipSendButton() - : tooltipSendButton - } + : tooltipSendButton} )} > @@ -142,7 +140,7 @@ 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', )} style={{ width: 42, @@ -159,7 +157,7 @@ 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', )} style={{ width: 42, From 86a34b625584a5563f47942fb9f497eeb4950d70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguye=CC=82=CC=83n=20Thanh=20So=CC=9Bn?= Date: Wed, 16 Feb 2022 15:12:25 +0700 Subject: [PATCH 15/24] feat: Allow custom styling for Composer from props --- src/components/Composer/index.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js index 5270bc8..cde2b25 100644 --- a/src/components/Composer/index.js +++ b/src/components/Composer/index.js @@ -83,10 +83,12 @@ const Composer = React.forwardRef(({ className, children, sendButtonIcon, iconLe {...attachButtonProps} className={classNames( 'hover:u-backgroundPrimary hover:u-textWhite u-roundedMedium u-flex u-alignItemsCenter u-justifyContentCenter u-cursorPointer', + attachButtonProps.className && attachButtonProps.className, )} style={{ width: 42, height: 42, + ...attachButtonProps.style, }} > )} @@ -141,10 +146,12 @@ const Composer = React.forwardRef(({ className, children, sendButtonIcon, iconLe 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', + sendButtonProps.className && sendButtonProps.className, )} style={{ width: 42, height: 42, + ...sendButtonProps.style, }} > {typeof (sendButtonIcon) === 'function' @@ -158,10 +165,12 @@ const Composer = React.forwardRef(({ className, children, sendButtonIcon, iconLe 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', + sendButtonProps.className && sendButtonProps.className, )} style={{ width: 42, height: 42, + ...sendButtonProps.style, }} > {typeof (sendButtonIcon) === 'function' From 40dd2ca28c0f11202ee1ee32083806717f2b5331 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguye=CC=82=CC=83n=20Thanh=20So=CC=9Bn?= Date: Wed, 16 Feb 2022 16:04:36 +0700 Subject: [PATCH 16/24] style: Remove unnecessary parens --- src/components/Composer/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js index cde2b25..ba4a381 100644 --- a/src/components/Composer/index.js +++ b/src/components/Composer/index.js @@ -71,7 +71,7 @@ const Composer = React.forwardRef(({ className, children, sendButtonIcon, iconLe {tooltipAttachButton ? ( ( + overlay={props => ( {typeof (tooltipAttachButton) === 'function' ? tooltipAttachButton() @@ -133,7 +133,7 @@ const Composer = React.forwardRef(({ className, children, sendButtonIcon, iconLe tooltipSendButton ? ( ( + overlay={props => ( {typeof (tooltipSendButton) === 'function' ? tooltipSendButton() From 1474b56dba8f269c5d866e2fcc1cfe74f9f0ce14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguye=CC=82=CC=83n=20Thanh=20So=CC=9Bn?= Date: Thu, 17 Feb 2022 12:05:10 +0700 Subject: [PATCH 17/24] style: Sort eslint rules by alphanum --- .eslintrc | 71 ++++++++++++++++++++++++++++++++----------------------- 1 file changed, 41 insertions(+), 30 deletions(-) diff --git a/.eslintrc b/.eslintrc index cd6f870..aefdf4c 100644 --- a/.eslintrc +++ b/.eslintrc @@ -8,45 +8,56 @@ }, "extends": "airbnb", "rules": { - "jsx-a11y/label-has-associated-control": 0, - "space-before-function-paren": 0, - "react/prefer-stateless-function": 0, - "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], - "linebreak-style": 0, - "global-require": 0, + "camelcase": 0, + "class-methods-use-this": 0, + "comma-dangle": [ + "error", + "always-multiline" + ], "eol-last": 0, - "comma-dangle": ["error", "always-multiline"], - "spaced-comment": 0, - "react/require-default-props": 0, - "react/forbid-prop-types": 0, - "jsx-a11y/label-has-for": 0, + "function-paren-newline": 0, + "global-require": 0, + "import/extensions": 0, + "import/no-extraneous-dependencies": 0, + "import/no-named-as-default": 0, + "import/no-unresolved": 0, + "import/prefer-default-export": 0, "jsx-a11y/anchor-is-valid": 0, + "jsx-a11y/click-events-have-key-events": 0, "jsx-a11y/href-no-hash": 0, "jsx-a11y/interactive-supports-focus": 0, - "jsx-a11y/click-events-have-key-events": 0, + "jsx-a11y/label-has-associated-control": 0, + "jsx-a11y/label-has-for": 0, "jsx-a11y/mouse-events-have-key-events": 0, "jsx-a11y/no-static-element-interactions": 0, - "react/no-did-mount-set-state": 0, + "linebreak-style": 0, "max-len": 0, - "react/jsx-no-bind": 0, - "class-methods-use-this" :0, - "react/prop-types": 0, + "no-console": 0, + "no-debugger": 0, + "no-multi-assign": 0, + "no-plusplus": 0, + "no-shadow": 0, "no-unused-expressions": 0, - "radix": 0, "object-curly-newline": 0, - "no-console": 0, - "import/no-unresolved": 0, - "import/no-named-as-default": 0, - "import/no-extraneous-dependencies": 0, - "import/extensions": 0, "prefer-destructuring": 0, - "no-multi-assign": 0, - "function-paren-newline": 0, + "radix": 0, + "react/forbid-prop-types": 0, + "react/jsx-filename-extension": [ + 1, + { + "extensions": [ + ".js", + ".jsx" + ] + } + ], + "react/jsx-no-bind": 0, + "react/no-did-mount-set-state": 0, + "react/no-multi-comp": 0, "react/no-unescaped-entities": 0, - "no-debugger": 0, - "no-shadow": 0, - "no-plusplus": 0, - "camelcase": 0, + "react/prefer-stateless-function": 0, + "react/prop-types": 0, + "react/require-default-props": 0, "react/sort-comp": [ 1, { @@ -59,8 +70,8 @@ ] } ], - "react/no-multi-comp": 0, - "import/prefer-default-export": 0 + "space-before-function-paren": 0, + "spaced-comment": 0 }, "globals": { "zE": true, From e117049494bd089b31d137e226391ed4b2303e3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguye=CC=82=CC=83n=20Thanh=20So=CC=9Bn?= Date: Thu, 17 Feb 2022 12:08:11 +0700 Subject: [PATCH 18/24] style: Disable react/jsx-props-no-spreading globally --- .eslintrc | 1 + src/components/Composer/index.js | 2 -- src/components/Dropdown/Container.js | 3 +-- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/.eslintrc b/.eslintrc index aefdf4c..4bdcadc 100644 --- a/.eslintrc +++ b/.eslintrc @@ -52,6 +52,7 @@ } ], "react/jsx-no-bind": 0, + "react/jsx-props-no-spreading": 0, "react/no-did-mount-set-state": 0, "react/no-multi-comp": 0, "react/no-unescaped-entities": 0, diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js index ba4a381..b255b40 100644 --- a/src/components/Composer/index.js +++ b/src/components/Composer/index.js @@ -1,5 +1,3 @@ -/* eslint-disable react/jsx-props-no-spreading */ - import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; diff --git a/src/components/Dropdown/Container.js b/src/components/Dropdown/Container.js index b8513f9..1c37582 100644 --- a/src/components/Dropdown/Container.js +++ b/src/components/Dropdown/Container.js @@ -98,7 +98,7 @@ const Container = React.forwardRef((props, ref) => { const container = ( { ); if (!Transition) return show ? container : null; return ( - // eslint-disable-next-line react/jsx-props-no-spreading {container} From de933ab5d39665811fe4c1d424e019eeaa9ced8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguye=CC=82=CC=83n=20Thanh=20So=CC=9Bn?= Date: Thu, 17 Feb 2022 13:43:53 +0700 Subject: [PATCH 19/24] docs: Update CHANGELOG.md for release 2.0.4 --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 38f34f7..18fd714 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ### Fixed * BubbleChat: Use bottom alignment for avatar * BubbleChat.Image: Set `lineHeight` to `0` to make image in the same baseline with avatar +* Dropdown.Container: Correct extra props that are passed to internal `div`, so incompatible props (such as `popperConfig`) are excluded +* Composer: Allow passing `className` and `style` to `attachButtonProps`, `inputProps`, and `sendButtonProps` ## Release 2.0.3 - January 18, 2022 ### Fixed From a0765653b4bf0c20d5a04ff8a01ab526263f33b0 Mon Sep 17 00:00:00 2001 From: eric-macpro-2019 Date: Thu, 17 Feb 2022 13:48:43 +0700 Subject: [PATCH 20/24] chore: version in main release branch should not be alpha --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d2660cb..29ab22d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ahaui/react", - "version": "2.0.4-alpha.2", + "version": "2.0.4", "main": "lib/index.js", "module": "es/index.js", "files": [ From 898aaf7e20c3d6d38177eef038e2d2c2cf27ea59 Mon Sep 17 00:00:00 2001 From: tinhvqbk Date: Fri, 18 Mar 2022 16:03:38 +0700 Subject: [PATCH 21/24] fix: accessibility close button Modal, Message, Toogle, missing class u-fontMedium on Button --- src/components/Button/index.js | 2 +- src/components/Message/index.js | 26 ++++++++++++-------------- src/components/Modal/Header.js | 1 + src/components/Toggle/index.js | 4 +++- 4 files changed, 17 insertions(+), 16 deletions(-) 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/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..4cc90cd 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) => (
Date: Fri, 18 Mar 2022 16:23:55 +0700 Subject: [PATCH 22/24] updated: CHANGELOG.md --- CHANGELOG.md | 3 ++- src/components/Toggle/index.js | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 18fd714..737903a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,8 @@ * BubbleChat.Image: Set `lineHeight` to `0` to make image in the same baseline with avatar * Dropdown.Container: Correct extra props that are passed to internal `div`, so incompatible props (such as `popperConfig`) are excluded * Composer: Allow passing `className` and `style` to `attachButtonProps`, `inputProps`, and `sendButtonProps` - +* Button: add className `u-fontMedium` to sync value with UI +* Message, Modal, Toggle: add aria-label for accessibility ## Release 2.0.3 - January 18, 2022 ### Fixed * Code base: use absolute imports, rearrange hooks and utils diff --git a/src/components/Toggle/index.js b/src/components/Toggle/index.js index d20244b..557b3bf 100644 --- a/src/components/Toggle/index.js +++ b/src/components/Toggle/index.js @@ -13,6 +13,8 @@ const propTypes = { textLabelOn: PropTypes.string, /** Custom label for the off-state */ textLabelOff: PropTypes.string, + /** Custom aria label for accessibility */ + ariaLabel: PropTypes.string, }; const defaultProps = { From e88e13ff32a9ecba5303e139a734adc3db8e76e6 Mon Sep 17 00:00:00 2001 From: eric-macpro-2019 Date: Wed, 6 Apr 2022 17:44:23 +0700 Subject: [PATCH 23/24] chore: update peer deps for @ahaui/css --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 29ab22d..6edc7f0 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "webpack-node-externals": "1.7.2" }, "peerDependencies": { - "@ahaui/css": "^2.0.4", + "@ahaui/css": "^2", "react": "^16.9.0 || 17.x", "react-dom": "^16.9.0 || 17.x" }, From 45155b76c37dca88379b7222cbd61244accf8b8c Mon Sep 17 00:00:00 2001 From: eric-macpro-2019 Date: Wed, 6 Apr 2022 18:46:29 +0700 Subject: [PATCH 24/24] hotfix: temporarily remove ahaui/css as peer deps --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 6edc7f0..3ae8b50 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,6 @@ "webpack-node-externals": "1.7.2" }, "peerDependencies": { - "@ahaui/css": "^2", "react": "^16.9.0 || 17.x", "react-dom": "^16.9.0 || 17.x" },