Color option layout updates - set left color to 1/4 of modal width, with min width at 330px

Author: cnathe

packages/components/src/internal/components/chart/ChartColorInputs.tsx

@@ -128,6 +128,7 @@ export const ChartColorInputs: FC<ChartColorInputsProps> = memo(({ chartConfig,
     const colorPaletteScale = chartConfig.geomOptions.colorPaletteScale;
     const showColorPaletteScale = useMemo(() => showColorOption(chartConfig, 'colorPaletteScale'), [chartConfig]);
     const showSeriesLineStyle = isLinePlot && chartConfig.measures?.series !== undefined;
+    const showAnyColorOptions = showBoxFillColor || showLineColor || showPointFillColor;
 
     const setGeomOptions = useCallback(
         options => {
@@ -177,37 +178,35 @@ export const ChartColorInputs: FC<ChartColorInputsProps> = memo(({ chartConfig,
 
     return (
         <>
-            {showBoxFillColor && (
+            {showAnyColorOptions && (
                 <div className="form-group row">
-                    <div className="col-xs-12">
-                        <label>Fill Color</label>
-                        <ColorPickerInput
-                            allowRemove={isBoxPlot}
-                            name="boxFillColor"
-                            onChange={onBoxFillColorChange}
-                            value={boxFillColor}
-                        />
-                    </div>
-                </div>
-            )}
-            {showLineColor && (
-                <div className="form-group row">
-                    <div className="col-xs-12">
-                        <label>Line Color</label>
-                        <ColorPickerInput name="lineColor" onChange={onLineColorChange} value={lineColor} />
-                    </div>
-                </div>
-            )}
-            {showPointFillColor && (
-                <div className="form-group row">
-                    <div className="col-xs-12">
-                        <label>{isLinePlot ? '' : 'Point '}Color</label>
-                        <ColorPickerInput
-                            name="pointFillColor"
-                            onChange={onPointFillColorChange}
-                            value={pointFillColor}
-                        />
-                    </div>
+                    {showBoxFillColor && (
+                        <div className="col-xs-4">
+                            <label>Fill Color</label>
+                            <ColorPickerInput
+                                allowRemove={isBoxPlot}
+                                name="boxFillColor"
+                                onChange={onBoxFillColorChange}
+                                value={boxFillColor}
+                            />
+                        </div>
+                    )}
+                    {showLineColor && (
+                        <div className="col-xs-4">
+                            <label>Line Color</label>
+                            <ColorPickerInput name="lineColor" onChange={onLineColorChange} value={lineColor} />
+                        </div>
+                    )}
+                    {showPointFillColor && (
+                        <div className="col-xs-4">
+                            <label>{isLinePlot ? '' : 'Point '}Color</label>
+                            <ColorPickerInput
+                                name="pointFillColor"
+                                onChange={onPointFillColorChange}
+                                value={pointFillColor}
+                            />
+                        </div>
+                    )}
                 </div>
             )}
             {showColorPaletteScale && (
@@ -363,7 +362,7 @@ export const SeriesLineStyleInput: FC<SeriesLineStyleInputProps> = memo(({ chart
             </div>
             {selectedSeries && (
                 <div className="row">
-                    <div className="col-xs-6">
+                    <div className="col-xs-4">
                         <div>Color</div>
                         <ColorPickerInput
                             allowRemove
@@ -372,7 +371,7 @@ export const SeriesLineStyleInput: FC<SeriesLineStyleInputProps> = memo(({ chart
                             value={seriesOptionMap[selectedSeries]?.color}
                         />
                     </div>
-                    <div className="col-xs-6">
+                    <div className="col-xs-8">
                         <div>Shape</div>
                         <SelectInput
                             clearable={false}

packages/components/src/theme/charts.scss

@@ -206,14 +206,14 @@
 
 .lk-modal .chart-builder-modal .modal-body {
     display: flex;
-    flex: 1;
     gap: 8px;
     padding: 0;
     overflow: hidden;
 }
 
 .chart-settings {
-    width: 300px;
+    flex: 1;
+    min-width: 330px;
     border-right: solid 1px $gray-border-light;
     padding: 15px;
     overflow-y: auto;
@@ -225,7 +225,7 @@
 }
 
 .chart-builder-modal__chart-preview {
-    flex: 1;
+    flex: 3;
     overflow: auto;
     padding-top: 15px;
     display: flex;