tide-design-system 2.0.28 → 2.0.30

package/index.ts

@@ -32,27 +32,62 @@ import TideToggle from '@/components/TideToggle.vue';
 import type { Alert } from '@/types/Alert';
 import type { Badge, BadgePremium, BadgeTrustedYears } from '@/types/Badge';
 import type { BreadCrumb } from '@/types/BreadCrumb';
-import type { Breakpoint, CssUtility } from '@/types/Styles';
 import type { Detail } from '@/types/Detail';
 import type { Element, ElementTextAsIcon } from '@/types/Element';
+import type { FacetComponentIdRange, RangeData } from '@/types/FacetRange';
+import type {
+  BooleanField,
+  BooleanValue,
+  CheckboxField,
+  Field,
+  GenericField,
+  GenericInput,
+  SelectField,
+  StringField,
+  StringValue,
+  TextField,
+  TextareaField,
+} from '@/types/Field';
+import type {
+  BooleanInput,
+  CheckboxInput,
+  FormValueTransformer,
+  Input,
+  SelectInput,
+  StringInput,
+  TextInput,
+  TextareaInput,
+} from '@/types/Form';
+import type { Formatted } from '@/types/Formatted';
 import type { Icon } from '@/types/Icon';
 import type { Link } from '@/types/Link';
+import type { ImageSlideType, ListingMedia, MediaSlideType, VideoSlideType, VrSlideType } from '@/types/ListingMedia';
+import type { Orientation } from '@/types/Orientation';
 import type { Priority } from '@/types/Priority';
+import type { Raw } from '@/types/Raw';
 import type { Realm } from '@/types/Realm';
+import type { RealmConfig } from '@/types/RealmConfig';
+import type { SelectOption, SelectOptionGroup } from '@/types/Select';
 import type { Size } from '@/types/Size';
+import type { Breakpoint, CssUtility } from '@/types/Styles';
 import type { Tab } from '@/types/Tab';
 import type { Target } from '@/types/Target';
-import type { ValidationError, ValidationResult, ValidationLength } from '@/types/Validation';
+import type { TextInputType } from '@/types/TextInput';
+import type { ValidationError, ValidationResult, ValidationLength, Validator } from '@/types/Validation';
 
 import { ALERT } from '@/types/Alert';
 import { BADGE, BADGE_PREMIUM, BADGE_TRUSTED } from '@/types/Badge';
 import { BREAKPOINT, CSS } from '@/types/Styles';
 import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
+import { FORMAT, FORMAT_REGEX } from '@/types/Formatted';
 import { ICON } from '@/types/Icon';
+import { MEDIA_SLIDE_TYPES } from '@/types/ListingMedia';
+import { ORIENTATION } from '@/types/Orientation';
 import { PRIORITY } from '@/types/Priority';
 import { REALM } from '@/types/Realm';
 import { SIZE } from '@/types/Size';
 import { TARGET } from '@/types/Target';
+import { TEXT_INPUT_TYPE } from '@/types/TextInput';
 import { VALIDATOR } from '@/types/Validation';
 
 import '@/assets/css/main.css';
@@ -62,22 +97,56 @@ export type {
   Badge,
   BadgePremium,
   BadgeTrustedYears,
+  BooleanField,
+  BooleanInput,
+  BooleanValue,
   BreadCrumb,
   Breakpoint,
+  CheckboxField,
+  CheckboxInput,
   CssUtility,
   Detail,
   Element,
   ElementTextAsIcon,
+  FacetComponentIdRange,
+  Field,
+  FormValueTransformer,
+  Formatted,
+  GenericField,
+  GenericInput,
   Icon,
+  ImageSlideType,
+  Input,
   Link,
+  ListingMedia,
+  MediaSlideType,
+  Orientation,
   Priority,
+  RangeData,
+  Raw,
   Realm,
+  RealmConfig,
+  SelectField,
+  SelectInput,
+  SelectOptionGroup,
+  SelectOption,
   Size,
+  StringField,
+  StringInput,
+  StringValue,
   Tab,
   Target,
+  TextField,
+  TextInput,
+  TextInputType,
+  TextareaField,
+  TextareaInput,
   ValidationError,
-  ValidationResult,
   ValidationLength,
+  ValidationResult,
+  Validator,
+  VideoSlideType,
+  VrSlideType,
 };
 
 export {
@@ -89,11 +158,16 @@ export {
   CSS,
   ELEMENT,
   ELEMENT_TEXT_AS_ICON,
+  FORMAT,
+  FORMAT_REGEX,
   ICON,
+  MEDIA_SLIDE_TYPES,
+  ORIENTATION,
   PRIORITY,
   REALM,
   SIZE,
   TARGET,
+  TEXT_INPUT_TYPE,
   TideAccordionItem,
   TideAlert,
   TideBackgroundImage,

package/package.json

@@ -52,5 +52,5 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.0.28"
+  "version": "2.0.30"
 }

package/src/assets/css/dynamic-buttons.css

@@ -18,7 +18,7 @@
 }
 
 .tide-button-secondary {
-  background: 2px solid var(--tide-surface);
+  background: var(--tide-surface);
   border: 2px solid var(--tide-primary);
   color: var(--tide-primary);
 }
