From c8ea5adcfaefa16854f7dbc49b562fd1ca14f0bf Mon Sep 17 00:00:00 2001 From: Joey Harig Date: Mon, 19 Jul 2021 10:44:07 -0600 Subject: [PATCH 1/4] Fixed icon wrapper width --- src/AccountTile/AccountTile-styled.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/AccountTile/AccountTile-styled.js b/src/AccountTile/AccountTile-styled.js index a8744cbb..227f7dea 100644 --- a/src/AccountTile/AccountTile-styled.js +++ b/src/AccountTile/AccountTile-styled.js @@ -32,7 +32,8 @@ const StyledAccountTile = styled.div` background-color: ${props => props.open ? props.theme.palette.offWhite : props.theme.palette.white}; - ${props => props.clickable && + ${props => + props.clickable && css` &:hover { background-color: ${props.theme.palette.offWhite}; @@ -73,7 +74,7 @@ const StyledP = styled(CalciteP)` `; const StyledIconWrapper = styled.span` - width: 48px; + min-width: 48px; display: flex; align-items: center; justify-content: space-between; From 16cf792baf72fef275058b0f8e3723649d507b37 Mon Sep 17 00:00:00 2001 From: Joey Harig Date: Mon, 19 Jul 2021 10:44:20 -0600 Subject: [PATCH 2/4] hideIcons -> hideAuthentication --- src/AccountTile/AccountTile.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/AccountTile/AccountTile.js b/src/AccountTile/AccountTile.js index 5602c081..4fb3be73 100644 --- a/src/AccountTile/AccountTile.js +++ b/src/AccountTile/AccountTile.js @@ -44,7 +44,7 @@ const AccountTile = ({ expiredText, authenticatedText, clickable, - hideIcons, + hideAuthentication, ...other }) => { const [isOpen, setIsOpen] = useState(false); @@ -135,8 +135,8 @@ const AccountTile = ({ - {!hideIcons && ( - + + {!hideAuthentication && ( )} - {actions.length !== 0 && } - - )} + )} + {clickable && actions.length !== 0 && ( + + )} + } > @@ -202,8 +204,8 @@ AccountTile.propTypes = { }), /** Can the time be clicked (false will disable hover effects and pointer events) */ clickable: PropTypes.bool, - /** Should the account tiles be hidden */ - hideIcons: PropTypes.bool + /** Should the account tile authentication be hidden */ + hideAuthentication: PropTypes.bool }; AccountTile.defaultProps = { @@ -213,7 +215,7 @@ AccountTile.defaultProps = { authenticatedText: 'Signed in', expiredText: 'Session expired', clickable: true, - hideIcons: false + hideAuthentication: false }; AccountTile.displayName = 'AccountTile'; From 893ec984b51af50f30c549229e62f9837bf6158d Mon Sep 17 00:00:00 2001 From: Joey Harig Date: Mon, 19 Jul 2021 10:44:27 -0600 Subject: [PATCH 3/4] Updated docs --- src/AccountTile/doc/AccountTile.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/AccountTile/doc/AccountTile.mdx b/src/AccountTile/doc/AccountTile.mdx index b7d9b60c..2f425fce 100644 --- a/src/AccountTile/doc/AccountTile.mdx +++ b/src/AccountTile/doc/AccountTile.mdx @@ -111,7 +111,7 @@ import AccountTile from 'calcite-react/AccountTile'; userThumbnail={placeholders.userThumbnail} orgThumbnail={placeholders.orgThumbnail} clickable={false} - hideIcons={true} + hideAuthentication={true} /> ); } From 0307bf6beca3c75c73befa28da2859b4b0992f8c Mon Sep 17 00:00:00 2001 From: Joey Harig Date: Mon, 19 Jul 2021 11:29:30 -0600 Subject: [PATCH 4/4] Update conditional icon positioning --- src/AccountTile/AccountTile-styled.js | 9 +++++++-- src/AccountTile/AccountTile.js | 9 ++++++--- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/AccountTile/AccountTile-styled.js b/src/AccountTile/AccountTile-styled.js index 227f7dea..d178cd4c 100644 --- a/src/AccountTile/AccountTile-styled.js +++ b/src/AccountTile/AccountTile-styled.js @@ -20,6 +20,7 @@ import { CalciteTheme as theme } from '../CalciteThemeProvider'; // Calcite components import { CalciteP } from '../Elements'; +import HandleVerticalIcon from 'calcite-ui-icons-react/HandleVerticalIcon'; import Avatar from '../Avatar'; const StyledAccountTile = styled.div` @@ -74,7 +75,6 @@ const StyledP = styled(CalciteP)` `; const StyledIconWrapper = styled.span` - min-width: 48px; display: flex; align-items: center; justify-content: space-between; @@ -87,6 +87,10 @@ const StyledTextWrapper = styled.span` overflow: hidden; `; +const StyledHandleVerticalIcon = styled(HandleVerticalIcon)` + margin-left: ${props => (props.marginLeft ? '0.5rem' : '0')}; +`; + export { StyledAccountTile, StyledContentWrapper, @@ -94,5 +98,6 @@ export { StyledOrgAvatar, StyledIconWrapper, StyledTextWrapper, - StyledP + StyledP, + StyledHandleVerticalIcon }; diff --git a/src/AccountTile/AccountTile.js b/src/AccountTile/AccountTile.js index 4fb3be73..f256970d 100644 --- a/src/AccountTile/AccountTile.js +++ b/src/AccountTile/AccountTile.js @@ -20,7 +20,8 @@ import { StyledOrgAvatar, StyledIconWrapper, StyledTextWrapper, - StyledP + StyledP, + StyledHandleVerticalIcon } from './AccountTile-styled'; import Avatar from '../Avatar'; @@ -29,7 +30,6 @@ import { MenuItem } from '../Menu'; import Popover from '../Popover'; import Menu from '../Menu'; -import HandleVerticalIcon from 'calcite-ui-icons-react/HandleVerticalIcon'; import CheckCircleIcon from 'calcite-ui-icons-react/CheckCircleIcon'; import ExclamationMarkTriangleIcon from 'calcite-ui-icons-react/ExclamationMarkTriangleIcon'; @@ -161,7 +161,10 @@ const AccountTile = ({ )} {clickable && actions.length !== 0 && ( - + )}