feat(ui-components): more new components (#1613)

packages/ui-components/src/components/form/Button.stories.ts

@@ -9,7 +9,7 @@ export default {
   component: FormButton,
   argTypes: {
     color: {
-      options: ['default', 'invert', 'danger', 'warning', 'secondary'],
+      options: ['default', 'invert', 'danger', 'warning', 'secondary', 'info'],
       control: { type: 'select' }
     },
     outlined: {
@@ -123,6 +123,42 @@ export const WarningButton: StoryObj = mergeStories(Default, {
   }
 })
 
+export const InfoButton: StoryObj = mergeStories(Default, {
+  args: {
+    color: 'info'
+  }
+})
+
+export const DangerButton: StoryObj = mergeStories(Default, {
+  args: {
+    color: 'danger'
+  }
+})
+
+export const SuccessButton: StoryObj = mergeStories(Default, {
+  args: {
+    color: 'success'
+  }
+})
+
+export const SecondaryButton: StoryObj = mergeStories(Default, {
+  args: {
+    color: 'secondary'
+  }
+})
+
+export const InvertButton: StoryObj = mergeStories(Default, {
+  args: {
+    color: 'invert'
+  }
+})
+
+export const CardButton: StoryObj = mergeStories(Default, {
+  args: {
+    color: 'card'
+  }
+})
+
 export const RoundedOutlined: StoryObj = mergeStories(Default, {
   args: {
     rounded: true,

packages/ui-components/src/components/form/Button.vue

@@ -42,6 +42,7 @@ type FormButtonColor =
   | 'success'
   | 'card'
   | 'secondary'
+  | 'info'
 
 const emit = defineEmits<{
   /**
@@ -232,6 +233,9 @@ const bgAndBorderClasses = computed(() => {
       case 'warning':
         classParts.push(props.outlined ? 'border-warning' : 'bg-warning border-warning')
         break
+      case 'info':
+        classParts.push(props.outlined ? 'border-info' : 'bg-info border-info')
+        break
       case 'success':
         classParts.push(props.outlined ? 'border-success' : 'bg-success border-success')
         break
@@ -276,6 +280,11 @@ const foregroundClasses = computed(() => {
             props.outlined ? 'text-warning' : 'text-foundation dark:text-foreground'
           )
           break
+        case 'info':
+          classParts.push(
+            props.outlined ? 'text-info' : 'text-foundation dark:text-foreground'
+          )
+          break
         case 'success':
           classParts.push(
             props.outlined ? 'text-success' : 'text-foundation dark:text-foreground'
@@ -312,6 +321,8 @@ const foregroundClasses = computed(() => {
         classParts.push('text-success')
       } else if (props.color === 'warning') {
         classParts.push('text-warning')
+      } else if (props.color === 'info') {
+        classParts.push('text-info')
       } else if (props.color === 'danger') {
         classParts.push('text-danger')
       } else {
@@ -341,6 +352,9 @@ const ringClasses = computed(() => {
       case 'warning':
         classParts.push('hover:ring-4 ring-warning-lighter dark:ring-warning-darker')
         break
+      case 'info':
+        classParts.push('hover:ring-4 ring-info-lighter dark:ring-info-darker')
+        break
       case 'success':
         classParts.push('hover:ring-4 ring-success-lighter dark:ring-success-darker')
         break

packages/ui-components/src/components/form/TextInput.vue

@@ -86,7 +86,7 @@ import { ConcreteComponent, PropType, computed, ref, toRefs, useSlots } from 'vu
 import { Nullable, Optional } from '@speckle/shared'
 import { useTextInputCore } from '~~/src/composables/form/textInput'
 
-type InputType = 'text' | 'email' | 'password' | 'url' | 'search'
+type InputType = 'text' | 'email' | 'password' | 'url' | 'search' | 'number' | string
 type InputSize = 'sm' | 'base' | 'lg' | 'xl'
 type InputColor = 'page' | 'foundation'
 

packages/ui-components/src/components/form/select/Base.stories.ts

@@ -125,6 +125,31 @@ export const Default: StoryType = {
   }
 }
 
+export const WithLabel: StoryType = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showLabel: true
+  }
+}
+
+export const WithLabelAndHelp: StoryType = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showLabel: true,
+    help: 'Some help text'
+  }
+}
+
+export const Tinted: StoryType = {
+  ...Default,
+  args: {
+    ...Default.args,
+    buttonStyle: 'tinted'
+  }
+}
+
 export const LimitedWidth: StoryType = {
   ...Default,
   render: (args, ctx) => ({

packages/ui-components/src/components/form/select/Base.vue

@@ -9,7 +9,7 @@
       as="div"
     >
       <ListboxLabel
-        class="block label text-foreground"
+        class="block label text-foreground-2 mb-2"
         :class="{ 'sr-only': !showLabel }"
       >
         {{ label }}
@@ -138,12 +138,7 @@
         </Transition>
       </div>
     </Listbox>
-    <p
-      v-if="helpTipId"
-      :id="helpTipId"
-      class="mt-2 ml-3 text-sm"
-      :class="helpTipClasses"
-    >
+    <p v-if="helpTipId" :id="helpTipId" class="mt-2 text-sm" :class="helpTipClasses">
       {{ helpTip }}
     </p>
   </div>
@@ -180,7 +175,7 @@ import CommonLoadingBar from '~~/src/components/common/loading/Bar.vue'
 // @ts-ignore
 import { directive as vTippy } from 'vue-tippy'
 
-type ButtonStyle = 'base' | 'simple'
+type ButtonStyle = 'base' | 'simple' | 'tinted'
 type SingleItem = any
 type ValueType = SingleItem | SingleItem[] | undefined
 
@@ -284,7 +279,7 @@ const props = defineProps({
    * Validation stuff
    */
   rules: {
-    type: [String, Object, Function, Array] as PropType<RuleExpression<string>>,
+    type: [String, Object, Function, Array] as PropType<RuleExpression<ValueType>>,
     default: undefined
   },
   /**
@@ -354,7 +349,7 @@ const renderClearButton = computed(
 )
 
 const buttonsWrapperClasses = computed(() => {
-  const classParts: string[] = ['relative flex group', props.showLabel ? 'mt-1' : '']
+  const classParts: string[] = ['relative flex group']
 
   if (props.buttonStyle !== 'simple') {
     classParts.push('hover:shadow rounded-md')
@@ -389,13 +384,19 @@ const clearButtonClasses = computed(() => {
     'relative z-[1]',
     'flex items-center justify-center text-center shrink-0',
     'rounded-r-md overflow-hidden transition-all',
+    'text-foreground',
     hasValueSelected.value ? `w-6 ${commonButtonClasses.value}` : 'w-0'
   ]
 
   if (!isDisabled.value) {
     classParts.push(
-      'bg-primary-muted hover:bg-primary hover:text-foreground-on-primary'
+      'hover:bg-primary hover:text-foreground-on-primary dark:text-foreground-on-primary'
     )
+    if (props.buttonStyle === 'tinted') {
+      classParts.push('bg-outline-3')
+    } else {
+      classParts.push('bg-primary-muted')
+    }
   }
 
   return classParts.join(' ')
@@ -413,7 +414,11 @@ const buttonClasses = computed(() => {
     classParts.push('py-2 px-3')
 
     if (!isDisabled.value) {
-      classParts.push('bg-foundation text-foreground')
+      if (props.buttonStyle === 'tinted') {
+        classParts.push('bg-foundation-page text-foreground')
+      } else {
+        classParts.push('bg-foundation text-foreground')
+      }
     }
   }
 
@@ -492,7 +497,6 @@ const itemKey = (v: SingleItem): string | number =>
   props.by ? (v[props.by] as string) : v
 
 const triggerSearch = async () => {
-  console.log('triggerSearch')
   if (!isAsyncSearchMode.value || !props.getSearchResults) return
 
   isAsyncLoading.value = true