DT-1248 - consistent link styles (#1589)

* clean up all links * fix cy * fix pw * fix pw * snaps * fix cy * button overhaul with cva * update tests and fix orderable list item * lint * add lint script to lintstagedrc * fix link * snaps * fix cy * fix pw * fix icon button and button focus state * fix cy? * some cleanup * combobox focus * snaps * fix sticky filters * snaps * remove style block from button * fix chip button * snaps * add active state to btn * snaps * clean up combobox a lil * fix clipping and alignment on event summary rows * focus combobox input on trigger click * change icon-button hover * add unroundLeft to boolean filter * clean up some stuff from CR * remove table-header button hover styles * Update src/lib/components/workflow/filter-search/boolean-filter.svelte Co-authored-by: Laura Whitaker <[email protected]> * fix truncation on event-summary rows --------- Co-authored-by: Laura Whitaker <[email protected]>
temporalio · Aug 31, 2023 · dd4389f · dd4389f · vercel · Aug 31, 2023
1 parent 031f5e5
commit dd4389f
Show file tree

Hide file tree

Showing 65 changed files with 727 additions and 866 deletions.
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
@@ -1,5 +1,6 @@
 {
   "*.{ts,js}": ["pnpm lint:fix", "prettier --write"],
-  "*.{css,postcss,svelte}": "stylelint --fix",
+  "*.{css,postcss}": ["stylelint --fix"],
+  "*.svelte": ["stylelint --fix", "pnpm lint:fix"],
   "*.{json,md}": "prettier --write"
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,5 +6,9 @@
   },
   "editor.formatOnSave": true,
   "css.customData": [".vscode/css-custom-data.json"],
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
 }
