fix: Don't render swatches in color picker for empty array (#1116)

Author: iOvergaard

packages/uui-color-picker/lib/uui-color-picker.element.ts

@@ -530,7 +530,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
   }
 
   private _renderSwatches() {
-    if (!this.swatches) return nothing;
+    if (!this.swatches?.length) return nothing;
     return html`<uui-color-swatches
       id="swatches"
       class="color-picker__swatches"

packages/uui-color-picker/lib/uui-color-picker.story.ts

@@ -17,6 +17,25 @@ import '@umbraco-ui/uui-popover-container/lib';
 const formats = ['hex', 'rgb', 'hsl', 'hsv'];
 const sizes = ['small', 'medium', 'large'];
 
+const swatchesTransparent = [
+  'rgba(208, 2, 27, 0.5)',
+  'rgba(245, 166, 35, 0.5)',
+  'rgba(248, 231, 28, 0.5)',
+  'rgba(139, 87, 42, 0.5)',
+  'rgba(126, 211, 33, 0.5)',
+  'rgba(65, 117, 5, 0.5)',
+  'rgba(189, 16, 224, 0.5)',
+  'rgba(144, 19, 254, 0.5)',
+  'rgba(74, 144, 226, 0.5)',
+  'rgba(80, 227, 194, 0.5)',
+  'rgba(184, 233, 134, 0.5)',
+  'rgba(0, 0, 0, 0.5)',
+  'rgba(68, 68, 68, 0.5)',
+  'rgba(136, 136, 136, 0.5)',
+  'rgba(204, 204, 204, 0.5)',
+  'rgba(255, 255, 255, 0.5)',
+];
+
 const meta: Meta = {
   id: 'uui-color-picker',
   component: 'uui-color-picker',
@@ -83,3 +102,16 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const NoSwatches: Story = {
+  args: {
+    swatches: [],
+  },
+};
+
+export const TransparentSwatches: Story = {
+  args: {
+    opacity: true,
+    swatches: swatchesTransparent,
+  },
+};

packages/uui-color-swatches/lib/uui-color-swatches.story.ts

@@ -122,3 +122,9 @@ export const Gradient: Story = {
     value: 'lemon-twist',
   },
 };
+
+export const NoSwatches: Story = {
+  args: {
+    swatches: [],
+  },
+};