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 && (
- <>
-
-
- >
- )}
-
-
- {/*
*/}
+
+ }
+