Merge pull request #125 from birotaio/feature/debug-menu-input

feature/debug menu input
birotaio · Apr 11, 2024 · 54fc485 · 54fc485
2 parents 8e05689 + 86ae4be
commit 54fc485
Show file tree

Hide file tree

Showing 13 changed files with 326 additions and 166 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,14 +1,26 @@
+## 0.24.0 (April 4, 2024)
+
+### Features
+
+- [FDebugMenu] Add `input` type for menu items
+- [FDebugMenu] Add `select` type for menu items
+
+### Changes
+
+- [FDebugMenu] Explicitly store data in local storage if a key is set in config
+- [Storybook] Bump Node version to 18.17.1 for Storybook build (github.io page)
+
 ## 0.23.3 (March 20, 2024)
 
 ### Fixes
 
-- [Lib] Add `types` for all icon paths 
+- [Lib] Add `types` for all icon paths
 
 ## 0.23.2 (March 20, 2024)
 
 ### Fixes
 
-- [Lib] Add `types` for all export paths 
+- [Lib] Add `types` for all export paths
 
 ## 0.23.1 (February 13, 2024)
 

diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -1,5 +1 @@
 # Changelog Unreleased
-
-### Changes
-
-- [Storybook] Bump Node version to 18.17.1 for Storybook build (github.io page)
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fifteen/design-system-vue",
-  "version": "0.23.3",
+  "version": "0.24.0",
   "description": "Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System",
   "repository": {
     "type": "git",
@@ -121,7 +121,7 @@
     "@typescript-eslint/parser": "^6.19.0",
     "@typescript-eslint/typescript-estree": "^6.19.0",
     "@vitejs/plugin-vue": "^2.3.3",
-    "@volar/vue-language-plugin-pug": "^1.6.5",
+    "@vue/language-plugin-pug": "^2.0.12",
     "@vue/tsconfig": "^0.4.0",
     "babel-loader": "^8.2.5",
     "camelcase": "^6.3.0",

diff --git a/src/components/FButton.vue b/src/components/FButton.vue
@@ -74,8 +74,9 @@ square($size)
   .FLink__content
     color var(--fbutton--text-color)
 
-  path
-    fill var(--fbutton--text-color)
+  .FIcon__content
+    path
+      fill var(--fbutton--text-color)
 
   &.FButton--ghost,
   &.FButton--outlined
@@ -93,8 +94,9 @@ square($size)
     .FLink__content
       color var(--fbutton--text-color--hover)
 
-    path
-      fill var(--fbutton--text-color--hover)
+    .FIcon__content
+      path
+        fill var(--fbutton--text-color--hover)
 
   &.FButton--outlined
     box-shadow 0 0 0 rem(2) var(--fbutton--outline-color) inset

diff --git a/src/components/FExpandable.vue b/src/components/FExpandable.vue
@@ -22,7 +22,7 @@
 
 <style lang="stylus">
 .FExpandable
-  isolation isolate
+  isolation var(--FExpandable--isolation)
 
 .FExpandable__title
   position relative
@@ -164,6 +164,10 @@ export interface FExpandableProps {
    * Color of the text when hover
    */
   textHoverColor?: Color;
+  /**
+   * In some cases, we need to disable isolation that creates a new stacking context for each expandable instance
+   */
+  noIsolation?: boolean;
 }
 
 const props = withDefaults(defineProps<FExpandableProps>(), {
@@ -174,6 +178,7 @@ const props = withDefaults(defineProps<FExpandableProps>(), {
   hoverColor: 'primary',
   textHoverColor: 'neutral--light-5',
   titleVerticalPadding: 16,
+  noIsolation: false,
 });
 
 const isToggled = useVModelProxy({ props });
@@ -198,6 +203,7 @@ const style = computed(
     '--FExpandable--icon-scale': String(props.iconScale),
     '--FExpandable--hover-color': getCssColor(props.hoverColor),
     '--FExpandable--text-hover-color': getCssColor(props.textHoverColor),
+    '--FExpandable--isolation': props.noIsolation ? 'auto' : 'isolate',
   })
 );
 

diff --git a/src/components/FMenu.vue b/src/components/FMenu.vue
@@ -71,6 +71,11 @@
               )
                 span {{ option.label }}
               span.FMenu__option__description(v-if="option.description") {{ option.description }}
+            .FMenu__option__spacer
+            slot(
+              name="option-suffix"
+              v-bind="{ option, index, isSelected: isSelected(index) }"
+            )
         .FMenu__noOption(v-if="options.length === 0")
           FLoader.FMenu__loader(
             v-if="loading"
@@ -145,6 +150,9 @@
   flex-direction column
   justify-content center
 
+.FMenu__option__spacer
+  flex-grow 1
+
 .FMenu__noOption
   display flex
   justify-content center

diff --git a/src/components/form/FInput.vue b/src/components/form/FInput.vue
@@ -105,7 +105,7 @@ FField.FInput(
   &:hover,
   &:focus
     color var(--color--neutral--light-1)
-    background var(--color--neutral--light-3)
+    background var(--finput--color)
     box-shadow none
 
 .FInput__errorIcon

diff --git a/src/components/form/FSelect.vue b/src/components/form/FSelect.vue
@@ -55,7 +55,7 @@ FField.FSelect(
               .FSelect__text {{ getValueLabel(fieldValue) }}
             .FSelect__placeholder(v-else) {{ placeholder }}
         FIcon.FSelect__icon(
-          v-if="!disabled && !loading"
+          v-if="!loading"
           :name="iconName"
           :size="16"
           color="transparent"
@@ -144,6 +144,9 @@ FField.FSelect(
   .FSelect__placeholder
     color var(--color--neutral--light-1)
 
+  .FSelect__icon
+    opacity 0.25
+
   &,
   &:hover,
   &:focus
@@ -161,7 +164,7 @@ FField.FSelect(
 
 .FSelect--small
   .FSelect__select
-    padding rem(12)
+    padding rem(12) rem(4) rem(12) rem(12)
     height rem(36)
     font-size rem(14)
 </style>
@@ -386,11 +389,18 @@ function getValueLabel(value: string): string | undefined {
 function handleIconClick(event: Event): void {
   if (props.clearable && isMenuOpen.value && fieldValue.value) {
     event.stopPropagation();
-    fieldValue.value = null;
-    emit('clear');
+    clear();
   }
 }
 
+/**
+ * Clear selection
+ */
+function clear(): void {
+  fieldValue.value = null;
+  emit('clear');
+}
+
 /**
  * Handle select blur
  */