fix: Increase space between chart popover list items (#1877)

cloudscape-design · Jan 12, 2024 · 9f65ea4 · 9f65ea4
1 parent 6b715e1
commit 9f65ea4
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/internal/components/chart-series-details/index.tsx b/src/internal/components/chart-series-details/index.tsx
@@ -37,12 +37,13 @@ export interface ChartSeriesDetailsProps extends BaseComponentProps {
   expandedSeries?: ExpandedSeries;
   setPopoverText?: (s: string) => void;
   setExpandedState?: (seriesTitle: string, state: boolean) => void;
+  compactList?: boolean;
 }
 
 export default memo(forwardRef(ChartSeriesDetails));
 
 function ChartSeriesDetails(
-  { details, expandedSeries, setPopoverText, setExpandedState, ...restProps }: ChartSeriesDetailsProps,
+  { details, expandedSeries, setPopoverText, setExpandedState, compactList, ...restProps }: ChartSeriesDetailsProps,
   ref: React.Ref<HTMLDivElement>
 ) {
   const baseProps = getBaseProps(restProps);
@@ -67,7 +68,7 @@ function ChartSeriesDetails(
 
   return (
     <div {...baseProps} className={className} ref={mergedRef}>
-      <ul className={styles.list}>
+      <ul className={clsx(styles.list, compactList && styles.compact)}>
         {details.map(({ key, value, markerType, color, isDimmed, subItems, expandableId }, index) => (
           <li
             key={index}

diff --git a/src/internal/components/chart-series-details/styles.scss b/src/internal/components/chart-series-details/styles.scss
@@ -71,6 +71,11 @@ $font-weight-bold: awsui.$font-weight-heading-s;
   }
 }
 
+.list:not(.compact) > .list-item:not(:first-child),
+.inner-list-item {
+  margin-top: awsui.$space-scaled-xxs;
+}
+
 .list-item.with-sub-items:not(.expandable) > .key-value-pair {
   > .key,
   > .value {

diff --git a/src/pie-chart/pie-chart.tsx b/src/pie-chart/pie-chart.tsx
@@ -124,7 +124,7 @@ export default <T extends PieChartProps.Datum>({
   const detailFunction = detailPopoverContent || defaultDetails(i18n, i18nStrings);
   const details = popoverData ? detailFunction(popoverData.datum, dataSum) : [];
   const popoverContentRef = useRef<HTMLDivElement | null>(null);
-  const popoverContent = popoverData && <SeriesDetails details={details} ref={popoverContentRef} />;
+  const popoverContent = popoverData && <SeriesDetails details={details} compactList={true} ref={popoverContentRef} />;
 
   const popoverDismissedRecently = useRef(false);
   const escapePressed = useRef(false);