tide-design-system 2.2.15 → 2.3.0

package/src/components/TideInputText.vue

@@ -15,7 +15,6 @@
 
   type Props = {
     autocomplete?: boolean;
-    dataTrack?: string;
     disabled?: boolean;
     error?: ValidationError;
     hasClear?: boolean;
@@ -37,7 +36,6 @@
 
   const props = withDefaults(defineProps<Props>(), {
     autocomplete: false,
-    dataTrack: '',
     disabled: false,
     error: false,
     hasClear: false,
@@ -70,7 +68,7 @@
   );
   const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
   const isEmpty = computed(() => value.value === '' || value.value === undefined);
-  const type = computed(() =>
+  const inputType = computed(() =>
     props.type === TEXT_INPUT_TYPE.PASSWORD && showPassword.value === true ? TEXT_INPUT_TYPE.TEXT : props.type
   );
 
@@ -145,9 +143,9 @@
       hasError && 'error',
     ]"
   >
-    <div
+    <label
       :class="[
-        'tide-input-border',
+        'tide-input-text-field',
         CSS.DISPLAY.FLEX,
         CSS.AXIS2.CENTER,
         CSS.GAP.HALF,
@@ -156,14 +154,15 @@
         CSS.BG.SURFACE.DEFAULT,
         hasClear ? [CSS.PADDING.RIGHT.HALF, CSS.PADDING.LEFT.ONE] : [CSS.PADDING.X.ONE],
         CSS.PADDING.Y.HALF,
-        props.disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.TEXT,
+        disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.TEXT,
       ]"
+      :for="inputId"
     >
       <TideIcon
         :class="[CSS.FONT.COLOR.SURFACE.VARIANT]"
-        :icon="props.iconLeading"
+        :icon="iconLeading"
         :size="SIZE.SMALL"
-        v-if="props.iconLeading"
+        v-if="iconLeading"
       />
 
       <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.WIDTH.FULL]">
@@ -171,48 +170,43 @@
           :class="[
             'tide-input-text-prefix',
             CSS.FONT.ROLE.BODY_1,
-            ,
             !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
             hasMinilabel ? '' : 'offset',
           ]"
-          v-if="props.prefix"
+          v-if="prefix"
         >
-          {{ props.prefix }}
+          {{ prefix }}
         </div>
 
-        <div
-          :class="[CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.WIDTH.FULL]"
-          @click.prevent="input?.focus()"
-        >
-          <label
+        <div :class="[CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.WIDTH.FULL]">
+          <div
             :class="[
+              'tide-input-text-label',
               hasMinilabel ? ['minilabel', CSS.FONT.ROLE.LABEL_3] : CSS.FONT.ROLE.LABEL_1,
               !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
               CSS.CURSOR.TEXT,
               CSS.POINTER_EVENTS.OFF,
             ]"
-            :for="props.inputId"
             v-if="label"
           >
             {{ formattedLabel }}
-          </label>
+          </div>
 
           <input
             :autocomplete="autocomplete ? 'on' : 'off'"
             :class="[CSS.WIDTH.FULL, disabled && CSS.CURSOR.NOT_ALLOWED, CSS.FONT.ROLE.BODY_1]"
-            :data-track="props.dataTrack"
-            :disabled="props.disabled"
-            :maxlength="props.maxlength"
-            :minlength="props.minlength"
-            :name="props.name"
+            :disabled="disabled"
+            :maxlength="maxlength"
+            :minlength="minlength"
+            :name="name"
             ref="input"
-            :required="props.required"
-            :type="type"
+            :required="required"
+            :type="inputType"
             @change="handleValidation"
             @focus="handleFocus"
             @focusout="handleFocusOut"
             @input="handleInput"
-            :id="props.inputId"
+            :id="inputId"
             v-model="value"
           />
         </div>
@@ -224,32 +218,38 @@
             !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
             hasMinilabel ? '' : 'offset',
           ]"
-          v-if="props.suffix"
+          v-if="suffix"
         >
-          {{ props.suffix }}
+          {{ suffix }}
         </div>
       </div>
 
-      <TideIcon
-        :class="[CSS.PADDING.Y.HALF, CSS.PADDING.FULL.HALF, CSS.CURSOR.POINTER]"
-        :icon="ICON.CLOSE"
-        :size="SIZE.SMALL"
+      <button
         @click="handleClear"
-        v-if="hasClear && props.type !== TEXT_INPUT_TYPE.PASSWORD"
-      />
-
-      <TideIcon
-        :class="[CSS.PADDING.Y.HALF, CSS.PADDING.FULL.HALF, CSS.CURSOR.POINTER]"
-        :icon="ICON.VISIBILITY"
-        :size="SIZE.SMALL"
+        v-if="hasClear && type !== TEXT_INPUT_TYPE.PASSWORD"
+      >
+        <TideIcon
+          :class="[CSS.MARGIN.FULL.HALF]"
+          :icon="ICON.CLOSE"
+          :size="SIZE.SMALL"
+        />
+      </button>
+
+      <button
         @click="showPassword = !showPassword"
