@redseed/redseed-ui-vue3 6.3.3 → 6.4.0

package/docs/02-button-components.md

@@ -40,24 +40,6 @@ Button components provide interactive elements for user actions. They come in va
 </template>
 ```
 
-### ButtonSecondaryBrand
-**When to use:** For brand-specific secondary actions that need to stand out while still being secondary to the primary action.
-**Implementation:**
-```vue
-<template>
-  <ButtonSecondaryBrand @click="handleBrandAction">Brand Action</ButtonSecondaryBrand>
-</template>
-```
-
-### ButtonSecondaryBrandFull
-**When to use:** Same as ButtonSecondaryBrand but spans the full width of its container.
-**Implementation:**
-```vue
-<template>
-  <ButtonSecondaryBrandFull @click="handleBrandAction">Brand Action</ButtonSecondaryBrandFull>
-</template>
-```
-
 ### ButtonTertiary
 **When to use:** For less prominent actions, such as "Learn More", "View Details", or utility actions.
 **Implementation:**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "6.3.3",
+  "version": "6.4.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Badge/Badge.vue

@@ -14,6 +14,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    secondary: {
+        type: Boolean,
+        default: false,
+    },
     success: {
         type: Boolean,
         default: false,
@@ -22,6 +26,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    error: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const defaultSize = computed(() => !props.sm && !props.md)
@@ -31,9 +39,10 @@ const badgeClass = computed(() => [
     {
         'rsui-badge--sm': props.sm || defaultSize.value,
         'rsui-badge--md': props.md,
-        'rsui-badge--neutral': props.neutral,
+        'rsui-badge--secondary': props.neutral || props.secondary,
         'rsui-badge--success': props.success,
         'rsui-badge--warning': props.warning,
+        'rsui-badge--error': props.error,
     },
 ])
 
@@ -61,16 +70,18 @@ defineExpose({
     &--md {
         @apply px-2 py-2;
     }
-    &--neutral {
-        @apply text-rsui-grey-neutral-900 bg-rsui-grey-neutral-200;
+    &--secondary {
+        @apply text-text-secondary bg-background-secondary border border-border-secondary;
     }
     &--success {
-        @apply text-white bg-rsui-success-500;
+        @apply text-text-success bg-background-success border border-border-success;
     }
     &--warning {
-        @apply text-white bg-rsui-warning-500;
+        @apply text-text-warning bg-background-warning border border-border-warning;
+    }
+    &--error {
+        @apply text-text-error bg-background-error border border-border-error;
     }
-
     :deep(svg) {
         @apply size-4;
     }

package/src/components/Button/ButtonSlot.vue

@@ -94,7 +94,7 @@ const buttonSlotClass = computed(() => [
     // default control
     @apply w-fit h-fit inline-flex shrink-0 items-center justify-center select-none outline-none whitespace-nowrap will-change-transform;
     // default shape
-    @apply gap-1.5 border rounded-lg transition;
+    @apply border rounded-lg transition gap-1.5;
     // default font
     @apply font-semibold text-sm;
     // default colors
@@ -121,10 +121,7 @@ const buttonSlotClass = computed(() => [
 
     // modifier sm size
     &--sm {
-        @apply text-sm px-3 py-2;
-        &-icon {
-            @apply p-2;
-        }
+        @apply text-sm px-spacing-lg py-spacing-md gap-spacing-xs;
     }
 
     // modifier md size

package/src/components/Button/index.js

@@ -2,8 +2,6 @@ import ButtonPrimary from './ButtonPrimary.vue'
 import ButtonPrimaryFull from './ButtonPrimaryFull.vue'
 import ButtonSecondary from './ButtonSecondary.vue'
 import ButtonSecondaryFull from './ButtonSecondaryFull.vue'
-import ButtonSecondaryBrand from './ButtonSecondaryBrand.vue'
-import ButtonSecondaryBrandFull from './ButtonSecondaryBrandFull.vue'
 import ButtonTertiary from './ButtonTertiary.vue'
 import ButtonTertiaryFull from './ButtonTertiaryFull.vue'
 
@@ -12,8 +10,6 @@ export {
     ButtonPrimaryFull,
     ButtonSecondary,
     ButtonSecondaryFull,
-    ButtonSecondaryBrand,
-    ButtonSecondaryBrandFull,
     ButtonTertiary,
     ButtonTertiaryFull,
 }

package/src/components/FormField/FormFieldCombobox.vue

@@ -101,11 +101,15 @@ const dropdownContent = computed(() => {
 
 // Get display text for the input
 const displayText = computed(() => {
-    if (isOpen.value) return searchText.value
-    
-    // When closed, show the label of the selected option or the model value
+    // Always show the selected option label if there is one, regardless of dropdown state
     const selectedOption = props.options.find(option => option.value === model.value)
-    return selectedOption ? selectedOption.label : model.value
+    if (selectedOption) {
+        return selectedOption.label
+    }
+    
+    // If no option is selected, show search text when open or model value when closed
+    if (isOpen.value) return searchText.value
+    return model.value
 })
 
 function toggleDropdown() {
@@ -140,8 +144,15 @@ function close() {
 }
 
 function choose(option) {
-    model.value = option.value
-    emit('change', option.value)
+    // If clicking on the currently selected option, deselect it
+    if (option.value === model.value) {
+        model.value = ''
+        emit('change', '')
+    } else {
+        // Otherwise, select the new option
+        model.value = option.value
+        emit('change', option.value)
+    }
     close()
 }
 

package/src/components/Section/Section.vue

@@ -1,20 +1,31 @@
 <script setup>
+import { computed } from 'vue'
+
 const props = defineProps({
     variant: {
         type: String,
-        default: 'default',
-        validator: (value) => ['default', 'secondary', 'brand', 'success', 'warning', 'error'].includes(value)
+        default: 'primary',
+        validator: (value) => ['primary', 'secondary', 'brand', 'success', 'warning', 'error'].includes(value)
     }
 })
+
+const variantClass = computed(() => [
+    'rsui-section',
+    {
+        'rsui-section--primary': props.variant === 'primary',
+        'rsui-section--secondary': props.variant === 'secondary',
+        'rsui-section--brand': props.variant === 'brand',
+        'rsui-section--success': props.variant === 'success',
+        'rsui-section--warning': props.variant === 'warning',
+        'rsui-section--error': props.variant === 'error',
+    },
+])
+
 </script>
 
 <template>
     <section 
-        :class="[
-            'rsui-section',
-            `rsui-section--${variant}`
-        ]"
-        
+        :class="variantClass"
     >
         <div v-if="$slots.header" class="rsui-section__header">
             <slot name="header"></slot>
@@ -29,7 +40,7 @@ const props = defineProps({
 .rsui-section {
     @apply border border-solid rounded-xl p-6;
 
-    &--default {
+    &--primary {
         @apply bg-background-primary border-border-primary text-text-primary;
     }
     

package/src/components/Button/ButtonSecondaryBrand.vue

@@ -1,23 +0,0 @@
-<script setup>
-import ButtonSlot from './ButtonSlot.vue'
-</script>
-<template>
-<ButtonSlot class="rsui-button-secondary-brand">
-    <slot></slot>
-</ButtonSlot>
-</template>
-<style lang="scss" scoped>
-.rsui-button-secondary-brand {
-    // default colors
-    @apply text-primary-background bg-white border-primary-background;
-    // default hover state
-    @apply hover:text-primary-background-hover hover:bg-white hover:border-primary-background-hover;
-    // default focus state
-    @apply focus-visible:ring-primary-background focus-visible:border-primary-background;
-    // default active state
-    @apply active:bg-white active:border-primary-background;
-    // default disabled state
-    @apply disabled:bg-white disabled:border-rsui-grey-100 disabled:text-rsui-grey-400;
-    @apply disabled:active:bg-white disabled:active:border-rsui-grey-100;
-}
-</style>

package/src/components/Button/ButtonSecondaryBrandFull.vue

@@ -1,10 +0,0 @@
-<script setup>
-import ButtonSecondaryBrand from './ButtonSecondaryBrand.vue'
-</script>
-<template>
-<ButtonSecondaryBrand full>
-    <slot></slot>
-</ButtonSecondaryBrand>
-</template>
-<style lang="scss" scoped>
-</style>