Removing secondary swatch set on color pickers (#49)

Co-authored-by: cohitre <carlosrr@gmail.com>
usewaypoint · Feb 29, 2024 · da15e8e · da15e8e
1 parent 9b7a4bb
commit da15e8e
Show file tree

Hide file tree

Showing 7 changed files with 6 additions and 47 deletions.
diff --git a/...tor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ButtonSidebarPanel.tsx b/...tor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ButtonSidebarPanel.tsx
@@ -77,13 +77,11 @@ export default function ButtonSidebarPanel({ data, setData }: ButtonSidebarPanel
  label="Text color"
  defaultValue={buttonTextColor}
  onChange={(buttonTextColor) => updateData({ ...data, props: { ...data.props, buttonTextColor } })}
- secondarySwatch={[]}
  />
  <ColorInput
  label="Button color"
  defaultValue={buttonBackgroundColor}
  onChange={(buttonBackgroundColor) => updateData({ ...data, props: { ...data.props, buttonBackgroundColor } })}
- secondarySwatch={[]}
  />
  <MultiStylePropertyPanel
  names={['backgroundColor', 'fontFamily', 'fontSize', 'fontWeight', 'textAlign', 'padding']}

diff --git a/...or-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/DividerSidebarPanel.tsx b/...or-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/DividerSidebarPanel.tsx
@@ -33,7 +33,6 @@ export default function DividerSidebarPanel({ data, setData }: DividerSidebarPan
  label="Color"
  defaultValue={lineColor}
  onChange={(lineColor) => updateData({ ...data, props: { ...data.props, lineColor } })}
- secondarySwatch={[]}
  />
  <SliderInput
  label="Height"

diff --git a/...ample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx b/...ample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx
@@ -10,13 +10,11 @@ import ColorInput from './helpers/inputs/ColorInput';
 
 type EmailLayoutSidebarPanelProps = z.infer<typeof EmailLayoutPropsSchema>;
 
-const SECONDARY_SWATCH: string[] = [];
 type EmailLayoutSidebarFieldsProps = {
  data: EmailLayoutSidebarPanelProps;
  setData: (v: EmailLayoutSidebarPanelProps) => void;
 };
 export default function EmailLayoutSidebarFields({ data, setData }: EmailLayoutSidebarFieldsProps) {
- const secondarySwatch = SECONDARY_SWATCH;
  const [, setErrors] = useState<Zod.ZodError | null>(null);
 
  const updateData = (d: unknown) => {
@@ -35,20 +33,17 @@ export default function EmailLayoutSidebarFields({ data, setData }: EmailLayoutS
  label="Backdrop color"
  defaultValue={data.backdropColor}
  onChange={(backdropColor) => updateData({ ...data, backdropColor })}
- secondarySwatch={secondarySwatch}
  />
  <ColorInput
  label="Canvas color"
  defaultValue={data.canvasColor}
  onChange={(canvasColor) => updateData({ ...data, canvasColor })}
- secondarySwatch={secondarySwatch}
  />
  <Divider />
  <ColorInput
  label="Text color"
  defaultValue={data.textColor}
  onChange={(textColor) => updateData({ ...data, textColor })}
- secondarySwatch={secondarySwatch}
  />
  </BaseSidebarPanel>
  );

diff --git a/...pectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/BaseColorInput.tsx b/...pectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/BaseColorInput.tsx
@@ -20,16 +20,14 @@ type Props =
  label: string;
  onChange: (value: string | null) => void;
  defaultValue: string | null;
- secondarySwatch: string[];
  }
  | {
  nullable: false;
  label: string;
  onChange: (value: string) => void;
  defaultValue: string;
- secondarySwatch: string[];
  };
-export default function ColorInput({ label, defaultValue, onChange, secondarySwatch, nullable }: Props) {
+export default function ColorInput({ label, defaultValue, onChange, nullable }: Props) {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [value, setValue] = useState(defaultValue);
  const handleClickOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -87,7 +85,6 @@ export default function ColorInput({ label, defaultValue, onChange, secondarySwa
  setValue(v);
  onChange(v);
  }}
- secondarySwatch={secondarySwatch}
  />
  </Menu>
  </Stack>

diff --git a/.../App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Picker.tsx b/.../App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Picker.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { HexColorInput, HexColorPicker } from 'react-colorful';
 
-import { Box, Stack, SxProps, Typography } from '@mui/material';
+import { Box, Stack, SxProps } from '@mui/material';
 
 import Swatch from './Swatch';
 
@@ -63,19 +63,12 @@ const SX: SxProps = {
 type Props = {
  value: string;
  onChange: (v: string) => void;
- secondarySwatch: string[];
 };
-export default function Picker({ value, onChange, secondarySwatch }: Props) {
+export default function Picker({ value, onChange }: Props) {
  return (
  <Stack spacing={1} sx={SX}>
  <HexColorPicker color={value} onChange={onChange} />
  <Swatch paletteColors={DEFAULT_PRESET_COLORS} value={value} onChange={onChange} />
- <Box>
- <Typography variant="overline" sx={{ fontSize: 11, color: 'text.secondary' }}>
- In template / layout
- </Typography>
- <Swatch paletteColors={secondarySwatch} value={value} onChange={onChange} />
- </Box>
  <Box pt={1}>
  <HexColorInput prefixed color={value} onChange={onChange} />
  </Box>

diff --git a/...c/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/index.tsx b/...c/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/index.tsx
@@ -6,7 +6,6 @@ type Props = {
  label: string;
  onChange: (value: string) => void;
  defaultValue: string;
- secondarySwatch: string[];
 };
 export default function ColorInput(props: Props) {
  return <BaseColorInput {...props} nullable={false} />;
@@ -16,7 +15,6 @@ type NullableProps = {
  label: string;
  onChange: (value: null | string) => void;
  defaultValue: null | string;
- secondarySwatch: string[];
 };
 export function NullableColorInput(props: NullableProps) {
  return <BaseColorInput {...props} nullable />;

diff --git a/...rDrawer/ConfigurationPanel/input-panels/helpers/style-inputs/SingleStylePropertyPanel.tsx b/...rDrawer/ConfigurationPanel/input-panels/helpers/style-inputs/SingleStylePropertyPanel.tsx
@@ -25,23 +25,9 @@ export default function SingleStylePropertyPanel({ name, value, onChange }: Styl
 
  switch (name) {
  case 'backgroundColor':
- return (
- <NullableColorInput
- label="Background color"
- defaultValue={defaultValue}
- onChange={handleChange}
- secondarySwatch={[]}
- />
- );
+ return <NullableColorInput label="Background color" defaultValue={defaultValue} onChange={handleChange} />;
  case 'borderColor':
- return (
- <NullableColorInput
- label="Border color"
- defaultValue={defaultValue}
- onChange={handleChange}
- secondarySwatch={[]}
- />
- );
+ return <NullableColorInput label="Border color" defaultValue={defaultValue} onChange={handleChange} />;
  case 'borderRadius':
  return (
  <SliderInput
@@ -57,14 +43,7 @@ export default function SingleStylePropertyPanel({ name, value, onChange }: Styl
  />
  );
  case 'color':
- return (
- <NullableColorInput
- label="Text color"
- defaultValue={defaultValue}
- onChange={handleChange}
- secondarySwatch={[]}
- />
- );
+ return <NullableColorInput label="Text color" defaultValue={defaultValue} onChange={handleChange} />;
  case 'fontFamily':
  return <NullableFontFamily label="Font family" defaultValue={defaultValue} onChange={handleChange} />;
  case 'fontSize':