From 14182b3f338e09a50abd122695c873fa871a6711 Mon Sep 17 00:00:00 2001 From: Mike Tobia Date: Wed, 5 Jul 2023 15:08:13 -0400 Subject: [PATCH 1/3] fix(accordions): allow dynamic height for stepper content --- packages/accordions/.size-snapshot.json | 16 ++++----- .../elements/stepper/components/Content.tsx | 36 ++----------------- .../src/styled/stepper/StyledContent.ts | 7 +++- .../src/styled/stepper/StyledInnerContent.ts | 2 -- 4 files changed, 16 insertions(+), 45 deletions(-) diff --git a/packages/accordions/.size-snapshot.json b/packages/accordions/.size-snapshot.json index 4fafdad45ed..f654a4f11ed 100644 --- a/packages/accordions/.size-snapshot.json +++ b/packages/accordions/.size-snapshot.json @@ -1,21 +1,21 @@ { "index.esm.js": { - "bundled": 35205, - "minified": 25722, - "gzipped": 5726, + "bundled": 34451, + "minified": 25401, + "gzipped": 5676, "treeshaked": { "rollup": { - "code": 19976, + "code": 19713, "import_statements": 683 }, "webpack": { - "code": 22211 + "code": 21876 } } }, "index.cjs.js": { - "bundled": 38108, - "minified": 28376, - "gzipped": 5959 + "bundled": 37282, + "minified": 27983, + "gzipped": 5909 } } diff --git a/packages/accordions/src/elements/stepper/components/Content.tsx b/packages/accordions/src/elements/stepper/components/Content.tsx index a414cc5087b..97772052d55 100644 --- a/packages/accordions/src/elements/stepper/components/Content.tsx +++ b/packages/accordions/src/elements/stepper/components/Content.tsx @@ -5,51 +5,19 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import React, { forwardRef, useRef, useEffect, useContext, HTMLAttributes } from 'react'; -import mergeRefs from 'react-merge-refs'; -import debounce from 'lodash.debounce'; -import { ThemeContext } from 'styled-components'; -import { useDocument } from '@zendeskgarden/react-theming'; +import React, { forwardRef, HTMLAttributes } from 'react'; import { StyledContent, StyledInnerContent } from '../../../styled'; import { useStepContext, useStepperContext } from '../../../utils'; const ContentComponent = forwardRef>( (props, ref) => { - const contentRef = useRef(); const { activeIndex, isHorizontal } = useStepperContext(); const { currentStepIndex } = useStepContext(); const isActive = currentStepIndex === activeIndex; - const theme = useContext(ThemeContext); - const environment = useDocument(theme); - - useEffect(() => { - if (environment && isActive && isHorizontal === false) { - const win = environment.defaultView! || window; - - const updateMaxHeight = debounce(() => { - if (contentRef.current) { - const child = contentRef.current.children[0] as any; - - child.style.maxHeight = `${child.scrollHeight}px`; - } - }, 100); - - win.addEventListener('resize', updateMaxHeight); - updateMaxHeight(); - - return () => { - updateMaxHeight.cancel(); - win.removeEventListener('resize', updateMaxHeight); - }; - } - - return undefined; - }, [isActive, isHorizontal, contentRef, environment]); - return isHorizontal === false ? ( - + {props.children} diff --git a/packages/accordions/src/styled/stepper/StyledContent.ts b/packages/accordions/src/styled/stepper/StyledContent.ts index fcea2487c8d..0b9b222e059 100644 --- a/packages/accordions/src/styled/stepper/StyledContent.ts +++ b/packages/accordions/src/styled/stepper/StyledContent.ts @@ -33,10 +33,15 @@ export const StyledContent = styled.div.attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${sizeStyles} + display: grid; + grid-template-rows: ${props => (props.isActive ? 1 : 0)}fr; + transition: grid-template-rows 0.25s ease-in-out; min-width: ${props => props.theme.space.base * 30}px; + height: auto; word-break: break-word; + ${sizeStyles} + ${props => retrieveComponentStyles(COMPONENT_ID, props)}; `; diff --git a/packages/accordions/src/styled/stepper/StyledInnerContent.ts b/packages/accordions/src/styled/stepper/StyledInnerContent.ts index 5404873c7a3..5ff41e85994 100644 --- a/packages/accordions/src/styled/stepper/StyledInnerContent.ts +++ b/packages/accordions/src/styled/stepper/StyledInnerContent.ts @@ -22,9 +22,7 @@ export const StyledInnerContent = styled.div.attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - transition: max-height 0.25s ease-in-out; overflow: hidden; - max-height: ${props => !props.isActive && '0 !important'}; /* stylelint-disable-line */ line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)}; color: ${props => props.theme.colors.foreground}; font-size: ${props => props.theme.fontSizes.md}; From 63c440d16303d8ff64365299445630c0935cb1e8 Mon Sep 17 00:00:00 2001 From: Mike Tobia Date: Thu, 6 Jul 2023 16:12:41 -0400 Subject: [PATCH 2/3] fix: remove unused --- packages/accordions/.size-snapshot.json | 16 ++++++++-------- .../src/elements/stepper/components/Content.tsx | 4 +--- .../src/styled/stepper/StyledInnerContent.ts | 10 +++------- 3 files changed, 12 insertions(+), 18 deletions(-) diff --git a/packages/accordions/.size-snapshot.json b/packages/accordions/.size-snapshot.json index f654a4f11ed..0325bace151 100644 --- a/packages/accordions/.size-snapshot.json +++ b/packages/accordions/.size-snapshot.json @@ -1,21 +1,21 @@ { "index.esm.js": { - "bundled": 34451, - "minified": 25401, - "gzipped": 5676, + "bundled": 34427, + "minified": 25390, + "gzipped": 5674, "treeshaked": { "rollup": { - "code": 19713, + "code": 19702, "import_statements": 683 }, "webpack": { - "code": 21876 + "code": 21865 } } }, "index.cjs.js": { - "bundled": 37282, - "minified": 27983, - "gzipped": 5909 + "bundled": 37258, + "minified": 27972, + "gzipped": 5907 } } diff --git a/packages/accordions/src/elements/stepper/components/Content.tsx b/packages/accordions/src/elements/stepper/components/Content.tsx index 97772052d55..b0508dc99b7 100644 --- a/packages/accordions/src/elements/stepper/components/Content.tsx +++ b/packages/accordions/src/elements/stepper/components/Content.tsx @@ -18,9 +18,7 @@ const ContentComponent = forwardRef - - {props.children} - + {props.children} ) : null; } diff --git a/packages/accordions/src/styled/stepper/StyledInnerContent.ts b/packages/accordions/src/styled/stepper/StyledInnerContent.ts index 5ff41e85994..3daa89f050a 100644 --- a/packages/accordions/src/styled/stepper/StyledInnerContent.ts +++ b/packages/accordions/src/styled/stepper/StyledInnerContent.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled from 'styled-components'; +import styled, { ThemeProps, DefaultTheme } from 'styled-components'; import { getLineHeight, retrieveComponentStyles, @@ -14,14 +14,10 @@ import { const COMPONENT_ID = 'accordions.step_inner_content'; -interface IStyledInnerContent { - isActive?: boolean; -} - -export const StyledInnerContent = styled.div.attrs({ +export const StyledInnerContent = styled.div.attrs>({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION -})` +})` overflow: hidden; line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)}; color: ${props => props.theme.colors.foreground}; From d9f6945acd12580c31f12be93e6a0c79b0b7118e Mon Sep 17 00:00:00 2001 From: Mike Tobia Date: Mon, 10 Jul 2023 16:56:44 -0400 Subject: [PATCH 3/3] fix: address feedback --- packages/accordions/.size-snapshot.json | 16 ++++++++-------- .../src/styled/stepper/StyledContent.ts | 4 ++-- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/accordions/.size-snapshot.json b/packages/accordions/.size-snapshot.json index 0325bace151..61ff3a660e0 100644 --- a/packages/accordions/.size-snapshot.json +++ b/packages/accordions/.size-snapshot.json @@ -1,21 +1,21 @@ { "index.esm.js": { - "bundled": 34427, - "minified": 25390, - "gzipped": 5674, + "bundled": 34406, + "minified": 25373, + "gzipped": 5671, "treeshaked": { "rollup": { - "code": 19702, + "code": 19685, "import_statements": 683 }, "webpack": { - "code": 21865 + "code": 21848 } } }, "index.cjs.js": { - "bundled": 37258, - "minified": 27972, - "gzipped": 5907 + "bundled": 37237, + "minified": 27955, + "gzipped": 5905 } } diff --git a/packages/accordions/src/styled/stepper/StyledContent.ts b/packages/accordions/src/styled/stepper/StyledContent.ts index 0b9b222e059..dfd35ed65af 100644 --- a/packages/accordions/src/styled/stepper/StyledContent.ts +++ b/packages/accordions/src/styled/stepper/StyledContent.ts @@ -26,6 +26,8 @@ const sizeStyles = (props: IStyledContent & ThemeProps) => { return css` margin: ${marginVertical}px ${marginRight}px ${marginVertical}px ${marginLeft}px; padding: 0 ${paddingRight}px ${paddingBottom}px ${paddingLeft}px; + min-width: ${space.base * 30}px; + height: auto; `; }; @@ -36,8 +38,6 @@ export const StyledContent = styled.div.attrs({ display: grid; grid-template-rows: ${props => (props.isActive ? 1 : 0)}fr; transition: grid-template-rows 0.25s ease-in-out; - min-width: ${props => props.theme.space.base * 30}px; - height: auto; word-break: break-word; ${sizeStyles}