Small Holocene updates (#2486)

* Fix Combobox height to match Select

* Pass id to PaginatedTable

* Add icons

* Add maxHeight prop to API PaginatedTable

Author: laurakwhit

Diff for: 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 for: 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 for: 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 for: src/lib/holocene/icon/svg/inverted-checkmark.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 for: src/lib/holocene/icon/svg/xmark-filled.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 for: src/lib/holocene/table/paginated-table/api-paginated.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 for: src/lib/holocene/table/paginated-table/index.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} />