fix(input-wrapper): refactoring and redesign (#3642)

* fix(input-wrapper): refactoring and redesign * fix(input-wrapper): text color on dark theme * fix(useTextColor): improve currentColor detection * fix(useTextColor): va-chip text color * fix(VaCounter|VaSelect): remove extra props * fix(from-elements): standartize borders * fix(from-elements): unify icons * feat(components-config): allow passing attributes in components config * fix: allow passing preset to VaInputWrapper from complex components * feat: added solid preset to checkbox and radio button * chore: remove extra css variables * fix(va-input-wrapper): correct styles apply from css v-bind * fix(va-input-wrapper): va messages list styles * fix(va-input-wrapper): colro styles * docs(va-input-wrapper): update presets * fix: validation * fix: recursive imports * docs: improve validation demo * feat(time-input): update value with arrows * docs: added change log block * fix(build): wrong types * fix(build): lost reactivity in production build * fix(va-button-toggle): remove invalid attributes * chore: stylelint fixes * fix(config-transport): correctly merge styles * fix(va-textarea): row calculation * fix(va-textarea): made as separate component * fix(va-input-wrapper): focus * fix(va-textarea): added validation * docs: update input docs * docs: update select docs * fix(time-input): changed default time-input position * fix(time-input): bottom gap size * raw: input sizes * docs(textarea): added textarea docs * fix(input-wrapper): introduce small input sizes * raw: collapse * wip: remove small sizes * fix: collapse animation * raw: collapse content slot * feat: refactor collapses * docs: pretiffy input docs * docs: update select docs * feat(select): search v-model * docs: improve inputs sizes in demos * fix(textarea): fix resize icon * fix(radio): improve docs demos * docs(textarea): prettify demos * chore(textarea): fix storybook demos * fix(textarea): scroll and resize icon * fix(collapse): stateful by default * Update packages/ui/src/components/va-input-wrapper/VaInputWrapper.demo.vue * chore: add label slot * fix(#3737): do not apply custom styles for dropdown content in select * fix(#3736): allow date input null model value * fix(#3741): input accessibility improvements * fix(select): accessibility improvement * feat(counter): accessibility improvement * feat(select): accessibility improvement * feat(date-input): accessibility improvement * fix(va-message-list): refactor and fixes * fix(types): add null check * chore(docs): update badges * fix(#3470): textarea autosize on firefox * fix(#3700): prety radio docs --------- Co-authored-by: Yauheni Prakopchyk <ontrew@gmail.com>
epicmaxco · Aug 31, 2023 · 2091c20 · 2091c20
1 parent 663a14b
commit 2091c20
Show file tree

Hide file tree

Showing 183 changed files with 2,929 additions and 2,002 deletions.
diff --git a/packages/docs/modules/page-config/blocks/change-log/index.ts b/packages/docs/modules/page-config/blocks/change-log/index.ts
@@ -0,0 +1,14 @@
+import { definePageConfigBlock } from '../../types'
+import Component from './index.vue'
+import { ChangeLog } from './types'
+
+export default definePageConfigBlock({
+  setup: (log: ChangeLog) => {
+    return {
+      type: 'change-log' as const,
+      log
+    }
+  },
+  component: Component,
+})
+
diff --git a/packages/docs/modules/page-config/blocks/change-log/index.vue b/packages/docs/modules/page-config/blocks/change-log/index.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { MarkdownView } from "../shared/markdown";
+import { Anchor } from "../shared/anchor";
+import { ChangeLog } from "./types";
+import { PropType, computed } from "vue";
+
+const props = defineProps({
+  log: { type: Object as PropType<ChangeLog>, required: true },
+});
+
+const versions = computed(() => Object.keys(props.log));
+</script>
+
+<template>
+  <VaCollapse
+    class="page-config-change-log"
+    flat
+  >
+    <template #header>
+      <div class="page-config-change-log__title">
+        <h2 class="va-h5">
+          Change log
+          <Anchor text="Change log" />
+        </h2>
+        <VaIcon name="va-arrow-down" />
+      </div>
+    </template>
+
+    <div
+      v-for="version in versions"
+      :key="version"
+      class="page-config-change-log__block"
+    >
+      <h3 class="va-h6 page-config-change-log__version">
+        v{{ version }}
+      </h3>
+      <ul class="va-unordered">
+        <li
+          v-for="logs in log[version]"
+          :key="logs"
+        >
+          <MarkdownView :content="logs" />
+        </li>
+      </ul>
+      <VaButton
+        :href="`https://github.com/epicmaxco/vuestic-ui/releases/tag/v${version}`"
+        preset="plain"
+      >
+        View full release change log
+      </VaButton>
+    </div>
+  </VaCollapse>
+</template>
+
+<style lang="scss">
+.page-config-change-log {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+
+  &__block {
+    padding: 1rem 0;
+  }
+
+  &__version {
+    margin-bottom: 1rem;
+  }
+
+  &__title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+</style>
diff --git a/packages/docs/modules/page-config/blocks/change-log/types.ts b/packages/docs/modules/page-config/blocks/change-log/types.ts
@@ -0,0 +1 @@
+export type ChangeLog = Record<`${number}.${number}.${number}`, string[]>
diff --git a/packages/docs/modules/page-config/runtime/index.ts b/packages/docs/modules/page-config/runtime/index.ts
@@ -18,6 +18,7 @@ import link from '../blocks/link'
 import list from '../blocks/list'
 import table from '../blocks/table'
 import cards from '../blocks/cards'
+import changeLog from '../blocks/change-log';
 import { APIDescriptionOptions, type ManualApiOptions } from '../blocks/api/types'
 
 // Need to define type in collapse without recursion
@@ -38,6 +39,7 @@ const blocksWithoutCollapse = {
   list,
   table,
   cards,
+  changeLog,
 }
 
 export type BaseBlock = ReturnType<(typeof blocksWithoutCollapse)[keyof typeof blocksWithoutCollapse]>

diff --git a/packages/docs/page-config/introduction/accessibility-guide/examples/WaiAria.vue b/packages/docs/page-config/introduction/accessibility-guide/examples/WaiAria.vue
@@ -1,7 +1,7 @@
 <template>
   <va-input
     v-model="text"
-    bordered
+    preset="bordered"
     label="Input Name"
   />
 </template>

diff --git a/packages/docs/page-config/navigationRoutes.ts b/packages/docs/page-config/navigationRoutes.ts
@@ -1,3 +1,4 @@
+import { navigationBadge } from './../utils/navigation/badge';
 import { navigationBadge, type NavigationBadge } from "../utils/navigation/badge";
 
 export type NavigationRoute = {
@@ -208,16 +209,22 @@ export const navigationRoutes: NavigationRoute[] = [
       {
         name: "checkbox",
         displayName: "Checkbox",
+        meta: {
+          badge: navigationBadge.updated('1.8.0'),
+        }
       },
       {
         name: "counter",
         displayName: "Counter",
+        meta: {
+          badge: navigationBadge.updated('1.8.0'),
+        }
       },
       {
         name: "radio",
         displayName: "Radio",
         meta: {
-          badge : navigationBadge.updated('1.7.0'),
+          badge : navigationBadge.updated('1.8.0'),
         }
       },
       {
@@ -227,12 +234,22 @@ export const navigationRoutes: NavigationRoute[] = [
       {
         name: "input",
         displayName: "Input",
+        meta: {
+          badge: navigationBadge.updated('1.8.0'),
+        }
+      },
+      {
+        name: "textarea",
+        displayName: "Textarea",
+        meta: {
+          badge : navigationBadge.new('1.8.0'),
+        }
       },
       {
         name: "select",
         displayName: "Select",
         meta: {
-          badge : navigationBadge.updated('1.7.0'),
+          badge : navigationBadge.updated('1.8.0'),
         }
       },
       {
@@ -254,6 +271,9 @@ export const navigationRoutes: NavigationRoute[] = [
       {
         name: "date-input",
         displayName: "Date Input",
+        meta: {
+          badge : navigationBadge.updated('1.8.0'),
+        }
       },
       {
         name: "time-picker",
@@ -262,10 +282,16 @@ export const navigationRoutes: NavigationRoute[] = [
       {
         name: "time-input",
         displayName: "Time Input",
+        meta: {
+          badge : navigationBadge.updated('1.8.0'),
+        }
       },
       {
         name: "color-input",
         displayName: "Color Input",
+        meta: {
+          badge: navigationBadge.updated('1.8.0'),
+        }
       },
 
       {

diff --git a/packages/docs/page-config/styles/css-variables/code/overriding.scss b/packages/docs/page-config/styles/css-variables/code/overriding.scss
@@ -1,4 +1,4 @@
 :root {
   --va-checkbox-square-border-radius: 50%;
-  --va-input-border-radius: 99999px;
+  --va-input-wrapper-border-radius: 99999px;
 }
diff --git a/packages/docs/page-config/styles/css-variables/components/global-overriding.vue b/packages/docs/page-config/styles/css-variables/components/global-overriding.vue
@@ -13,7 +13,7 @@
 /* Do not override globally in demo to prevent docs bugs... */
 .rounded-checkbox-demo {
   --va-checkbox-square-border-radius: 50%;
-  --va-input-border-radius: 99999px;
+  --va-input-wrapper-border-radius: 99999px;
 
   display: flex;
   flex-direction: column;

diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Default.vue b/packages/docs/page-config/ui-elements/accordion/examples/Default.vue
@@ -8,9 +8,9 @@
       :key="index"
       :header="collapse.title"
     >
-      <div>
+      <template #content>
         {{ collapse.content }}
-      </div>
+      </template>
     </va-collapse>
   </va-accordion>
 </template>
@@ -21,9 +21,9 @@ export default {
     return {
       value: [false, false, false],
       collapses: [
-        { title: "First collapse", content: "first collapse content" },
-        { title: "Second collapse", content: "second collapse content" },
-        { title: "Third collapse", content: "third collapse content" },
+        { title: "First collapse", content: "First collapse content" },
+        { title: "Second collapse", content: "Second collapse content" },
+        { title: "Third collapse", content: "Third collapse content" },
       ],
     };
   },

diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Flat.vue b/packages/docs/page-config/ui-elements/accordion/examples/Flat.vue
diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Menu.vue b/packages/docs/page-config/ui-elements/accordion/examples/Menu.vue
@@ -7,20 +7,15 @@
       v-for="(group, idx) in items"
       :key="idx"
       :header="group.title"
-      text-color="textPrimary"
-      color="textInverted"
-      flat
     >
-      <div class="pt-0 px-4 pb-3">
-        <router-link
-          v-for="(navItem, idx) in group.items"
-          :key="idx"
-          class="nav-item"
-          :to="navItem.to"
-        >
-          {{ navItem.label }}
-        </router-link>
-      </div>
+      <router-link
+        v-for="(navItem, idx) in group.items"
+        :key="idx"
+        class="nav-item"
+        :to="navItem.to"
+      >
+        {{ navItem.label }}
+      </router-link>
     </va-collapse>
   </va-accordion>
 </template>
@@ -60,18 +55,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.va-collapse + .va-collapse {
-  border-top: 1px solid var(--va-background-element);
-}
-
 .nav-item {
-  padding: 0.5rem;
   display: flex;
   flex-direction: column;
+  padding: var(--va-collapse-padding);
   transition: all 0.2s ease-in;
 
   &:hover {
-    background-color: #c0c0c0;
+    background-color: var(--va-background-element);
   }
 }
 </style>
diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Multiple.vue b/packages/docs/page-config/ui-elements/accordion/examples/Multiple.vue
@@ -9,9 +9,9 @@
       :key="index"
       :header="collapse.title"
     >
-      <div>
+      <template #content>
         {{ collapse.content }}
-      </div>
+      </template>
     </va-collapse>
   </va-accordion>
 </template>
@@ -22,9 +22,9 @@ export default {
     return {
       value: [false, false, false],
       collapses: [
-        { title: "First collapse", content: "first collapse content" },
-        { title: "Second collapse", content: "second collapse content" },
-        { title: "Third collapse", content: "third collapse content" },
+        { title: "First collapse", content: "First collapse content" },
+        { title: "Second collapse", content: "Second collapse content" },
+        { title: "Third collapse", content: "Third collapse content" },
       ],
     };
   },

diff --git a/packages/docs/page-config/ui-elements/accordion/index.ts b/packages/docs/page-config/ui-elements/accordion/index.ts
@@ -18,27 +18,23 @@ export default definePageConfig({
       description: "Accordion component allows you to select multiple collapses."
     }),
 
-    block.example("Inset", {
-      title: "Inset",
-      description: "Active collapse component becomes smaller."
-    }),
-
-    block.example("Popout", {
-      title: "Popout",
-      description: "Active collapse component becomes bigger."
-    }),
-
-    block.example("Flat", { title: "Flat" }),
-
     block.example("Menu", {
       title: "Menu",
       description: "One of the interesting ways to use the component is a collapsing menu."
     }),
 
+    block.link("See example with VaSidebarItem", "/ui-elements/sidebar-item#advanced-case-with-va-accordion"),
+
     block.subtitle("Accessibility"),
     block.paragraph("Expand/collapse of accordion item in focus is dependent on `mutilple` prop, for other accessbility information see [VaCollapse accessibility section](/ui-elements/collapse#all-accessibility)[[target=_blank]]."),
 
     block.subtitle("API"),
     block.api("VaAccordion", apiDescription, apiOptions),
+
+    block.changeLog({
+      '1.8.0': [
+        'Removed `flat` prop and changed default look to flat',
+      ]
+    })
   ],
 });