From a1bcfeceee2e4dca3c48ec54afed7ae38ca290b6 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 8 Jan 2025 13:14:18 -0700
Subject: [PATCH] Small Holocene updates (#2486)

* Fix Combobox height to match Select

* Pass id to PaginatedTable

* Add icons

* Add maxHeight prop to API PaginatedTable
---
 src/lib/holocene/combobox/combobox.svelte     |  4 ++--
 src/lib/holocene/icon/paths.ts                |  6 ++++--
 .../icon/svg/circle-check-filled.svelte       | 19 +++++++++++++++++++
 .../icon/svg/inverted-checkmark.svelte        | 13 -------------
 src/lib/holocene/icon/svg/xmark-filled.svelte | 12 ++++++++++++
 .../paginated-table/api-paginated.svelte      | 11 ++++++++++-
 .../table/paginated-table/index.svelte        |  1 +
 .../table/paginated-table/paginated.svelte    |  2 ++
 8 files changed, 50 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/holocene/icon/svg/circle-check-filled.svelte
 delete mode 100644 src/lib/holocene/icon/svg/inverted-checkmark.svelte
 create mode 100644 src/lib/holocene/icon/svg/xmark-filled.svelte

diff --git a/src/lib/holocene/combobox/combobox.svelte b/src/lib/holocene/combobox/combobox.svelte
index 5d9e10e1e..804ec7fa9 100644
--- a/src/lib/holocene/combobox/combobox.svelte
+++ b/src/lib/holocene/combobox/combobox.svelte
@@ -519,7 +519,7 @@
 
 <style lang="postcss">
   .combobox-wrapper {
-    @apply surface-primary flex w-full flex-row items-center border border-subtle text-sm dark:focus-within:surface-primary focus-within:border-interactive focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/70;
+    @apply surface-primary flex h-10 w-full flex-row items-center border border-subtle text-sm dark:focus-within:surface-primary focus-within:border-interactive focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/70;
 
     &.invalid {
       @apply border border-danger text-danger focus-within:ring-danger/70;
@@ -539,6 +539,6 @@
   }
 
   .combobox-input {
-    @apply flex h-9 grow bg-transparent text-primary placeholder:text-secondary focus:outline-none;
+    @apply flex grow bg-transparent text-primary placeholder:text-secondary focus:outline-none;
   }
 </style>
diff --git a/src/lib/holocene/icon/paths.ts b/src/lib/holocene/icon/paths.ts
index b4bbbef25..740c1388a 100644
--- a/src/lib/holocene/icon/paths.ts
+++ b/src/lib/holocene/icon/paths.ts
@@ -22,6 +22,7 @@ import chevronLeft from './svg/chevron-left.svelte';
 import chevronRight from './svg/chevron-right.svelte';
 import chevronSelectorVertical from './svg/chevron-selector-vertical.svelte';
 import chevronUp from './svg/chevron-up.svelte';
+import circleCheckFilled from './svg/circle-check-filled.svelte';
 import clock from './svg/clock.svelte';
 import close from './svg/close.svelte';
 import cometSolid from './svg/comet-solid.svelte';
@@ -54,7 +55,6 @@ import graph from './svg/graph.svelte';
 import hyphen from './svg/hyphen.svelte';
 import importIcon from './svg/import.svelte';
 import info from './svg/info.svelte';
-import invertedCheckmark from './svg/inverted-checkmark.svelte';
 import json from './svg/json.svelte';
 import keyboard from './svg/keyboard.svelte';
 import labs from './svg/labs.svelte';
@@ -107,6 +107,7 @@ import usage from './svg/usage.svelte';
 import verticalEllipsis from './svg/vertical-ellipsis.svelte';
 import warning from './svg/warning.svelte';
 import workflow from './svg/workflow.svelte';
+import xmarkFilled from './svg/xmark-filled.svelte';
 
 export const icons = {
   activity,
@@ -132,6 +133,7 @@ export const icons = {
   'chevron-right': chevronRight,
   'chevron-up': chevronUp,
   'chevron-selector-vertical': chevronSelectorVertical,
+  'circle-check-filled': circleCheckFilled,
   clock,
   close,
   'comet-solid': cometSolid,
@@ -164,7 +166,6 @@ export const icons = {
   hyphen,
   import: importIcon,
   info,
-  'inverted-checkmark': invertedCheckmark,
   json,
   keyboard,
   labs,
@@ -218,6 +219,7 @@ export const icons = {
   'vertical-ellipsis': verticalEllipsis,
   warning,
   workflow,
+  'xmark-filled': xmarkFilled,
 } as const;
 
 export type IconName = keyof typeof icons;
diff --git a/src/lib/holocene/icon/svg/circle-check-filled.svelte b/src/lib/holocene/icon/svg/circle-check-filled.svelte
new file mode 100644
index 000000000..a7322f8bc
--- /dev/null
+++ b/src/lib/holocene/icon/svg/circle-check-filled.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+</script>
+
+<Svg {...$$props}>
+  <g clip-path="url(#clip0_2145_49)">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M20.4853 20.4853C18.2348 22.7357 15.1826 24 12 24C8.8174 24 5.76516 22.7357 3.51472 20.4853C1.26428 18.2348 0 15.1826 0 12C0 8.8174 1.26428 5.76516 3.51472 3.51472C5.76516 1.26428 8.8174 0 12 0C15.1826 0 18.2348 1.26428 20.4853 3.51472C22.7357 5.76516 24 8.8174 24 12C24 15.1826 22.7357 18.2348 20.4853 20.4853ZM17.2969 9.79686L18.0938 8.99998L16.5001 7.41092L15.7032 8.20779L10.5001 13.4109L8.29695 11.2078L7.50007 10.4109L5.91101 12L6.70789 12.7969L9.70789 15.7969L10.5048 16.5937L11.3016 15.7969L17.2969 9.79686Z"
+      fill="currentcolor"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_2145_49">
+      <rect width="24" height="24" fill="white" />
+    </clipPath>
+  </defs>
+</Svg>
diff --git a/src/lib/holocene/icon/svg/inverted-checkmark.svelte b/src/lib/holocene/icon/svg/inverted-checkmark.svelte
deleted file mode 100644
index b81ef1c17..000000000
--- a/src/lib/holocene/icon/svg/inverted-checkmark.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-  import colors from 'tailwindcss/colors';
-
-  import Svg from '../svg.svelte';
-</script>
-
-<Svg {...$$props}>
-  <circle cx="12" cy="12" r="8" fill={colors.gray[900]} />
-  <path
-    d="M15.5 9.33337C15.5 9.474 15.4375 9.599 15.3438 9.69275L11.3438 13.6927C11.25 13.7865 11.125 13.8334 11 13.8334C10.8594 13.8334 10.7344 13.7865 10.6406 13.6927L8.64062 11.6927C8.54688 11.599 8.5 11.474 8.5 11.3334C8.5 11.0521 8.71875 10.8334 9 10.8334C9.125 10.8334 9.25 10.8959 9.34375 10.9896L11 12.6302L14.6406 8.98962C14.7344 8.89587 14.8594 8.83337 15 8.83337C15.2656 8.83337 15.5 9.05212 15.5 9.33337Z"
-    fill="white"
-  />
-</Svg>
diff --git a/src/lib/holocene/icon/svg/xmark-filled.svelte b/src/lib/holocene/icon/svg/xmark-filled.svelte
new file mode 100644
index 000000000..9bf24988d
--- /dev/null
+++ b/src/lib/holocene/icon/svg/xmark-filled.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+</script>
+
+<Svg {...$$props}>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM18 7.2L17.4 7.8L13.1965 12L17.3965 16.2L17.9965 16.8L16.8 18L16.2 17.4L12 13.1965L7.8 17.3965L7.2 17.9965L6 16.8L6.6 16.2L10.8035 12L6.60353 7.8L6.00353 7.2L7.2 6L7.8 6.6L12 10.8035L16.2 6.60353L16.8 6.00353L18 7.2Z"
+    fill="currentcolor"
+  />
+</Svg>
diff --git a/src/lib/holocene/table/paginated-table/api-paginated.svelte b/src/lib/holocene/table/paginated-table/api-paginated.svelte
index f968cc6d4..7bb01aef3 100644
--- a/src/lib/holocene/table/paginated-table/api-paginated.svelte
+++ b/src/lib/holocene/table/paginated-table/api-paginated.svelte
@@ -26,6 +26,8 @@
 
   type T = $$Generic;
   type $$Props = HTMLAttributes<HTMLDivElement> & {
+    id?: string;
+    maxHeight?: string;
     onError?: (error: Error | unknown) => void | undefined;
     onFetch: () => Promise<PaginatedRequest<T>>;
     onShiftUp?: (event: KeyboardEvent) => void | undefined;
@@ -43,6 +45,8 @@
     pageSizeOptions?: string[];
   };
 
+  export let id: string = null;
+  export let maxHeight = '';
   export let onError: (error: Error) => void | undefined = undefined;
   export let onFetch: () => Promise<PaginatedRequest<T>>;
   export let onShiftUp: (event: KeyboardEvent) => void | undefined = undefined;
@@ -169,7 +173,12 @@
 
 <slot name="header" visibleItems={$store.visibleItems} />
 
-<PaginatedTable updating={$store.updating} visibleItems={$store.visibleItems}>
+<PaginatedTable
+  updating={$store.updating}
+  visibleItems={$store.visibleItems}
+  {maxHeight}
+  {id}
+>
   <slot name="caption" slot="caption" />
   <slot name="headers" slot="headers" visibleItems={$store.visibleItems} />
 
diff --git a/src/lib/holocene/table/paginated-table/index.svelte b/src/lib/holocene/table/paginated-table/index.svelte
index 926596acc..98e99ffd7 100644
--- a/src/lib/holocene/table/paginated-table/index.svelte
+++ b/src/lib/holocene/table/paginated-table/index.svelte
@@ -25,6 +25,7 @@
     class="paginated-table"
     class:table-fixed={fixed}
     class:table-auto={!fixed}
+    {...$$restProps}
   >
     <slot name="caption" />
     <thead class="paginated-table-header">
diff --git a/src/lib/holocene/table/paginated-table/paginated.svelte b/src/lib/holocene/table/paginated-table/paginated.svelte
index 7ca01fe8c..e9d7cc6c3 100644
--- a/src/lib/holocene/table/paginated-table/paginated.svelte
+++ b/src/lib/holocene/table/paginated-table/paginated.svelte
@@ -18,6 +18,7 @@
 
   type Item = $$Generic;
 
+  export let id: string = null;
   export let items: Item[];
   export let variant: 'primary' | 'split' = 'primary';
   export let updating = false;
@@ -94,6 +95,7 @@
   {maxHeight}
   visibleItems={$store.items}
   {fixed}
+  {id}
 >
   <slot name="caption" slot="caption" />
   <slot name="headers" slot="headers" visibleItems={$store.items} />