Skip to content

Commit

Permalink
[#3209] VaButtonGroup gradient (#3423)
Browse files Browse the repository at this point in the history 
* #3209: fix VaButtonGroup component gradient

* #3209: update VaButtonGroup examples

* #3209: minor styling

* #3209: review suggestions
  • Loading branch information
@RVitaly1978
RVitaly1978 authored May 23, 2023
1 parent 8d28c7b commit 9e12d8b
Show file tree
Hide file tree
Showing 6 changed files with 135 additions and 155 deletions.
41 changes: 17 additions & 24 deletions packages/docs/page-config/ui-elements/button-group/examples/Colors.vue
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,21 @@
<template>
<va-button-group
color="danger"
class="mb-6"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
<div class="flex flex-wrap gap-6 mb-6">
<va-button-group color="danger">
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>

<va-button-group
color="warning"
class="mb-6"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
<va-button-group color="info">
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>

<va-button-group
color="success"
class="mb-6"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
<va-button-group color="#FFD166">
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
</div>
</template>
53 changes: 26 additions & 27 deletions packages/docs/page-config/ui-elements/button-group/examples/Gradient.vue
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,30 @@
<template>
<va-button-group
gradient
color="danger"
class="mb-6"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
<div class="flex flex-wrap gap-6 mb-6">
<va-button-group
gradient
color="danger"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>

<va-button-group
gradient
color="warning"
class="mb-6"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
<va-button-group
gradient
color="info"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>

<va-button-group
gradient
color="success"
class="mb-6"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
<va-button-group
gradient
color="#FFD166"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
</div>
</template>
37 changes: 12 additions & 25 deletions packages/docs/page-config/ui-elements/button-group/examples/Icons.vue
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,15 @@
<template>
<va-button-group class="mb-6">
<va-button icon="create" />
<va-button icon="add" />
<va-button icon="add_circle_outline" />
</va-button-group>
<div class="flex flex-wrap gap-6 mb-6">
<va-button-group>
<va-button icon="create" />
<va-button icon="add" />
<va-button icon="add_circle_outline" />
</va-button-group>

<va-button-group
icon-color="danger"
class="mb-6"
>
<va-button icon="create" />
<va-button icon="add" />
<va-button icon="add_circle_outline" />
</va-button-group>

<va-button-group icon-color="warning">
<va-button icon="create">
One
</va-button>
<va-button icon="add">
Two
</va-button>
<va-button icon="add_circle_outline">
Three
</va-button>
</va-button-group>
<va-button-group icon-color="warning">
<va-button icon="create">One</va-button>
<va-button icon="add">Two</va-button>
<va-button icon="add_circle_outline">Three</va-button>
</va-button-group>
</div>
</template>
28 changes: 12 additions & 16 deletions packages/docs/page-config/ui-elements/button-group/examples/Sizes.vue
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
<template>
<va-button-group
class="mb-6"
size="large"
>
<va-button>L1</va-button>
<va-button>L2</va-button>
<va-button>L3</va-button>
</va-button-group>
<div class="flex flex-wrap items-center gap-6 mb-6">
<va-button-group size="large">
<va-button>L1</va-button>
<va-button>L2</va-button>
<va-button>L3</va-button>
</va-button-group>

<va-button-group
class="mb-6"
size="small"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
<va-button-group size="small">
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
</div>
</template>
98 changes: 44 additions & 54 deletions packages/docs/page-config/ui-elements/button-group/examples/Styles.vue
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,52 @@
<template>
<va-button-group class="mb-6">
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
<div class="flex flex-wrap gap-6 mb-6">
<va-button-group>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>

<va-button-group
preset="primary"
class="mb-6"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
<va-button-group preset="primary">
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>

<va-button-group
preset="secondary"
class="mb-6"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
<va-button-group preset="secondary">
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
</div>

<va-button-group
preset="plain"
class="mb-6"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
<div class="flex flex-wrap gap-6 mb-6">
<va-button-group preset="plain">
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>

<va-button-group
preset="plainOpacity"
class="mb-6"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
<va-button-group preset="plainOpacity">
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
</div>

<va-button-group
preset="secondary"
border-color="primary"
class="mb-6"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
<div class="flex flex-wrap gap-6 mb-6">
<va-button-group
preset="secondary"
border-color="primary"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>

<va-button-group
round
class="mb-6"
>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
<va-button-group round>
<va-button>One</va-button>
<va-button>Two</va-button>
<va-button>Three</va-button>
</va-button-group>
</div>
</template>
33 changes: 24 additions & 9 deletions packages/ui/src/components/va-button-group/VaButtonGroup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,38 +8,52 @@

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { extractComponentProps } from '../../utils/component-options'
import { extractComponentProps, filterComponentProps } from '../../utils/component-options'
import omit from 'lodash/omit.js'
import { useBem, useComponentPresetProp } from '../../composables'
import { useBem, useComponentPresetProp, useColors, useTextColor } from '../../composables'
import { VaConfig } from '../va-config'
import { VaButton } from '../va-button'
const VaButtonProps = omit(extractComponentProps(VaButton), ['block'])
const VaButtonProps = omit(extractComponentProps(VaButton), ['block', 'gradient'])
export default defineComponent({
name: 'VaButtonGroup',
components: { VaConfig },
props: {
...VaButtonProps,
...useComponentPresetProp,
grow: {
type: Boolean,
default: false,
},
grow: { type: Boolean, default: false },
gradient: { type: Boolean, default: false },
},
setup: (props) => {
const buttonConfig = computed(() => ({ VaButton: { ...props } }))
const { getColor, getGradientBackground } = useColors()
const colorComputed = computed(() => getColor(props.color))
const { textColorComputed } = useTextColor(colorComputed)
const filteredProps = filterComponentProps(VaButtonProps)
const buttonConfig = computed(() => ({
VaButton: {
...filteredProps.value,
...(props.gradient && {
color: '#00000000',
textColor: textColorComputed.value,
}),
},
}))
const computedClass = useBem('va-button-group', () => ({
square: !props.round,
grow: props.grow,
small: props.size === 'small',
large: props.size === 'large',
}))
const backgroundColor = computed(() =>
props.gradient ? getGradientBackground(colorComputed.value) : 'transparent',
)
return { buttonConfig, computedClass }
return { buttonConfig, computedClass, backgroundColor }
},
})
</script>
Expand All @@ -54,6 +68,7 @@ export default defineComponent({
border-radius: var(--va-button-group-border-radius);
font-family: var(--va-font-family);
width: max-content;
background: v-bind(backgroundColor);
&--grow {
width: 100%;
Expand Down

0 comments on commit 9e12d8b

Please sign in to comment.