[#1923] New buttons design implementation

packages/ui/src/components/va-app-bar/AppBarContentExample.vue

@@ -1,9 +1,9 @@
 <template>
-  <va-button icon="home" :color="color" flat :rounded="false" />
-  <va-button icon="info" :color="color" flat :rounded="false" />
-  <va-button icon="battery" :color="color" flat :rounded="false" />
+  <va-button icon="home" :color="color" preset="plain" />
+  <va-button icon="info" :color="color" preset="plain" />
+  <va-button icon="battery" :color="color" preset="plain" />
   <va-spacer />
-  <va-button :color="color" flat :rounded="false">
+  <va-button :color="color" preset="plain">
     Login
   </va-button>
   <va-button-dropdown :color="color" size="small" icon="ellipsis">
@@ -12,12 +12,11 @@
 </template>
 
 <script>
-import VaButton from '../va-button/VaButton.vue'
+import { VaButton } from '../va-button'
 import VaSpacer from '../va-spacer/VaSpacer.vue'
 import VaButtonDropdown from '../va-button-dropdown/VaButtonDropdown.vue'
 
 export default {
-
   name: 'AppBarContentExample',
   components: {
     VaButton,

packages/ui/src/components/va-button-dropdown/VaButtonDropdown.demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <VbDemo>
+  <VbDemo class="va-button-dropdown-demo">
     <VbCard title="default">
       <va-button-dropdown label="label">
         Content
@@ -54,35 +54,30 @@
         Content
       </va-button-dropdown>
       <va-button-dropdown
-        outline
         label="outline"
+        preset="secondary"
+        border-color="primary"
       >
         Content
       </va-button-dropdown>
       <va-button-dropdown
-        flat
-        label="flat"
+        label="plain"
+        preset="plain"
       >
         Content
       </va-button-dropdown>
       <va-button-dropdown
-        outline
-        split
         label="outline split"
-      >
-        Content
-      </va-button-dropdown>
-      <va-button-dropdown
-        size="small"
+        preset="secondary"
+        border-color="primary"
         split
-        label="small + split"
       >
         Content
       </va-button-dropdown>
       <va-button-dropdown
-        size="large"
+        label="small + split"
+        size="small"
         split
-        label="large + split"
       >
         Content
       </va-button-dropdown>
@@ -213,10 +208,17 @@ export default {
       console.log('click', e)
     },
   },
-  data () {
-    return {
-      value: true,
-    }
-  },
+  data: () => ({
+    value: true,
+  }),
 }
 </script>
+
+<style lang="scss">
+.va-button-dropdown-demo {
+  .va-button-dropdown {
+    margin-right: 16px;
+    margin-bottom: 16px;
+  }
+}
+</style>

packages/ui/src/components/va-button-dropdown/VaButtonDropdown.vue

@@ -1,20 +1,20 @@
 <template>
-  <div :class="computedClass">
+  <div class="va-button-dropdown" :class="computedClass">
     <va-dropdown
       v-if="!$props.split"
+      v-model="valueComputed"
       :disabled="$props.disabled"
       :placement="$props.placement"
       :offset="$props.offset"
       :keep-anchor-width="$props.keepAnchorWidth"
       :close-on-content-click="$props.closeOnContentClick"
       :stateful="$props.stateful"
-      v-model="valueComputed"
     >
       <template #anchor>
         <va-button
           :disabled="$props.disabled"
           :round="!$props.label && !$slots.label"
-          v-bind="{ ...computedButtonIcons, ...computedViewStyles }"
+          v-bind="{ ...computedButtonIcons, ...buttonPropsComputed }"
           v-on="listeners"
           @keydown.esc.prevent="hideDropdown"
         >
@@ -31,8 +31,8 @@
 
     <va-button-group
       v-else
-      :class="{ 'va-button-group__left-icon': $props.leftIcon }"
-      v-bind="computedViewStyles"
+      :class="splitButtonClassComputed"
+      v-bind="buttonPropsComputed"
     >
       <va-button
         v-if="!$props.leftIcon"
@@ -46,11 +46,11 @@
       </va-button>
 
       <va-dropdown
+        v-model="valueComputed"
         :disabled="$props.disabled || $props.disableDropdown"
         :placement="$props.placement"
         :offset="$props.offset"
         :stateful="$props.stateful"
-        v-model="valueComputed"
       >
         <template #anchor>
           <va-button
@@ -81,67 +81,53 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
-import pick from 'lodash/pick.js'
+import { defineComponent, PropType, computed } from 'vue'
+import { extractComponentProps } from '../../utils/child-props'
 
-import { useStatefulProps, useStateful } from '../../composables/useStateful'
+import { useBem } from '../../composables/useBem'
 import { useEmitProxy } from '../../composables/useEmitProxy'
 import { Placement, placementsPositions } from '../../composables/usePopover'
+import { useStatefulProps, useStateful } from '../../composables/useStateful'
+import { useDeprecatedProps } from '../../composables/useDeprecatedProps'
 import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
-import { VaDropdown, VaDropdownContent } from '../va-dropdown'
 import { VaButton } from '../va-button'
 import { VaButtonGroup } from '../va-button-group'
+import { VaDropdown, VaDropdownContent } from '../va-dropdown'
 
-const { createEmits, createVOnListeners: createListeners } = useEmitProxy(
-  ['click'],
-)
+import omit from 'lodash/omit.js'
 
+const { createEmits, createVOnListeners: createListeners } = useEmitProxy(['click'])
 const { createEmits: createMainButtonEmits, createVOnListeners: createMainButtonListeners } = useEmitProxy(
   [{ listen: 'click', emit: 'main-button-click' }],
 )
 
-const componentName = 'VaButtonDropdown'
+const VaButtonProps = extractComponentProps(VaButton)
 
 export default defineComponent({
-  name: componentName,
-
+  name: 'VaButtonDropdown',
   components: {
-    VaButtonGroup,
     VaButton,
     VaDropdown,
+    VaButtonGroup,
     VaDropdownContent,
   },
-
   emits: ['update:modelValue', ...createEmits(), ...createMainButtonEmits()],
-
   props: {
-    ...useStatefulProps,
+    ...VaButtonProps,
     ...useComponentPresetProp,
-
+    ...useStatefulProps,
     modelValue: { type: Boolean, default: false },
     stateful: { type: Boolean, default: true },
 
-    color: { type: String, default: 'primary' },
-    textColor: { type: String, default: undefined },
-    size: {
-      type: String as PropType<'medium' | 'small' | 'large'>,
-      default: 'medium',
-      validator: (value: string) => ['medium', 'small', 'large'].includes(value),
-    },
-    outline: { type: Boolean, default: false },
-    flat: { type: Boolean, default: false },
-    rounded: { type: Boolean, default: true },
-    gradient: { type: Boolean, default: undefined },
-
     icon: { type: String, default: 'expand_more' },
     openedIcon: { type: String, default: 'expand_less' },
     hideIcon: { type: Boolean, default: false },
     leftIcon: { type: Boolean, default: false },
 
+    disabled: { type: Boolean, default: false },
     disableButton: { type: Boolean, default: false },
     disableDropdown: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
 
     placement: {
       type: String as PropType<Placement>,
@@ -161,27 +147,35 @@ export default defineComponent({
   },
 
   setup (props, { emit, slots }) {
+    // temp
+    useDeprecatedProps(['flat', 'outline'])
+
     const { valueComputed } = useStateful(props, emit)
 
-    const computedIcon = computed<string>(() => {
-      return valueComputed.value ? props.openedIcon : props.icon
-    })
+    const computedIcon = computed(() => valueComputed.value ? props.openedIcon : props.icon)
 
-    const computedClass = computed(() => ({
-      'va-button-dropdown': true,
-      'va-button-dropdown--split': props.split,
-      'va-button-dropdown--normal': props.size === 'medium',
-      'va-button-dropdown--large': props.size === 'large',
-      'va-button-dropdown--small': props.size === 'small',
+    const computedClass = useBem('va-button-dropdown', () => ({
+      split: props.split,
     }))
 
     const computedButtonIcons = computed(() => {
+      if (props.hideIcon) { return {} }
+
       const propName = (props.label || slots.label) && !props.leftIcon ? 'icon-right' : 'icon'
-      return props.hideIcon ? {} : { [propName]: computedIcon.value }
+      return { [propName]: computedIcon.value }
     })
 
-    const computedViewStyles = computed(
-      () => pick(props, ['outline', 'gradient', 'rounded', 'flat', 'size', 'color']),
+    const buttonPropsFiltered = computed(() => {
+      const filteredProps = omit(VaButtonProps, ['to', 'href', 'loading', 'icon', 'iconRight', 'disabled'])
+      return Object.keys(filteredProps)
+    })
+    const buttonPropsComputed = computed(
+      () => Object.entries(props)
+        .filter(([key, _]) => buttonPropsFiltered.value.includes(key))
+        .reduce((acc, [key, value]) => {
+          Object.assign(acc, { [key]: value })
+          return acc
+        }, {}),
     )
 
     const computedMainButtonProps = computed(() => ({
@@ -190,18 +184,21 @@ export default defineComponent({
       loading: props.loading,
     }))
 
+    const splitButtonClassComputed = computed(() => ({ 'va-button-group__left-icon': props.leftIcon }))
+
     const hideDropdown = () => { valueComputed.value = false }
 
     return {
       hideDropdown,
       valueComputed,
       computedIcon,
       computedClass,
-      listeners: createListeners(emit),
-      mainButtonListeners: createMainButtonListeners(emit),
       computedButtonIcons,
-      computedViewStyles,
+      buttonPropsComputed,
       computedMainButtonProps,
+      splitButtonClassComputed,
+      listeners: createListeners(emit),
+      mainButtonListeners: createMainButtonListeners(emit),
     }
   },
 })