fix: Add fullWidth button prop (#72)

* fix: Add fullWidth prop to w-button component

* add fullWidth modifier to Button-component

components/button/w-button.vue

@@ -48,6 +48,7 @@ const props = defineProps({
  loading: Boolean,
  href: String,
  label: String,
+ fullWidth: Boolean,
 })
 
 const defaultVariant = props.secondary || !buttonVariants.find(b => !!props[b]);
@@ -96,6 +97,8 @@ const buttonClass = computed(() => ({
  [ccButton.link]: props.link && !props.small,
  [ccButton.linkSmall]: props.link && props.small,
  [ccButton.linkAsButton]: !!props.href,
+ [ccButton.fullWidth]: props.fullWidth,
+ [ccButton.contentWidth]: !props.fullWidth,
 }))
 
 const saneDefaults = computed(() => ({

dev/pages/Button.vue

@@ -17,7 +17,8 @@ const variantControls = [
 const modifierControls = [
  { name: 'Quiet', checkbox },
  { name: 'Small', checkbox },
- { name: 'Loading', checkbox }
+ { name: 'Loading', checkbox },
+ { name: 'FullWidth', checkbox }
 ]
 const modifiers = reactive(buildCheckboxState({ controls: modifierControls }))
 </script>
@@ -37,6 +38,7 @@ const modifiers = reactive(buildCheckboxState({ controls: modifierControls }))
  :quiet="modifiers.Quiet"
  :small="modifiers.Small"
  :loading="modifiers.Loading"
+ :full-width="modifiers.FullWidth"
  label="Hello Warp" />
  </token>
 

package.json

@@ -32,8 +32,8 @@
  "dependencies": {
  "@lingui/core": "^4.3.0",
  "@warp-ds/core": "^1.0.0",
- "@warp-ds/css": "^1.0.1",
- "@warp-ds/uno": "^1.0.0",
+ "@warp-ds/css": "^1.1.0",
+ "@warp-ds/uno": "^1.1.0",
  "@floating-ui/dom": "^1.5.1",
  "create-v-model": "^2.2.0",
  "dom-focus-lock": "^1.1.0",
@@ -62,7 +62,7 @@
  "happy-dom": "^9.20.3",
  "semantic-release": "^21.1.1",
  "shiki": "^0.14.3",
- "unocss": "^0.55.3",
+ "unocss": "^0.56.0",
  "vite": "^4.4.9",
  "viteik": "^1.0.3",
  "vitest": "^0.34.3",