feat: add color variants to Chip component

[willopez]

Impact: minor
Type: feature

Summary

Adds support for setting the following prop values: new, processing, canceled for the color property.

Testing

1. Start the project and verify the prop values mentioned above can indeed by set on a Chip component.

[netlify]

Deploy preview for heuristic-perlman-0ef024 ready!

Built with commit 3f9fb8b

https://deploy-preview-116--heuristic-perlman-0ef024.netlify.com

[mikemurray]

The names for the colors should be generic. "new", "processing" and "canceled" are very specific to orders, which is not good for everything else. We discussed perhaps using "success", "info", etc. Not sure about canceled since its red, albeit lighter than "error".

@cassytaylor We have some inconsistencies with the secondary and error color variants. (In part due to code though, but now you can see in the SS).

@willopez Can you add an example of every variant/color combo so we can better see all the variations? (I added the code below to do it + a screenshot)

In testing I saw the following, though this is from the previous iteration of the component:

Color secondary but has the onDelete callback makes it light blue

But remove the callback and then it's Reaction blue

Example with everything, or most everything

function ChipsArray() {
  const handleDelete = chipToDelete => () => {
    setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key));
  };
  
  const [chipData, setChipData] = React.useState([
    [
      { label: "primary-default", color: "primary", variant: "default"},
      { label: "primary-outlined", color: "primary", variant: "outlined" },
      { label: "primary-deletable", color: "primary", onDelete: handleDelete },
      { label: "primary-deletable-outlined", color: "primary", variant: "outlined", onDelete: handleDelete }
    ],
    [
      { label: "secondary-default", color: "secondary", variant: "default" },
      { label: "secondary-outlined", color: "secondary", variant: "outlined" },
      { label: "secondary-deletable", color: "secondary", onDelete: handleDelete },
      { label: "secondary-deletable-outlined", color: "secondary", variant: "outlined", onDelete: handleDelete }
    ],
    [
      { label: "error-default", color: "error"},
      { label: "error-outlined", color: "error", variant: "outlined" },
      { label: "error-deletable", color: "error", onDelete: handleDelete },
      { label: "error-deletable-outlined", color: "error", variant: "outlined", onDelete: handleDelete }
    ],
    [
      { label: "new-default", color: "new" },
      { label: "new-outlined", color: "new", variant: "outlined" },
      { label: "new-deletable", color: "new", onDelete: handleDelete },
      { label: "new-deletable-outlined", color: "new", variant: "outlined", onDelete: handleDelete }
    ],
    [
      { label: "processing-default", color: "processing"},
      { label: "processing-outlined", color: "processing", variant: "outlined" },
      { label: "processing-deletable", color: "processing", onDelete: handleDelete },
      { label: "processing-deletable-outlined", color: "processing", variant: "outlined", onDelete: handleDelete }
    ],
    [
      { label: "canceled-default", color: "canceled"},
      { label: "canceled-outlined", color: "canceled", variant: "outlined" },
      { label: "canceled-deletable", color: "canceled", onDelete: handleDelete},
      { label: "canceled-deletable-outlined", color: "canceled", variant: "outlined", onDelete: handleDelete }
    ]
  ]);

  return (
    <div>
      {chipData.map((chipRow, index) => {
        return (
          <div key={index} style={{marginBottom: "8px" }}>
            {chipRow.map((data, chipIndex) => {
              return (
                <Chip
                  color="secondary"
                  size="small"
                  {...data}
                  key={chipIndex}
                  label={data.label}
                  onDelete={data.onDelete && data.onDelete(data)}
                  style={{ marginRight: "4px" }}
                />
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

<ChipsArray />;

[willopez]

@mikemurray I have added the samples of all the chip variants and fixed the error chip.

[mikemurray]

Added a ticket for the other inconsistencies since they're not the concern of this PR.

#119

[mikemurray]

👍

[rc-publisher]

🎉 This PR is included in version 1.11.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