Size config rework (#3333)

.envrc

@@ -0,0 +1,2 @@
+type nvm >/dev/null 2>&1 || . "$NVM_DIR/nvm.sh"
+nvm use

.ws-context

@@ -0,0 +1,3 @@
+{
+  "framework": "vue"
+}

packages/ui/build/configs/vite.web-components.ts

@@ -5,6 +5,7 @@ import { chunkSplitPlugin } from 'vite-plugin-chunk-split'
 import { removeSideEffectedChunks } from '../plugins/remove-side-effected-chunks'
 import { webComponentsNestedStyles } from '../plugins/web-components-nested-styles'
 import { readFileSync } from 'fs'
+import { resolve } from '../common-config'
 
 /**
  * Build web components folder. It is a separated build of vuestic-ui for SPA-only (?: maybe for SPA-only).
@@ -19,6 +20,7 @@ const packageJSON = JSON.parse(readFileSync(resolver(process.cwd(), './package.j
 const dependencies = [...Object.keys(packageJSON.dependencies), ...Object.keys(packageJSON.peerDependencies)]
 
 export default () => defineConfig({
+  resolve,
   build: {
     lib: {
       entry: resolver(process.cwd(), 'src/main.ts'),

packages/ui/package.json

@@ -167,4 +167,4 @@
       ]
     }
   }
-}
+}

packages/ui/src/components/va-avatar-group/VaAvatarGroup.stories.ts

@@ -1,5 +1,4 @@
 import { VaAvatarGroup } from './'
-import { addText } from '../../../.storybook/interaction-utils/addText'
 
 export default {
   title: 'VaAvatarGroup',

packages/ui/src/components/va-avatar-group/VaAvatarGroup.vue

@@ -28,9 +28,9 @@ import { computed, PropType } from 'vue'
 
 import { VaAvatar } from '../va-avatar'
 
-import pick from 'lodash/pick.js'
+import pick from 'lodash/pick'
 import { extractComponentProps, filterComponentProps } from '../../utils/component-options'
-import { useBem, useComponentPresetProp, useSize, useSizeProps } from '../../composables'
+import { useBem, useComponentPresetProp } from '../../composables'
 
 const VaAvatarProps = extractComponentProps(VaAvatar)
 </script>
@@ -42,7 +42,6 @@ defineOptions({
 })
 
 const props = defineProps({
-  ...useSizeProps,
   ...useComponentPresetProp,
   ...VaAvatarProps,
 
@@ -77,14 +76,8 @@ const restOptionsCount = computed(() => {
 
   return hasOptions && canAddMoreOptions ? remainingOptions : 0
 })
-const { sizeComputed, fontSizeComputed } = useSize(props, 'VaAvatarGroup')
 
-const filteredAvatarProps = filterComponentProps(VaAvatarProps)
-const avatarProps = computed(() => ({
-  ...filteredAvatarProps.value,
-  fontSize: fontSizeComputed.value,
-  size: sizeComputed.value,
-}))
+const avatarProps = filterComponentProps(VaAvatarProps)
 </script>
 
 <style lang="scss">

packages/ui/src/components/va-avatar/VaAvatar.stories.ts

@@ -1,5 +1,6 @@
 import { VaAvatar } from './'
 import { h } from 'vue'
+import { StoryFn } from '@storybook/vue3'
 
 export default {
   title: 'VaAvatar',
@@ -58,32 +59,40 @@ export const Size = () => ({
   `,
 })
 
-export const SizesConfig = () => ({
+const sizesConfig = { small: { variables: { size: '16px' } }, medium: { variables: { size: '24px' } }, large: { variables: { size: '32px' } } }
+
+export const SizesConfig: StoryFn<typeof VaAvatar> = (args) => ({
   components: { VaAvatar },
+  setup () {
+    return { args }
+  },
   template: `
     [small: 16px]
     <VaAvatar
-      :sizesConfig="{ 'defaultSize': 24, 'sizes': { 'small': 16, 'medium': 24, 'large': 32 } }"
+      v-bind="args"
       size="small"
     >
       Text
     </VaAvatar>
     [medium: 24px]
     <VaAvatar
-      :sizesConfig="{ 'defaultSize': 24, 'sizes': { 'small': 16, 'medium': 24, 'large': 32 } }"
+      v-bind="args"
       size="medium"
     >
       Text
     </VaAvatar>
     [large: 32px]
     <VaAvatar
-      :sizesConfig="{ 'defaultSize': 24, 'sizes': { 'small': 16, 'medium': 24, 'large': 32 } }"
+      v-bind="args"
       size="large"
     >
       Text
     </VaAvatar>
   `,
 })
+SizesConfig.args = {
+  sizesConfig,
+}
 
 export const FontSize = () => ({
   components: { VaAvatar },

packages/ui/src/components/va-avatar/VaAvatar.vue

@@ -6,7 +6,7 @@
   >
     <va-progress-circle
       v-if="$props.loading"
-      :size="sizeComputed"
+      :size="props.size"
       :color="colorComputed"
       indeterminate
     />
@@ -37,7 +37,6 @@ import pick from 'lodash/pick'
 
 import {
   useBem,
-  useSize,
   useColors,
   useTextColor,
   useSizeProps,
@@ -48,6 +47,9 @@ import { extractComponentProps, filterComponentProps } from '../../utils/compone
 
 import { VaIcon, VaProgressCircle, VaFallback } from '../index'
 
+import { useComponentVariables } from '../../composables/useComponentVariables'
+import { variables } from './const'
+
 const VaFallbackPropsDeclaration = extractComponentProps(VaFallback)
 </script>
 
@@ -83,11 +85,14 @@ const backgroundColorComputed = computed(() => {
 
   return colorComputed.value
 })
-const { sizeComputed, fontSizeComputed } = useSize(props, 'VaAvatar')
+
 const { textColorComputed } = useTextColor(backgroundColorComputed)
 
+const variablesComputed = useComponentVariables(variables, props)
+
 const computedStyle = computed(() => ({
-  fontSize: props.fontSize || fontSizeComputed.value,
+  ...variablesComputed.value,
+  fontSize: props.fontSize,
 }))
 
 const classesComputed = useBem('va-avatar', () => ({
@@ -121,20 +126,21 @@ defineExpose({
 @import "variables";
 
 .va-avatar {
-  align-items: var(--va-avatar-align-items);
-  display: var(--va-avatar-display);
-  justify-content: var(--va-avatar-justify-content);
-  line-height: var(--va-avatar-line-height);
-  position: var(--va-avatar-position);
-  text-align: var(--va-avatar-text-align);
-  vertical-align: var(--va-avatar-vertical-align);
-  border-radius: var(--va-avatar-border-radius);
+  align-items: var(--va-avatar-align-items-current);
+  display: var(--va-avatar-display-current);
+  justify-content: var(--va-avatar-justify-content-current);
+  line-height: var(--va-avatar-line-height-current);
+  position: var(--va-avatar-position-current);
+  text-align: var(--va-avatar-text-align-current);
+  vertical-align: var(--va-avatar-vertical-align-current);
+  border-radius: var(--va-avatar-border-radius-current);
   font-family: var(--va-font-family);
   background-color: v-bind(backgroundColorComputed);
   color: v-bind(textColorComputed);
-  width: v-bind(sizeComputed);
-  min-width: v-bind(sizeComputed);  // We only define width because common use case would be flex row, for column we expect user to set appropriate styling externally.
-  height: v-bind(sizeComputed);
+  width: var(--va-avatar-size-current);
+  min-width: var(--va-avatar-size-current);  // We only define width because common use case would be flex row, for column we expect user to set appropriate styling externally.
+  height: var(--va-avatar-size-current);
+  font-size: var(--va-avatar-font-size-current);
 
   &--square {
     --va-avatar-border-radius: 0;

packages/ui/src/components/va-avatar/_variables.scss

@@ -9,4 +9,13 @@
   --va-avatar-position: relative;
   --va-avatar-line-height: normal;
   --va-avatar-border-radius: 50%;
+
+  /* Small */
+  --va-avatar-small-size: 32px;
+
+  /* Medium */
+  --va-avatar-size: 48px;
+
+  /* Large */
+  --va-avatar-large-size: 64px;
 }

packages/ui/src/components/va-avatar/const.ts

@@ -0,0 +1,12 @@
+export const variables = [
+  'display',
+  'justifyContent',
+  'alignItems',
+  'textAlign',
+  'verticalAlign',
+  'position',
+  'lineHeight',
+  'borderRadius',
+  'size',
+  'fontSize',
+] as const

packages/ui/src/components/va-button/VaButton.demo.vue

@@ -92,6 +92,7 @@
             <va-button size="small" preset="secondary">Secondary</va-button>
             <va-button size="small" preset="plain">Plain</va-button>
             <va-button size="small" preset="plainOpacity">Plain with opacity</va-button>
+            <va-button size="small" loading />
           </td>
         </tr>
 
@@ -103,6 +104,7 @@
             <va-button size="large" preset="secondary">Secondary</va-button>
             <va-button size="large" preset="plain">Plain</va-button>
             <va-button size="large" preset="plainOpacity">Plain with opacity</va-button>
+            <va-button size="large" loading />
           </td>
         </tr>