From 396ab95fe69c979bbefae8650246a816669f2653 Mon Sep 17 00:00:00 2001 From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com> Date: Wed, 19 Aug 2020 10:27:31 -0400 Subject: [PATCH] [MM-27305] Card Component Refactor for smoothness (#6172) * Refactor Card component to be more responsive and robust * Cleanup and a couple other bug fixes --- .../card/__snapshots__/card.test.tsx.snap | 43 +++++++++++++- components/card/card.scss | 20 +++++-- components/card/card.test.tsx | 27 +++++---- components/card/card_body.tsx | 37 +++++++----- components/card/card_header.tsx | 1 + .../next_steps_view/next_steps_view.scss | 11 ++-- .../complete_profile_step.test.tsx.snap | 3 - .../complete_profile_step.scss | 2 - .../complete_profile_step.tsx | 31 ++++------ .../invite_members_step.scss | 57 ------------------- .../team_profile_step.test.tsx.snap | 3 - .../team_profile_step/team_profile_step.scss | 7 --- .../team_profile_step/team_profile_step.tsx | 31 ++++------ 13 files changed, 118 insertions(+), 155 deletions(-) diff --git a/components/card/__snapshots__/card.test.tsx.snap b/components/card/__snapshots__/card.test.tsx.snap index bc6393c5b314..61c43e6691eb 100644 --- a/components/card/__snapshots__/card.test.tsx.snap +++ b/components/card/__snapshots__/card.test.tsx.snap @@ -22,7 +22,8 @@ exports[`components/card/card should match snapshot 1`] = ` key=".1" >
`; + +exports[`components/card/card should match snapshot when expanded 1`] = ` + +
+ +
+ Header Test +
+
+ + +
+ Body Test +
+ +
+ +`; diff --git a/components/card/card.scss b/components/card/card.scss index b7981157412b..3ef6d2726753 100644 --- a/components/card/card.scss +++ b/components/card/card.scss @@ -21,6 +21,10 @@ } .Card__header { + hr.Card__hr { + margin: 0 12px; + border-color: rgba(var(--center-channel-color-rgb), 0.08); + } } .Card__body { @@ -28,14 +32,18 @@ height: 0; margin: 0 12px; - transition-duration: 0.3s; - transition-timing-function: ease-in-out; - transition-property: height, margin; + &.expanding { + transition-duration: 0.3s; + transition-timing-function: ease-in-out; + transition-property: height, margin; + } &.expanded { - margin: 0 12px 12px 12px; - padding-top: 12px; - border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.08); + margin: 12px; + } + + &.expanded:not(.expanding) { + height: auto; } } diff --git a/components/card/card.test.tsx b/components/card/card.test.tsx index b9e3fee107fc..cdc3c0aa0887 100644 --- a/components/card/card.test.tsx +++ b/components/card/card.test.tsx @@ -14,28 +14,27 @@ describe('components/card/card', () => { test('should match snapshot', () => { const wrapper = mount( - {'Header Test'} - {'Body Test'} + {'Header Test'} + {'Body Test'} ); expect(wrapper).toMatchSnapshot(); }); - test('should have a height based on content when expanded', () => { + test('should match snapshot when expanded', () => { + const props = { + ...baseProps, + expanded: true, + }; + const wrapper = mount( - - {'Body Test'} - {'Slightly Larger Body Text'} - + + {'Header Test'} + {'Body Test'} + ); - expect(wrapper.find('.Card__body').prop('style')).toHaveProperty('height', ''); - - wrapper.setProps({expanded: true}); - expect(wrapper.find('.Card__body').prop('style')).not.toHaveProperty('height', ''); - - wrapper.setProps({expanded: false}); - expect(wrapper.find('.Card__body').prop('style')).toHaveProperty('height', ''); + expect(wrapper).toMatchSnapshot(); }); }); diff --git a/components/card/card_body.tsx b/components/card/card_body.tsx index 291e3ed66963..79f3c8729459 100644 --- a/components/card/card_body.tsx +++ b/components/card/card_body.tsx @@ -1,38 +1,45 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {useState, useEffect, useRef} from 'react'; +import React, {useState, useEffect} from 'react'; import classNames from 'classnames'; import './card.scss'; export default function CardBody(props: {expanded?: boolean; children: React.ReactNode}) { - const card = useRef(null); - const [height, setHeight] = useState(0); + const [height, setHeight] = useState(0); + const [expanding, setExpanding] = useState(false); + const [expanded, setExpanded] = useState(false); - let hasListener = false; - const onChange = () => setHeight(card.current?.scrollHeight); + const stopExpanding = () => setExpanding(false); - useEffect(() => { - if (hasListener) { - window.removeEventListener('resize', onChange); - } else { - window.addEventListener('resize', onChange); - hasListener = true; + const card = (node: HTMLDivElement) => { + if (node && node.children) { + setHeight(Array.from(node.children).map((child) => child.scrollHeight).reduce((a, b) => a + b, 0)); } - }, []); + }; useEffect(() => { - onChange(); + setExpanding(true); + if (props.expanded) { + setExpanded(true); + } }, [props.expanded]); + useEffect(() => { + if (!props.expanded) { + setExpanded(false); + } + }, [expanding]); + return (
{props.children}
diff --git a/components/card/card_header.tsx b/components/card/card_header.tsx index 52fd2e7c1e2e..69f41400e5db 100644 --- a/components/card/card_header.tsx +++ b/components/card/card_header.tsx @@ -13,6 +13,7 @@ const CardHeader: React.FC = (props: Props) => { return (
{props.children} + {props.expanded &&
}
); }; diff --git a/components/next_steps_view/next_steps_view.scss b/components/next_steps_view/next_steps_view.scss index 14d9bf3f49ae..935a25bd29d6 100644 --- a/components/next_steps_view/next_steps_view.scss +++ b/components/next_steps_view/next_steps_view.scss @@ -12,6 +12,10 @@ height: 100%; width: 100%; transition: left 0.5s ease-in; + overflow-y: auto; + overflow-x: hidden; + display: flex; + flex-direction: column; } .NextStepsView__mainView { @@ -65,6 +69,7 @@ .NextStepsView__header { padding: 32px 40px 24px 40px; display: flex; + flex-grow: 0; } .NextStepsView__header-headerText { @@ -92,6 +97,7 @@ .NextStepsView__body { display: flex; height: 100%; + flex-grow: 1; } .NextStepsView__body-main { @@ -505,11 +511,6 @@ .NextStepsView__body { height: auto; } - - .NextStepsView__viewWrapper { - overflow-y: auto; - overflow-x: hidden; - } } @media screen and (max-width: 1020px) { diff --git a/components/next_steps_view/steps/complete_profile_step/__snapshots__/complete_profile_step.test.tsx.snap b/components/next_steps_view/steps/complete_profile_step/__snapshots__/complete_profile_step.test.tsx.snap index 1d93078b3a4b..6c77a8ecd523 100644 --- a/components/next_steps_view/steps/complete_profile_step/__snapshots__/complete_profile_step.test.tsx.snap +++ b/components/next_steps_view/steps/complete_profile_step/__snapshots__/complete_profile_step.test.tsx.snap @@ -43,9 +43,6 @@ exports[`components/next_steps_view/steps/complete_profile_step should match sna />
-
diff --git a/components/next_steps_view/steps/complete_profile_step/complete_profile_step.scss b/components/next_steps_view/steps/complete_profile_step/complete_profile_step.scss index ec220368e521..fe84b9f38ddd 100644 --- a/components/next_steps_view/steps/complete_profile_step/complete_profile_step.scss +++ b/components/next_steps_view/steps/complete_profile_step/complete_profile_step.scss @@ -16,7 +16,6 @@ .PictureSelector { margin-top: 12px; - min-height: 125px; } } @@ -50,7 +49,6 @@ line-height: 16px; color: var(--error-text); padding: 0 40px; - min-height: 16px; > span { margin-left: 4px; diff --git a/components/next_steps_view/steps/complete_profile_step/complete_profile_step.tsx b/components/next_steps_view/steps/complete_profile_step/complete_profile_step.tsx index 5f1d47bba8d4..b441f85bc802 100644 --- a/components/next_steps_view/steps/complete_profile_step/complete_profile_step.tsx +++ b/components/next_steps_view/steps/complete_profile_step/complete_profile_step.tsx @@ -134,28 +134,17 @@ export default class CompleteProfileStep extends React.PureComponent
- - {this.state.profilePictureError && ( - <> - - - - )} - -
- {/* */} + + } +
-
diff --git a/components/next_steps_view/steps/team_profile_step/team_profile_step.scss b/components/next_steps_view/steps/team_profile_step/team_profile_step.scss index ba54680e2bd4..29a21a2f0438 100644 --- a/components/next_steps_view/steps/team_profile_step/team_profile_step.scss +++ b/components/next_steps_view/steps/team_profile_step/team_profile_step.scss @@ -16,7 +16,6 @@ .PictureSelector { margin-top: 12px; - min-height: 125px; .PictureSelector__image { border-radius: 8px; @@ -64,11 +63,6 @@ .Input_container { margin-top: 28px; } - - // TODO: For URL - // .Input_container:last-child { - // min-height: 80px; - // } } .TeamProfileStep__pictureError { @@ -76,7 +70,6 @@ line-height: 16px; color: var(--error-text); padding: 0 40px; - min-height: 16px; > span { margin-left: 4px; diff --git a/components/next_steps_view/steps/team_profile_step/team_profile_step.tsx b/components/next_steps_view/steps/team_profile_step/team_profile_step.tsx index ece2f387435a..c60709a5845a 100644 --- a/components/next_steps_view/steps/team_profile_step/team_profile_step.tsx +++ b/components/next_steps_view/steps/team_profile_step/team_profile_step.tsx @@ -166,28 +166,17 @@ export default class TeamProfileStep extends React.PureComponent { />
- - {this.state.profilePictureError && ( - <> - - - - )} - -
- {/* */} + + } +