Toggle field - Add customization options

[harinij]

Is your feature request related to a problem? Please describe.
Currently, the "Toggle" field doesn't have customization to change the color from green to anything else

Describe the solution you'd like
Allow in the UI option for users to add color using the color pick modal similar to what is used in the percentage field

[yasinbordbar]

Please assign me to do this.

[ChinazoOnwukaike]

Can this be assigned to me please?

[harinij]

@ChinazoOnwukaike please let us know if you are still working on this or if you need any inputs. Unassigning for now.

[RajGM]

Hi @harinij
I am working on this: ef4fa7d

Color pick modal is added.

Commit: RajGM@ef4fa7d

Remaining: Coloring of the table cell based on true/false;

[RajGM]

Hi @harinij

Is your feature request related to a problem? Please describe. Currently, the "Toggle" field doesn't have customization to change the color from green to anything else

Does that means we are only looking to change the color or toggle button instead of whole cell?

[RajGM]

[RajGM]

Hi @shamsmosowi and @BeeBombshell

for the src>components>fields>Checkbox>EditorCell.tsx

` return (
<FormControlLabel
control={
<Switch
checked={!!value}
onChange={handleChange}
disabled={disabled}
tabIndex={tabIndex}
size="small"
sx={{

        }}
      />
  }
  label={column.name as string}
  labelPlacement="start"
  sx={{
    m: 0,
    width: "100%",
    alignItems: "center",

    "& .MuiFormControlLabel-label": {
      font: "inherit",
      letterSpacing: "inherit",
      flexGrow: 1,
      overflowX: "hidden",
      mt: "0 !important",
    },

    "& .MuiSwitch-root": { mr: -0.75 },
  }}
/>

);`

Color properties are working for toggled off state with sx props but not for toggled On props.

Link to push: RajGM@09ae503

[RajGM]

Even if I try to copy the styling from: https://mui-treasury.com/styles/switch/

It's not working.

[RajGM]

@iamanishroy

[harinij]

Hi @RajGM thanks for pointing it out. Looks like this would not be a feasible solution so we are closing the issue.