Merge pull request #14 from chakra-ui/feat/button-group

Feat/button group

Author: codebender828

nodemon.json

@@ -25,6 +25,7 @@
     "c-button": "yarn workspace @chakra-ui/c-button",
     "c-icon": "yarn workspace @chakra-ui/c-icon",
     "system": "yarn workspace @chakra-ui/vue-system",
+    "utils": "yarn workspace @chakra-ui/vue-utils",
     "theme": "yarn workspace @chakra-ui/vue-theme",
     "nuxt": "yarn workspace @chakra-ui/nuxt-next",
     "test-utils": "yarn workspace @chakra-ui/vue-test-utils",
@@ -73,7 +74,6 @@
     "jest-transform-stub": "^2.0.0",
     "lerna": "^3.22.1",
     "lint-staged": "^10.5.3",
-    "nodemon": "^2.0.7",
     "prettier": "^2.1.2",
     "pretty": "^2.0.0",
     "recursive-readdir": "^2.2.2",

package.json

@@ -9,7 +9,8 @@ const CAccordion = defineComponent({
     },
   },
   setup(props, { slots, attrs }) {
-    return () => h(chakra(props.as), { ...attrs }, slots)
+    return () =>
+      h(chakra(props.as, { label: 'accordion' }), { ...attrs }, slots)
   },
 })
 

packages/c-accordion/src/index.ts

@@ -3,7 +3,7 @@
 exports[`should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="css-0"
+    class="chakra-accordion css-0"
   />
 </DocumentFragment>
 `;

packages/c-accordion/tests/__snapshots__/c-accordion.test.ts.snap

@@ -26,6 +26,7 @@
   "dependencies": {
     "@chakra-ui/styled-system": "^1.4.1",
     "@chakra-ui/vue-system": "*",
+    "@chakra-ui/vue-utils": "*",
     "@chakra-ui/c-icon": "*"
   }
 }

packages/c-alert/package.json

@@ -96,7 +96,7 @@ export const CAlert = defineComponent({
 
     return () =>
       h(
-        chakra(props.as, 'alert'),
+        chakra(props.as, { label: 'alert' }),
         {
           role: 'alert',
           ...alertStyles,
@@ -119,7 +119,7 @@ export const CAlertTitle = defineComponent({
 
     return () =>
       h(
-        chakra('div', 'alert__title'),
+        chakra('div', { label: 'alert__title' }),
         {
           ...styles.title,
           ...attrs,
@@ -141,7 +141,7 @@ export const CAlertDescription = defineComponent({
 
     return () =>
       h(
-        chakra('div', 'alert__description'),
+        chakra('div', { label: 'alert__description' }),
         {
           ...styles.description,
           ...attrs,

packages/c-alert/src/alert.ts

@@ -0,0 +1,15 @@
+<template>
+  <c-button-group variant="outline" is-attached>
+    <c-button color-scheme="blue">Save</c-button>
+    <c-button>Cancel</c-button>
+  </c-button-group>
+</template>
+
+<script lang="ts">
+import { CButton, CButtonGroup } from '@chakra-ui/c-button/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  components: { CButton, CButtonGroup },
+})
+</script>

packages/c-button/examples/with-attached-buttons.vue

@@ -0,0 +1,15 @@
+<template>
+  <c-button-group variant="outline">
+    <c-button color-scheme="blue">Save</c-button>
+    <c-button>Cancel</c-button>
+  </c-button-group>
+</template>
+
+<script lang="ts">
+import { CButton, CButtonGroup } from '@chakra-ui/c-button/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  components: { CButton, CButtonGroup },
+})
+</script>

packages/c-button/examples/with-button-group.vue

@@ -0,0 +1,15 @@
+<template>
+  <c-button mr="3" variant="solid" color-scheme="teal"> Solid </c-button>
+  <c-button mr="3" variant="outline" color-scheme="teal"> Outline </c-button>
+  <c-button mr="3" variant="ghost" color-scheme="teal"> Ghost </c-button>
+  <c-button mr="3" variant="link" color-scheme="teal"> Link </c-button>
+</template>
+
+<script lang="ts">
+import { CButton } from '@chakra-ui/c-button/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  components: { CButton },
+})
+</script>

packages/c-button/examples/with-button-variants.vue

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@chakra-ui/styled-system": "^1.4.1",
-    "@chakra-ui/vue-system": "*"
+    "@chakra-ui/vue-system": "*",
+    "@chakra-ui/vue-utils": "*"
   }
 }