diff --git a/colors.cjs b/colors.cjs
@@ -21,7 +21,7 @@ const colors = {
   },
   indigo: {
     50: '#eef2ff',
-    100: '#e0e7ff',
+    100: '#E0EAFF',
     200: '#c7d2fe',
     300: '#a5b4fc',
     400: '#818cf8',
@@ -38,7 +38,7 @@ const colors = {
     300: '#d4d4d8',
     400: '#a1a1aa',
     500: '#71717a',
-    600: '#52525b',
+    600: '#4B5563',
     700: '#3f3f46',
     800: '#27272a',
     900: '#18181b',
@@ -94,7 +94,7 @@ const colors = {
   red: {
     50: '#fef2f2',
     100: '#fee2e2',
-    200: '#fecaca',
+    200: '#FFCFCF',
     300: '#fca5a5',
     400: '#f87171',
     500: '#ef4444',

diff --git a/cypress/integration/schedules.spec.js b/cypress/integration/schedules.spec.js
@@ -40,7 +40,7 @@ describe('Schedules View', () => {
     cy.get('.schedule-row').first().contains(scheduleId);
     cy.get('.schedule-row').first().contains(name);
 
-    cy.get('.schedule-row').first().click();
+    cy.get('.schedule-row a').first().click();
 
     cy.wait('@schedule-api');
 
@@ -63,7 +63,7 @@ describe('Schedules Edit', () => {
     cy.get('.schedule-row').first().contains(scheduleId);
     cy.get('.schedule-row').first().contains(name);
 
-    cy.get('.schedule-row').first().click();
+    cy.get('.schedule-row a').first().click();
 
     cy.wait('@schedule-api');
 

diff --git a/cypress/integration/workflow-executions.spec.js b/cypress/integration/workflow-executions.spec.js
@@ -106,7 +106,7 @@ describe('Workflow Executions List', () => {
           encodeURIComponent(`ExecutionStatus="Running"`),
         );
 
-        cy.get('.workflow-summary-row > .time-cell').first().click();
+        cy.get('.workflow-summary-row a').first().click();
 
         cy.wait('@workflow-api');
         cy.wait('@event-history-api');

diff --git a/src/lib/components/banner/banner.svelte b/src/lib/components/banner/banner.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import IconButton from '$lib/holocene/icon-button.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { BannersState } from '$lib/models/banner-state';
   import { close, closedBanners } from '$lib/stores/banner';
@@ -24,9 +25,9 @@
     class={`relative block text-center leading-10 ${severity}`}
     {...$$restProps}
   >
-    <a href={link} target="_blank" rel="noreferrer">
+    <Link href={link} newTab>
       {message}
-    </a>
+    </Link>
 
     <IconButton
       on:click={() => close(key)}

diff --git a/src/lib/components/data-encoder-settings.svelte b/src/lib/components/data-encoder-settings.svelte
@@ -6,6 +6,7 @@
 
   import Accordion from '$lib/holocene/accordion.svelte';
   import Button from '$lib/holocene/button.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import { clickOutside } from '$lib/holocene/outside-click';
   import { translate } from '$lib/i18n/translate';
   import { dataConverterPort } from '$lib/stores/data-converter-config';
@@ -17,10 +18,9 @@
   } from '$lib/stores/data-encoder-config';
   import { refresh } from '$lib/stores/workflow-run';
   import { validateHttpOrHttps, validateHttps } from '$lib/utilities/is-http';
-  
+
   import CodecEndpointSettings from './codec-endpoint-settings.svelte';
   import DataConverterPortSettings from './data-converter-port-settings.svelte';
-  
 
   export const viewDataEncoderSettings = writable<boolean>(false);
 </script>
@@ -89,12 +89,9 @@
         </h3>
       </div>
       <p class="text-sm">
-        {translate('data-encoder', 'codec-server-description-prefix')}<a
-          rel="noreferrer"
-          target="_blank"
+        {translate('data-encoder', 'codec-server-description-prefix')}<Link
           href="https://docs.temporal.io/dataconversion#codec-server"
-          class="text-blue-700 underline decoration-blue-700"
-          >{translate('codec-server')}</a
+          newTab>{translate('codec-server')}</Link
         >
         {translate('data-encoder', 'codec-server-description-suffix', {
           level: namespaceOrCluster,
@@ -156,14 +153,12 @@
       <DataConverterPortSettings bind:port />
       <div class="flex items-center gap-4">
         <Button
-          thin
           disabled={Boolean(error) || (override && !endpoint)}
           data-testid="confirm-data-encoder-button"
           on:click={onConfirm}
           type="submit">{translate('apply')}</Button
         >
         <Button
-          thin
           variant="ghost"
           data-testid="cancel-data-encoder-button"
           on:click={onCancel}>{translate('cancel')}</Button

diff --git a/src/lib/components/event/event-details-row-expanded.svelte b/src/lib/components/event/event-details-row-expanded.svelte
@@ -152,7 +152,7 @@
   }
 
   .detail-row {
-    @apply block w-full items-start gap-4 py-2 text-left xl:flex;
+    @apply flex w-full items-center gap-4 py-2 text-left xl:flex;
   }
 
   .row:last-of-type .content {

diff --git a/src/lib/components/event/event-details-row.svelte b/src/lib/components/event/event-details-row.svelte
@@ -47,12 +47,12 @@
   {:else if shouldDisplayAsExecutionLink(key)}
     <div class="flex w-full flex-wrap items-center gap-1 pr-1">
       <p class="mr-3 truncate text-sm">{format(key)}</p>
-      <div class="truncate text-sm">
+      <div class="text-sm truncate">
         <Copyable
           copyIconTitle={translate('copy-icon-title')}
           copySuccessIconTitle={translate('copy-success-icon-title')}
           content={value}
-          container-class=" xl:flex-row"
+          container-class="xl:flex-row h-12 pr-1"
         >
           <Link
             class="truncate"
@@ -71,12 +71,12 @@
   {:else if shouldDisplayChildWorkflowLink(key, attributes)}
     <div class="flex w-full flex-wrap items-center gap-1 pr-1">
       <p class="truncate text-sm">{format(key)}</p>
-      <div class="truncate text-sm">
+      <div class="text-sm truncate">
         <Copyable
           copyIconTitle={translate('copy-icon-title')}
           copySuccessIconTitle={translate('copy-success-icon-title')}
           content={value}
-          container-class="xl:flex-row"
+          container-class="xl:flex-row h-12 pr-1"
         >
           <Link
             class="truncate"
@@ -95,12 +95,12 @@
   {:else if shouldDisplayAsTaskQueueLink(key)}
     <div class="flex w-full flex-wrap items-center gap-1 pr-1">
       <p class="mr-3 truncate text-sm">{format(key)}</p>
-      <div class="truncate text-sm">
+      <div class="text-sm truncate">
         <Copyable
           copyIconTitle={translate('copy-icon-title')}
           copySuccessIconTitle={translate('copy-success-icon-title')}
           content={value}
-          container-class=""
+          container-class="h-12 pr-1"
         >
           <Link
             class="truncate"

diff --git a/src/lib/components/event/event-shortcut-keys.svelte b/src/lib/components/event/event-shortcut-keys.svelte
@@ -10,11 +10,7 @@
 </script>
 
 <div class="shortcut-key-button">
-  <Button class="!py-1.5 !px-1" variant="secondary" on:click={onOpen}
-    ><span class="flex h-[24px] w-[24px] items-center justify-center text-xl"
-      >?</span
-    ></Button
-  >
+  <Button variant="secondary" on:click={onOpen}>?</Button>
 </div>
 <Drawer
   {open}

diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
@@ -3,6 +3,7 @@
   import { fade } from 'svelte/transition';
 
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import { isEventGroup } from '$lib/models/event-groups';
   import {
     eventOrGroupIsCanceled,
@@ -82,9 +83,7 @@
 >
   <td />
   <td class="w-24 text-left">
-    <a class="text-sm text-gray-500 md:text-base" href="#{event.id}"
-      ><p class="truncate">{event.id}</p></a
-    >
+    <Link class="truncate" href="#{event.id}">{event.id}</Link>
   </td>
   <td class="text-left">
     <div class="flex flex-col gap-0">

diff --git a/src/lib/components/event/event-summary-table.svelte b/src/lib/components/event/event-summary-table.svelte
@@ -3,7 +3,7 @@
 
   import EventCategoryFilter from '$lib/components/event/event-category-filter.svelte';
   import EventDateFilter from '$lib/components/event/event-date-filter.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Button from '$lib/holocene/button.svelte';
   import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte';
   import Table from '$lib/holocene/table/table.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -36,15 +36,16 @@
     <th class="w-44"><EventCategoryFilter {compact} /></th>
     <th class="w-auto xl:w-80">
       <div class="flex w-full justify-end">
-        <button
-          class="relative flex w-28 items-center justify-end rounded sm:justify-between"
+        <Button
+          size="sm"
+          variant="table-header"
+          trailingIcon={expandAll ? 'chevron-up' : 'chevron-down'}
           on:click={handleChange}
         >
           <span class="hidden sm:block">
             {expandAll ? translate('collapse-all') : translate('expand-all')}
           </span>
-          <Icon name={expandAll ? 'chevron-up' : 'chevron-down'} />
-        </button>
+        </Button>
       </div>
     </th>
   </TableHeaderRow>

diff --git a/src/lib/components/import/event-history-file-import.svelte b/src/lib/components/import/event-history-file-import.svelte
@@ -74,6 +74,6 @@
   accept=".json"
   on:change={onFileSelect}
 />
-<Button icon="file-upload" on:click={onConfirm} disabled={!fileLoaded}
+<Button leadingIcon="file-upload" on:click={onConfirm} disabled={!fileLoaded}
   >{translate('import')}</Button
 >
diff --git a/src/lib/components/navigation-link.svelte b/src/lib/components/navigation-link.svelte
diff --git a/src/lib/components/schedule/schedule-advanced-settings.svelte b/src/lib/components/schedule/schedule-advanced-settings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Accordion from '$lib/holocene/accordion.svelte';
   import { translate } from '$lib/i18n/translate';
 
   import ScheduleNotes from './schedule-notes.svelte';
@@ -10,17 +10,23 @@
   export let state: ScheduleState;
   export let policies: SchedulePolicies;
   export let notes = '';
-
-  let show = false;
 </script>
 
 <ScheduleNotes {notes} />
-<div>
-  <button on:click={() => (show = !show)} class="settings">
-    {translate('schedules', 'advanced-settings')}
-    <Icon class="inline" name={show ? 'chevron-up' : 'chevron-down'} />
-  </button>
-  {#if show}
+<Accordion title={translate('schedules', 'advanced-settings')}>
+  <p>
+    {translate('schedules', 'start-time')}
+    {spec?.startTime ?? translate('none')}
+  </p>
+  <p>
+    {translate('schedules', 'end-time')}{spec?.endTime ?? translate('none')}
+  </p>
+  <p>{translate('schedules', 'jitter')}{spec?.jitter ?? translate('none')}</p>
+  <p>
+    {translate('schedules', 'exclusion-calendar')}{spec?.excludeCalendar?.[0] ??
+      translate('none')}
+  </p>
+  {#if state?.limitedActions}
     <p>
       {translate('schedules', 'start-time')}
       {spec?.startTime ?? translate('none')}
@@ -44,10 +50,5 @@
         translate('none')}
     </p>
   {/if}
-</div>
+</Accordion>
 
-<style lang="postcss">
-  .settings {
-    @apply mb-4 underline decoration-gray-900;
-  }
-</style>