@@ -44,7 +44,7 @@
 a.tide-button-primary:hover,
 button.tide-button-primary:enabled:hover {
   border: 2px solid var(--tide-primary);
-  background: 2px solid var(--tide-white);
+  background: var(--tide-white);
   color: var(--tide-primary);
 }
 

package/src/components/TideInputSelect.vue

@@ -115,6 +115,23 @@
           :id="uniqueId"
           v-model="value"
         >
+          <component
+            :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
+            :key="optgroup.label"
+            :label="optgroup.label"
+            :is="optgroup.options ? 'optgroup' : 'option'"
+            v-for="optgroup in props.optgroups"
+          >
+            <option
+              :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
+              :key="option.value"
+              :value="option.value"
+              v-for="option in optgroup.options"
+            >
+              {{ option.label }}
+            </option>
+          </component>
+
           <option
             :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
             :key="option.value"

package/src/stories/TideInputSelect.stories.ts

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
 
-import type { SelectOption } from '@/types/Select';
+import type { SelectOption, SelectOptionGroup } from '@/types/Select';
 
 import TideInputSelect from '@/components/TideInputSelect.vue';
 import {
@@ -19,6 +19,43 @@ const options = {
   'Option 3': 3,
 };
 
+const selectOptionGroups: SelectOptionGroup[] = [
+  {
+    label: 'Group A',
+    options: [
+      {
+        label: 'Option 1',
+        value: 1,
+      },
+      {
+        label: 'Option 2',
+        value: 2,
+      },
+      {
+        label: 'Option 3',
+        value: 3,
+      },
+    ],
+  },
+  {
+    label: 'Group B',
+    options: [
+      {
+        label: 'Option 4',
+        value: 4,
+      },
+      {
+        label: 'Option 5',
+        value: 5,
+      },
+      {
+        label: 'Option 6',
+        value: 6,
+      },
+    ],
+  },
+];
+
 const selectOptions: SelectOption[] = [
   {
     label: 'Option 1',
@@ -87,10 +124,20 @@ export default {
         type: { summary: 'string' },
       },
     },
+    optgroups: {
+      ...formatArgType({ selectOptionGroups }),
+      control: 'object',
+      description: 'Determines grouped values found inside Select',
+      isCustom: true,
+      table: {
+        defaultValue: { summary: '[]' },
+        type: { summary: 'SelectOptionGroup[]' },
+      },
+    },
     options: {
       ...formatArgType({ selectOptions }),
       control: 'object',
-      description: 'Determines values found inside Select',
+      description: 'Determines ungrouped values found inside Select',
       isCustom: true,
       table: {
         defaultValue: { summary: '[]' },
@@ -130,6 +177,7 @@ export default {
     inputId: '',
     label: 'Input label',
     name: '',
+    optgroups: selectOptionGroups,
     options: selectOptions,
     required: undefined,
     supportingText: '',

package/src/types/Field.ts

@@ -1,5 +1,5 @@
 import type { FormValueTransformer } from '@/types/Form';
-import type { SelectOption } from '@/types/Select';
+import type { SelectOptionGroup, SelectOption } from '@/types/Select';
 import type { TextInputType } from '@/types/TextInput';
 import type { ValidationError, Validator } from '@/types/Validation';
 
@@ -25,7 +25,8 @@ interface GenericInput {
 }
 
 interface SelectField extends GenericInput, StringValue {
-  options: SelectOption[];
+  optgroups?: SelectOptionGroup[];
+  options?: SelectOption[];
 }
 
 interface StringValue {

package/src/types/Form.ts

@@ -1,4 +1,4 @@
-import type { SelectOptGroup, SelectOption } from '@/types/Select';
+import type { SelectOptionGroup, SelectOption } from '@/types/Select';
 import type { TextInputType } from '@/types/TextInput';
 import type { ValidationError, Validator } from '@/types/Validation';
 
@@ -24,7 +24,7 @@ export type SelectInput = GenericInput &
   StringValue & {
     options?: SelectOption[] | readonly SelectOption[];
     placeholder?: string;
-    optgroups?: SelectOptGroup[];
+    optgroups?: SelectOptionGroup[];
   };
 
 export type TextInput = GenericInput &

package/src/types/Select.ts

@@ -3,8 +3,7 @@ export type SelectOption = {
   value: any;
 };
 
-export type SelectOptGroup = {
+export type SelectOptionGroup = {
   label: string;
   options?: SelectOption[];
-  value?: any;
 };