@redseed/redseed-ui-vue3 6.3.2 → 6.3.7

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.2",
+  "version": "6.3.7",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "repository": "https://github.com/redseedtraining/redseed-ui",

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/Card/Card.vue

@@ -77,7 +77,7 @@ function onClick() {
 .rsui-card {
     @apply relative flex flex-col;
     @apply transition duration-200;
-    @apply rounded-xl bg-white border border-rsui-grey-400;
+    @apply rounded-xl bg-background-primary border border-border-primary;
 
     &--hoverable {
         @apply hover:shadow-md;

package/src/components/Card/CardHeader.vue

@@ -146,7 +146,7 @@ function handleMoreActionsClick() {
     @apply border-b border-transparent;
 
     &--divider {
-        @apply border-rsui-grey-400;
+        @apply border-border-primary;
     }
 
     &__header {
@@ -158,7 +158,7 @@ function handleMoreActionsClick() {
     }
 
     &__avatar {
-        @apply size-14 rounded-full overflow-hidden flex items-center justify-center bg-rsui-grey-50;
+        @apply size-14 rounded-full overflow-hidden flex items-center justify-center bg-background-secondary;
         @apply mt-2.5 md:mt-0;
     }
 
@@ -172,7 +172,7 @@ function handleMoreActionsClick() {
     }
 
     &__title {
-        @apply text-lg leading-7 font-semibold text-rsui-grey-900;
+        @apply text-lg leading-7 font-semibold text-text-primary;
 
         &--single-line {
             @apply line-clamp-2 md:line-clamp-1;
@@ -180,7 +180,7 @@ function handleMoreActionsClick() {
     }
 
     &__subtitle {
-        @apply text-sm leading-5 text-rsui-grey-700;
+        @apply text-sm leading-5 text-text-secondary;
 
         &--single-line {
             @apply line-clamp-3 md:line-clamp-1;
@@ -200,7 +200,7 @@ function handleMoreActionsClick() {
     }
 
     &__more-actions-icon {
-        @apply size-5 text-rsui-grey-400;
+        @apply size-5 text-text-secondary;
     }
 }
 </style>

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/Layouts/PageHeader.vue

@@ -83,13 +83,13 @@ const showMetaModal = ref(false)
         @apply pr-2 flex flex-row items-center space-x-6;
 
         h1 {
-            @apply text-3xl font-semibold text-rsui-grey-900;
+            @apply text-3xl font-semibold text-text-primary;
             @apply lg:mr-4;
         }
     }
 
     &__subtitle {
-        @apply text-base text-rsui-grey-700 leading-relaxed;
+        @apply text-base text-text-secondary leading-relaxed;
     }
 
     &__status-actions {

package/src/components/Layouts/SectionHeader.vue

@@ -128,11 +128,11 @@ function handleMoreActionsClick() {
     }
 
     &__title {
-        @apply text-lg leading-7 font-semibold line-clamp-2 md:line-clamp-1;
+        @apply text-lg leading-7 font-semibold line-clamp-2 md:line-clamp-1 text-text-primary;
     }
 
     &__subtitle {
-        @apply text-sm leading-5 line-clamp-3 md:line-clamp-1;
+        @apply text-sm leading-5 line-clamp-3 md:line-clamp-1 text-text-secondary;
     }
 
     &__toolbar {
@@ -148,7 +148,7 @@ function handleMoreActionsClick() {
     }
 
     &__more-actions-icon {
-        @apply size-5 text-rsui-grey-400;
+        @apply size-5 text-text-secondary;
     }
 }
 </style>

package/src/components/MetaInfo/MetaInfo.vue

@@ -43,16 +43,16 @@ const emit = defineEmits(['click'])
         @apply size-4;
     }
     &__label {
-        @apply font-semibold text-sm text-rsui-grey-900 leading-4;
+        @apply font-semibold text-sm text-text-primary leading-4;
     }
     &__help {
-        @apply text-rsui-grey-400 size-4 cursor-pointer;
+        @apply text-text-secondary size-4 cursor-pointer;
         svg {
             @apply size-full;
         }
     }
     &__value {
-        @apply text-xs text-rsui-grey-700 leading-5;
+        @apply text-xs text-text-secondary leading-5;
     }
 }
 </style>

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>