refactor(color-picker)!: remove appearance property (#6276)

BREAKING CHANGE: removed `appearance` property

- Removed `appearance` property, use `--calcite-ui-border-1:
transparent` to remove the border instead of the `"minimal"` value

Co-authored-by: Kitty Hurley <khurley@esri.com>

src/components/color-picker/color-picker.e2e.ts

@@ -44,10 +44,6 @@ describe("calcite-color-picker", () => {
 
   it("reflects", async () =>
     reflects("calcite-color-picker", [
-      {
-        propertyName: "appearance",
-        value: "minimal"
-      },
       {
         propertyName: "scale",
         value: "m"
@@ -62,10 +58,6 @@ describe("calcite-color-picker", () => {
         propertyName: "allowEmpty",
         defaultValue: false
       },
-      {
-        propertyName: "appearance",
-        defaultValue: "solid"
-      },
       {
         propertyName: "format",
         defaultValue: "auto"

src/components/color-picker/color-picker.scss

@@ -93,12 +93,6 @@ $gap--large: 12px;
   }
 }
 
-:host([appearance="minimal"]) {
-  .container {
-    border: none;
-  }
-}
-
 .container {
   @apply bg-foreground-1;
   display: inline-block;

src/components/color-picker/color-picker.tsx

@@ -15,7 +15,7 @@ import {
 import Color from "color";
 import { throttle } from "lodash-es";
 import { Direction, getElementDir, isPrimaryPointerButton } from "../../utils/dom";
-import { Appearance, Scale } from "../interfaces";
+import { Scale } from "../interfaces";
 import { ColorMode, ColorValue, InternalColor } from "./interfaces";
 import {
   CSS,
@@ -87,11 +87,6 @@ export class ColorPicker
    */
   @Prop({ reflect: true }) allowEmpty = false;
 
-  /**
-   * Specifies the appearance style of the component -
-   */
-  @Prop({ reflect: true }) appearance: Extract<"minimal" | "solid", Appearance> = "solid";
-
   /**
    * Internal prop for advanced use-cases.
    *

src/components/color-picker/usage/Basic.md

@@ -1,3 +1,3 @@
 ```html
-<calcite-color-picker dir="ltr" scale="m" value="#b33f33" appearance="default"></calcite-color-picker>
+<calcite-color-picker dir="ltr" scale="m" value="#b33f33"></calcite-color-picker>
 ```

src/components/interfaces.ts

@@ -1,6 +1,6 @@
 /* Note: using `.d.ts` file extension will exclude it from the output build */
 export type Alignment = "start" | "center" | "end";
-export type Appearance = "minimal" | "outline" | "outline-fill" | "solid" | "transparent";
+export type Appearance = "outline" | "outline-fill" | "solid" | "transparent";
 export type Columns = 1 | 2 | 3 | 4 | 5 | 6;
 export type FlipContext = "both" | "start" | "end";
 export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";

src/demos/color-picker.html

@@ -146,21 +146,21 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
         <div class="child right-aligned-text">Color-picker in Popover</div>
         <div class="child">
           <calcite-popover pointer-disabled placement="bottom-start" reference-element="popover-button-1">
-            <calcite-color-picker appearance="minimal" scale="s"></calcite-color-picker>
+            <calcite-color-picker scale="s"></calcite-color-picker>
           </calcite-popover>
           <calcite-button id="popover-button-1">Activate Popover</calcite-button>
         </div>
 
         <div class="child">
           <calcite-popover pointer-disabled placement="bottom-start" reference-element="popover-button-2">
-            <calcite-color-picker appearance="minimal" scale="m"></calcite-color-picker>
+            <calcite-color-picker scale="m"></calcite-color-picker>
           </calcite-popover>
           <calcite-button id="popover-button-2">Activate Popover</calcite-button>
         </div>
 
         <div class="child">
           <calcite-popover pointer-disabled placement="bottom-start" reference-element="popover-button-3">
-            <calcite-color-picker appearance="minimal" scale="l"></calcite-color-picker>
+            <calcite-color-picker scale="l"></calcite-color-picker>
           </calcite-popover>
           <calcite-button id="popover-button-3">Activate Popover</calcite-button>
         </div>