experiment: conditional fit-height containers

cloudscape-design · Jul 20, 2023 · 0008314 · 0008314
1 parent c305a5a
commit 0008314
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 52 deletions.
diff --git a/src/internal/components/cartesian-chart/chart-container.tsx b/src/internal/components/cartesian-chart/chart-container.tsx
@@ -30,23 +30,43 @@ export const CartesianChartContainer = forwardRef(
     }: CartesianChartContainerProps,
     ref: React.Ref<HTMLDivElement>
   ) => {
-    const withFitHeight = (className: string) => clsx(className, fitHeight && styles['fit-height']);
+    if (fitHeight) {
+      return (
+        <div className={clsx(styles['chart-container'], styles['fit-height'])} ref={ref}>
+          {leftAxisLabel}
+
+          <div className={clsx(styles['chart-container-outer'], styles['fit-height'])}>
+            {leftAxisLabelMeasure}
+
+            <div className={styles['chart-container-inner']}>
+              <div
+                className={clsx(styles['chart-container-plot-wrapper'], styles['fit-height'])}
+                style={{ minHeight: Math.max(minHeight, CONTENT_MIN_HEIGHT_BOUNDARY) }}
+              >
+                <div className={clsx(styles['chart-container-plot'], styles['fit-height'])}>{chartPlot}</div>
+              </div>
+
+              <div className={clsx(styles['chart-container-bottom-labels'], styles['fit-height'])}>
+                {bottomAxisLabel}
+              </div>
+            </div>
+
+            {popover}
+          </div>
+        </div>
+      );
+    }
+
     return (
-      <div className={withFitHeight(styles['chart-container'])} ref={ref}>
+      <div className={styles['chart-container']} ref={ref}>
         {leftAxisLabel}
 
-        <div className={withFitHeight(styles['chart-container-outer'])}>
+        <div className={styles['chart-container-outer']}>
           {leftAxisLabelMeasure}
 
           <div className={styles['chart-container-inner']}>
-            <div
-              className={withFitHeight(styles['chart-container-plot-wrapper'])}
-              style={{ minHeight: Math.max(minHeight, CONTENT_MIN_HEIGHT_BOUNDARY) }}
-            >
-              <div className={withFitHeight(styles['chart-container-plot'])}>{chartPlot}</div>
-            </div>
-
-            <div className={withFitHeight(styles['chart-container-bottom-labels'])}>{bottomAxisLabel}</div>
+            {chartPlot}
+            {bottomAxisLabel}
           </div>
 
           {popover}

diff --git a/src/internal/components/cartesian-chart/styles.scss b/src/internal/components/cartesian-chart/styles.scss
@@ -137,8 +137,6 @@
 }
 
 .chart-container-plot-wrapper {
-  display: contents;
-
   &.fit-height {
     display: block;
     position: relative;
@@ -147,8 +145,6 @@
 }
 
 .chart-container-plot {
-  display: contents;
-
   &.fit-height {
     display: block;
     position: absolute;
@@ -160,8 +156,6 @@
 }
 
 .chart-container-bottom-labels {
-  display: contents;
-
   &.fit-height {
     display: block;
   }

diff --git a/src/internal/components/chart-wrapper/index.tsx b/src/internal/components/chart-wrapper/index.tsx
@@ -42,43 +42,66 @@ export const ChartWrapper = forwardRef(
     ref: React.Ref<HTMLDivElement>
   ) => {
     const baseProps = getBaseProps(props);
-    return (
-      <div
-        ref={ref}
-        {...baseProps}
-        className={clsx(baseProps.className, styles.wrapper, fitHeight && styles['wrapper--fit-height'])}
-        onBlur={onBlur}
-      >
-        <div className={clsx(styles['inner-wrapper'], fitHeight && styles['inner-wrapper--fit-height'])}>
-          {(defaultFilter || additionalFilters) && (
-            <InternalBox className={styles['filter-container']} margin={{ bottom: 'l' }}>
-              <InternalSpaceBetween
-                size="l"
-                direction="horizontal"
-                className={clsx({ [styles['has-default-filter']]: !!defaultFilter })}
-              >
-                {defaultFilter}
-                {additionalFilters}
-              </InternalSpaceBetween>
-            </InternalBox>
-          )}
 
-          <div
-            className={clsx(styles.content, contentClassName, {
-              [styles['content--reserve-filter']]: reserveFilterSpace,
-              [styles['content--reserve-legend']]: reserveLegendSpace,
-              [styles['content--fit-height']]: fitHeight,
-            })}
-            style={{
-              minHeight: !fitHeight ? contentMinHeight : undefined,
-            }}
-          >
-            {chartStatus}
-            {chart}
+    const filtersNode = (defaultFilter || additionalFilters) && (
+      <InternalBox className={styles['filter-container']} margin={{ bottom: 'l' }}>
+        <InternalSpaceBetween
+          size="l"
+          direction="horizontal"
+          className={clsx({ [styles['has-default-filter']]: !!defaultFilter })}
+        >
+          {defaultFilter}
+          {additionalFilters}
+        </InternalSpaceBetween>
+      </InternalBox>
+    );
+
+    const legendNode = legend && <InternalBox margin={{ top: 'm' }}>{legend}</InternalBox>;
+
+    if (fitHeight) {
+      return (
+        <div
+          ref={ref}
+          {...baseProps}
+          className={clsx(baseProps.className, styles.wrapper, styles['wrapper--fit-height'])}
+          onBlur={onBlur}
+        >
+          <div className={clsx(styles['inner-wrapper'], styles['inner-wrapper--fit-height'])}>
+            {filtersNode}
+
+            <div
+              className={clsx(styles.content, contentClassName, {
+                [styles['content--reserve-filter']]: reserveFilterSpace,
+                [styles['content--reserve-legend']]: reserveLegendSpace,
+                [styles['content--fit-height']]: true,
+              })}
+            >
+              {chartStatus}
+              {chart}
+            </div>
+
+            {legendNode}
           </div>
+        </div>
+      );
+    }
 
-          {legend && <InternalBox margin={{ top: 'm' }}>{legend}</InternalBox>}
+    return (
+      <div ref={ref} {...baseProps} className={clsx(baseProps.className, styles.wrapper)} onBlur={onBlur}>
+        {filtersNode}
+
+        <div
+          className={clsx(styles.content, contentClassName, {
+            [styles['content--reserve-filter']]: reserveFilterSpace,
+            [styles['content--reserve-legend']]: reserveLegendSpace,
+          })}
+          style={{ minHeight: contentMinHeight }}
+        >
+          {chartStatus}
+          {chart}
         </div>
+
+        {legendNode}
       </div>
     );
   }

diff --git a/src/internal/components/chart-wrapper/styles.scss b/src/internal/components/chart-wrapper/styles.scss
@@ -18,8 +18,6 @@
 }
 
 .inner-wrapper {
-  display: contents;
-
   &--fit-height {
     display: flex;
     flex-direction: column;