From 1ccb1318468e04159cc33dc8919d27a11947bd87 Mon Sep 17 00:00:00 2001 From: Hans Date: Thu, 10 Aug 2023 16:09:42 +0700 Subject: [PATCH 1/4] update hover color for lounge access icon --- src/components/Icon/Expensicons.js | 2 +- src/components/Icon/index.js | 14 +++- src/components/Icon/svgs/LoungeAccessIcon.js | 76 ++++++++++++++++++++ src/components/MenuItem.js | 2 + src/styles/themes/default.js | 1 + 5 files changed, 93 insertions(+), 2 deletions(-) create mode 100644 src/components/Icon/svgs/LoungeAccessIcon.js diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index b0c1d5a9249c..fdfda852ba5c 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -61,7 +61,7 @@ import Keyboard from '../../../assets/images/keyboard.svg'; import Link from '../../../assets/images/link.svg'; import LinkCopy from '../../../assets/images/link-copy.svg'; import Lock from '../../../assets/images/lock.svg'; -import LoungeAccess from '../../../assets/images/lounge-access.svg'; +import LoungeAccess from './svgs/LoungeAccessIcon'; import Luggage from '../../../assets/images/luggage.svg'; import MagnifyingGlass from '../../../assets/images/magnifying-glass.svg'; import Mail from '../../../assets/images/mail.svg'; diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index 8c6559451215..cf138aadb873 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -1,9 +1,9 @@ import React, {PureComponent} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; -import styles from '../../styles/styles'; import themeColors from '../../styles/themes/default'; import variables from '../../styles/variables'; +import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; import IconWrapperStyles from './IconWrapperStyles'; @@ -26,6 +26,12 @@ const propTypes = { /** Is inline icon */ inline: PropTypes.bool, + /** Is icon hovered */ + isHovered: PropTypes.bool, + + /** Is icon pressed */ + isPressed: PropTypes.bool, + // eslint-disable-next-line react/forbid-prop-types additionalStyles: PropTypes.arrayOf(PropTypes.object), }; @@ -37,6 +43,8 @@ const defaultProps = { small: false, inline: false, additionalStyles: [], + isHovered: false, + isPressed: false, }; // We must use a class component to create an animatable component with the Animated API @@ -58,6 +66,8 @@ class Icon extends PureComponent { width={width} height={height} fill={this.props.fill} + isHovered={this.props.isHovered} + isPressed={this.props.isPressed} /> @@ -73,6 +83,8 @@ class Icon extends PureComponent { width={width} height={height} fill={this.props.fill} + isHovered={this.props.isHovered} + isPressed={this.props.isPressed} /> ); diff --git a/src/components/Icon/svgs/LoungeAccessIcon.js b/src/components/Icon/svgs/LoungeAccessIcon.js new file mode 100644 index 000000000000..9759b38c65d6 --- /dev/null +++ b/src/components/Icon/svgs/LoungeAccessIcon.js @@ -0,0 +1,76 @@ +import * as React from "react"; +import Svg, { G, Path, Polygon } from "react-native-svg"; +import PropTypes from 'prop-types'; +import themeColors from '../../../styles/themes/default'; +import variables from '../../../styles/variables'; + +const propTypes = { + /** The width of the icon. */ + width: PropTypes.number, + + /** The height of the icon. */ + height: PropTypes.number, + + /** The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue'. */ + fill: PropTypes.string, + + /** Is icon hovered */ + isHovered: PropTypes.bool, + + /** Is icon pressed */ + isPressed: PropTypes.bool, +}; + +const defaultProps = { + width: variables.iconSizeNormal, + height: variables.iconSizeNormal, + fill: themeColors.icon, + isHovered: false, + isPressed: false, +}; + +function LoungeAccessIcon(props) { + return ( + + + + + + + + + + + + + ) +} + +LoungeAccessIcon.displayName = "LoungeAccessIcon"; +LoungeAccessIcon.propTypes = propTypes; +LoungeAccessIcon.defaultProps = defaultProps; + +export default LoungeAccessIcon; diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index c280a75a8ef3..c3fc3539444a 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -161,6 +161,8 @@ const MenuItem = React.forwardRef((props, ref) => { {props.iconType === CONST.ICON_TYPE_ICON && ( Date: Thu, 10 Aug 2023 16:19:01 +0700 Subject: [PATCH 2/4] fix linting --- src/components/Icon/index.js | 2 +- src/components/Icon/svgs/LoungeAccessIcon.js | 17 ++++++++++------- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index cf138aadb873..8b33afa73ece 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -28,7 +28,7 @@ const propTypes = { /** Is icon hovered */ isHovered: PropTypes.bool, - + /** Is icon pressed */ isPressed: PropTypes.bool, diff --git a/src/components/Icon/svgs/LoungeAccessIcon.js b/src/components/Icon/svgs/LoungeAccessIcon.js index 9759b38c65d6..005071d28cc0 100644 --- a/src/components/Icon/svgs/LoungeAccessIcon.js +++ b/src/components/Icon/svgs/LoungeAccessIcon.js @@ -1,5 +1,5 @@ -import * as React from "react"; -import Svg, { G, Path, Polygon } from "react-native-svg"; +import * as React from 'react'; +import Svg, {G, Path, Polygon} from 'react-native-svg'; import PropTypes from 'prop-types'; import themeColors from '../../../styles/themes/default'; import variables from '../../../styles/variables'; @@ -16,7 +16,7 @@ const propTypes = { /** Is icon hovered */ isHovered: PropTypes.bool, - + /** Is icon pressed */ isPressed: PropTypes.bool, }; @@ -39,7 +39,7 @@ function LoungeAccessIcon(props) { y="0px" viewBox="0 0 40 40" style={{ - enableBackground: "new 0 0 40 40", + enableBackground: 'new 0 0 40 40', }} xmlSpace="preserve" // eslint-disable-next-line react/jsx-props-no-spreading @@ -57,7 +57,10 @@ function LoungeAccessIcon(props) { className="st1" d="M31,9.8c-0.1-0.2-0.2-0.4-0.5-0.4h-2.1l-0.8-2C27.4,7,27.1,7,27,7c-0.1,0-0.4,0-0.6,0.4l-0.8,1.9h-2.1 c-0.4,0-0.5,0.4-0.5,0.4c0,0.1-0.1,0.4,0.1,0.6l1.6,1.8l-0.6,1.9c-0.1,0.3,0.1,0.5,0.2,0.7c0.1,0,0.3,0.2,0.7,0.1l2-1.1l2,1.2 c0.3,0.2,0.6,0,0.7-0.1c0.1-0.1,0.3-0.3,0.2-0.7l-0.6-2l1.5-1.7C31,10.3,31,10,31,9.8z" /> - + - ) + ); } -LoungeAccessIcon.displayName = "LoungeAccessIcon"; +LoungeAccessIcon.displayName = 'LoungeAccessIcon'; LoungeAccessIcon.propTypes = propTypes; LoungeAccessIcon.defaultProps = defaultProps; From 5ea39f26b67141fa8c0330e6e4e65daa1b3b0f95 Mon Sep 17 00:00:00 2001 From: Hans Date: Fri, 11 Aug 2023 15:14:21 +0700 Subject: [PATCH 3/4] fix warning and remove unused icon --- assets/images/lounge-access.svg | 23 -------------------- src/components/Icon/index.js | 8 +++---- src/components/Icon/svgs/LoungeAccessIcon.js | 19 +++++----------- src/components/MenuItem.js | 4 ++-- 4 files changed, 11 insertions(+), 43 deletions(-) delete mode 100644 assets/images/lounge-access.svg diff --git a/assets/images/lounge-access.svg b/assets/images/lounge-access.svg deleted file mode 100644 index 3be9ff00fb7a..000000000000 --- a/assets/images/lounge-access.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index 8b33afa73ece..6e8eab738ab4 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -66,8 +66,8 @@ class Icon extends PureComponent { width={width} height={height} fill={this.props.fill} - isHovered={this.props.isHovered} - isPressed={this.props.isPressed} + hovered={this.props.isHovered.toString()} + pressed={this.props.isPressed.toString()} /> @@ -83,8 +83,8 @@ class Icon extends PureComponent { width={width} height={height} fill={this.props.fill} - isHovered={this.props.isHovered} - isPressed={this.props.isPressed} + hovered={this.props.isHovered.toString()} + pressed={this.props.isPressed.toString()} /> ); diff --git a/src/components/Icon/svgs/LoungeAccessIcon.js b/src/components/Icon/svgs/LoungeAccessIcon.js index 005071d28cc0..b00fbb312c85 100644 --- a/src/components/Icon/svgs/LoungeAccessIcon.js +++ b/src/components/Icon/svgs/LoungeAccessIcon.js @@ -2,31 +2,22 @@ import * as React from 'react'; import Svg, {G, Path, Polygon} from 'react-native-svg'; import PropTypes from 'prop-types'; import themeColors from '../../../styles/themes/default'; -import variables from '../../../styles/variables'; const propTypes = { - /** The width of the icon. */ - width: PropTypes.number, - - /** The height of the icon. */ - height: PropTypes.number, - /** The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue'. */ fill: PropTypes.string, /** Is icon hovered */ - isHovered: PropTypes.bool, + hovered: PropTypes.string, /** Is icon pressed */ - isPressed: PropTypes.bool, + pressed: PropTypes.string, }; const defaultProps = { - width: variables.iconSizeNormal, - height: variables.iconSizeNormal, fill: themeColors.icon, - isHovered: false, - isPressed: false, + hovered: 'false', + pressed: 'false', }; function LoungeAccessIcon(props) { @@ -53,7 +44,7 @@ function LoungeAccessIcon(props) { diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index c3fc3539444a..c27079a6215d 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -161,8 +161,8 @@ const MenuItem = React.forwardRef((props, ref) => { {props.iconType === CONST.ICON_TYPE_ICON && ( Date: Fri, 11 Aug 2023 15:41:55 +0700 Subject: [PATCH 4/4] change icon props name --- src/components/Icon/index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index 6e8eab738ab4..5cdd5c79704d 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -27,10 +27,10 @@ const propTypes = { inline: PropTypes.bool, /** Is icon hovered */ - isHovered: PropTypes.bool, + hovered: PropTypes.bool, /** Is icon pressed */ - isPressed: PropTypes.bool, + pressed: PropTypes.bool, // eslint-disable-next-line react/forbid-prop-types additionalStyles: PropTypes.arrayOf(PropTypes.object), @@ -43,8 +43,8 @@ const defaultProps = { small: false, inline: false, additionalStyles: [], - isHovered: false, - isPressed: false, + hovered: false, + pressed: false, }; // We must use a class component to create an animatable component with the Animated API @@ -66,8 +66,8 @@ class Icon extends PureComponent { width={width} height={height} fill={this.props.fill} - hovered={this.props.isHovered.toString()} - pressed={this.props.isPressed.toString()} + hovered={this.props.hovered.toString()} + pressed={this.props.pressed.toString()} /> @@ -83,8 +83,8 @@ class Icon extends PureComponent { width={width} height={height} fill={this.props.fill} - hovered={this.props.isHovered.toString()} - pressed={this.props.isPressed.toString()} + hovered={this.props.hovered.toString()} + pressed={this.props.pressed.toString()} /> );