-        v-if="props.type === TEXT_INPUT_TYPE.PASSWORD"
-      />
-    </div>
+        v-if="type === TEXT_INPUT_TYPE.PASSWORD"
+      >
+        <TideIcon
+          :class="[CSS.MARGIN.FULL.HALF]"
+          :icon="ICON.VISIBILITY"
+          :size="SIZE.SMALL"
+        />
+      </button>
+    </label>
 
     <div
       :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER]"
-      v-if="props.supportingText || hasError"
+      v-if="supportingText || hasError"
     >
       <TideIcon
         :class="[]"
@@ -259,19 +259,19 @@
       />
 
       <div :class="[CSS.FONT.ROLE.LABEL_3]">
-        {{ hasError ? errorMessage : props.supportingText }}
+        {{ hasError ? errorMessage : supportingText }}
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-  label {
+  .tide-input-text-label {
     height: 1.1875rem;
     transition: font-size var(--tide-animate), transform var(--tide-animate);
   }
 
-  label:not(.minilabel),
+  .tide-input-text-label:not(.minilabel),
   .tide-input-text-prefix:not(.offset),
   .tide-input-text-suffix:not(.offset) {
     transform: translate(0, calc(9 / 16 * 1rem));
@@ -290,16 +290,16 @@
     color: var(--tide-error-primary);
   }
 
-  .tide-input-text.error .tide-input-border {
+  .tide-input-text.error .tide-input-text-field {
     outline-color: var(--tide-error-border);
     background-color: var(--tide-error-surface);
   }
 
-  .tide-input-text.error:focus-within .tide-input-border {
+  .tide-input-text.error:focus-within .tide-input-text-field {
     outline-color: var(--tide-error-border);
   }
 
-  .tide-input-text:focus-within .tide-input-border {
+  .tide-input-text:focus-within .tide-input-text-field {
     --tide-input-outline-width: var(--tide-border-width-2);
     outline-color: var(--tide-surface-border-high);
   }
@@ -308,7 +308,7 @@
     outline: none;
   }
 
-  .tide-input-border {
+  .tide-input-text-field {
     --tide-input-outline-width: var(--tide-border-width-1);
     outline: var(--tide-input-outline-width) solid var(--tide-border);
     outline-offset: calc(var(--tide-input-outline-width) * -1);

package/src/components/TideInputTextarea.vue

@@ -10,7 +10,6 @@
   import type { ValidationError } from '@/types/Validation';
 
   type Props = {
-    dataTrack?: string;
     error?: ValidationError;
     inputId?: string;
     label?: string;
@@ -24,7 +23,6 @@
   };
 
   const props = withDefaults(defineProps<Props>(), {
-    dataTrack: '',
     error: false,
     inputId: undefined,
     label: undefined,
@@ -93,7 +91,7 @@
   <div
     :class="['tide-input-textarea', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.QUARTER, hasError && 'error']"
   >
-    <div
+    <label
       :class="[
         'tide-input-textarea-field',
         CSS.GAP.HALF,
@@ -103,42 +101,41 @@
         CSS.PADDING.TOP.HALF,
         CSS.OVERFLOW.XY.HIDDEN,
         CSS.BG.SURFACE.DEFAULT,
+        CSS.CURSOR.TEXT,
       ]"
+      :for="inputId"
     >
-      <label
+      <div
         :class="[
+          'tide-input-textarea-label',
           hasMinilabel ? ['minilabel', CSS.FONT.ROLE.LABEL_3] : CSS.FONT.ROLE.LABEL_1,
           !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
-          CSS.CURSOR.TEXT,
           CSS.POINTER_EVENTS.OFF,
         ]"
-        :for="props.inputId"
-        ref="label"
         v-if="label"
       >
         {{ formattedLabel }}
-      </label>
+      </div>
 
       <textarea
-        :class="[CSS.WIDTH.FULL, CSS.FONT.ROLE.BODY_1]"
-        :data-track="props.dataTrack"
-        :maxlength="props.maxlength"
-        :minlength="props.minlength"
-        :name="props.name"
+        :class="[CSS.DISPLAY.BLOCK, CSS.WIDTH.FULL, CSS.FONT.ROLE.BODY_1]"
+        :maxlength="maxlength"
+        :minlength="minlength"
+        :name="name"
         ref="input"
-        :required="props.required"
-        :rows="props.rows"
+        :required="required"
+        :rows="rows"
         @change="handleValidation"
         @focus="handleFocus"
         @focusout="handleFocusOut"
-        :id="props.inputId"
+        :id="inputId"
         v-model="value"
       />
-    </div>
+    </label>
 
     <div
       :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER]"
-      v-if="props.supportingText || hasError"
+      v-if="supportingText || hasError"
     >
       <TideIcon
         :icon="ICON.ERROR"
@@ -147,7 +144,7 @@
       />
 
       <div :class="[CSS.FONT.ROLE.LABEL_3]">
-        {{ hasError ? errorMessage : props.supportingText }}
+        {{ hasError ? errorMessage : supportingText }}
       </div>
     </div>
   </div>
@@ -157,10 +154,8 @@
   textarea {
     resize: vertical;
   }
-</style>
 
-<style scoped>
-  label {
+  .tide-input-textarea-label {
     height: 1.1875rem;
     transition: font-size var(--tide-animate), transform var(--tide-animate);
   }

package/src/components/TidePopover.vue

@@ -35,8 +35,9 @@
   const handlePermanentOpenBodyClick = (e: MouseEvent) => {
     if (!anchor.value || !floating.value) return;
     if (isClickOutside(e, [anchor.value, floating.value])) {
-      e.stopImmediatePropagation();
       isToggledOpen.value = false;
+      e.preventDefault();
+      e.stopImmediatePropagation();
     }
   };
 
@@ -49,9 +50,13 @@
   };
 
   const handleAnchorElementClick = (e: MouseEvent) => {
-    isToggledOpen.value = true;
-    e.stopPropagation();
     e.preventDefault();
+    if (isToggledOpen.value) {
+      isToggledOpen.value = false;
+      isHovered.value = false;
+    } else {
+      isToggledOpen.value = true;
+    }
   };
 
   const addListenersToAnchorElement = () => {

package/src/contexts/sandbox/AppSandbox.vue

@@ -1,4 +1,6 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import {} from '../../../index';
+</script>
 
 <template>
   <div />

package/src/docs/integration-partial.md

@@ -12,17 +12,10 @@
           `import 'node_modules/tide-design-system/dist/css/main.css';`
 
       2. Cherry-picked:
-          - `import 'node_modules/tide-design-system/dist/css/main.css';`
           - `import 'node_modules/tide-design-system/dist/css/fonts.css';`
           - `import 'node_modules/tide-design-system/dist/css/reset.css';`
           - `import 'node_modules/tide-design-system/dist/css/variables.css';`
           - `import 'node_modules/tide-design-system/dist/css/utilities.css';`
-          - `import 'node_modules/tide-design-system/dist/css/utilities-sm.css';`
-          - `import 'node_modules/tide-design-system/dist/css/utilities-md.css';`
-          - `import 'node_modules/tide-design-system/dist/css/utilities-lg.css';`
-          - `import 'node_modules/tide-design-system/dist/css/utilities-xl.css';`
-          - `import 'node_modules/tide-design-system/dist/css/dynamic-buttons.css';`
-          - `import 'node_modules/tide-design-system/dist/css/dynamic-utilities.css';`
           - `import 'node_modules/tide-design-system/dist/css/grid-layout.css';`
    2. Import realm-specific utilities (where applicable):
       - `import 'node_modules/tide-design-system/dist/css/realm/aero.css';`

package/src/stories/TideInputRadio.stories.ts

@@ -64,6 +64,14 @@ export default {
         type: { summary: 'string' },
       },
     },
+    number: {
+      control: 'text',
+      description: 'Parenthetical response count',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'number' },
+      },
+    },
   },
   args: {
     checked: undefined,
@@ -73,6 +81,7 @@ export default {
     inputId: '',
     label: 'Input label',
     name: '',
+    number: '',
   },
   component: TideInputRadio,
   parameters,

package/src/types/Styles.ts

@@ -9,6 +9,7 @@ export const CSS = {
   ALIGN: {
     X: {
       CENTER: 'tide-text-center',
+      JUSTIFY: 'tide-text-justify',
       LEFT: 'tide-text-left',
       RIGHT: 'tide-text-right',
     },
@@ -478,6 +479,10 @@ export const CSS = {
   SNAP_ALIGN: {
     START: 'tide-scroll-snap-start',
   },
+  STRIKETHROUGH: {
+    OFF: 'tide-strikethrough-none',
+    ON: 'tide-strikethrough',
+  },
   TEXT_TRANSFORM: {
     LOWER: 'tide-text-transform-lower',
     NONE: 'tide-text-transform-none',

package/src/utilities/storybook.ts

@@ -103,12 +103,21 @@ export const disabledArgType = {
 
 export const isProduction = process.env.NODE_ENV === 'production';
 
-export const doSomething = () => {
-  alert('Did something.');
+export const doSomething = (message: string = 'Did something.') => {
+  const doSomethingAlert = document.getElementById('do-something-alert');
+
+  if (!doSomethingAlert) return;
+
+  doSomethingAlert.innerHTML = message;
+  doSomethingAlert.style.opacity = '1';
+
+  setTimeout(() => {
+    doSomethingAlert.style.opacity = '0';
+  }, 1000);
 };
 
 export const doSomethingElse = () => {
-  alert('Did something else.');
+  doSomething('Did something else.');
 };
 
 // Flatten a nested constant into a simple constant.

package/src/utilities/validation.ts

@@ -1,11 +1,15 @@
 import { priceToNumber } from '@/utilities/format';
 
-import type { RangeData } from '@/types/FacetRange';
 import type { StringInput } from '@/types/Form';
 import type { SelectOption } from '@/types/Select';
 import type { ValidationError, ValidationLength, ValidationResult, Validator } from '@/types/Validation';
 import type { Ref } from 'vue';
 
+type RangeData = {
+  min: number | null;
+  max: number | null;
+};
+
 export const errorMessageDefault = 'Please enter a valid value.';
 
 export const noError = {