Merge pull request #64 from warp-ds/next

Release 1.0.1

CHANGELOG.md

@@ -1,3 +1,35 @@
+## [1.0.1-next.4](https://github.com/warp-ds/vue/compare/v1.0.1-next.3...v1.0.1-next.4) (2023-09-20)
+
+
+### Bug Fixes
+
+* Add fullWidth button prop ([#72](https://github.com/warp-ds/vue/issues/72)) ([f0e76e8](https://github.com/warp-ds/vue/commit/f0e76e89b9d2a1f955b4aea21faca39f9eb48175))
+
+## [1.0.1-next.3](https://github.com/warp-ds/vue/compare/v1.0.1-next.2...v1.0.1-next.3) (2023-09-20)
+
+
+### Bug Fixes
+
+* make tabs accessible for using keyboard keys again ([#71](https://github.com/warp-ds/vue/issues/71)) ([14129cc](https://github.com/warp-ds/vue/commit/14129ccae39b8b3c55a1cb4e0033c3e46441c9be))
+
+## [1.0.1-next.2](https://github.com/warp-ds/vue/compare/v1.0.1-next.1...v1.0.1-next.2) (2023-09-19)
+
+
+### Bug Fixes
+
+* add test case for negative button as it is not just modifier anymore but it is own button type ([#63](https://github.com/warp-ds/vue/issues/63)) ([c9d4950](https://github.com/warp-ds/vue/commit/c9d4950278ee7bbddc80709b3a2161009c15aa2a))
+* **buttons:** set secondary variant styles by default ([#67](https://github.com/warp-ds/vue/issues/67)) ([cde4077](https://github.com/warp-ds/vue/commit/cde407790650b8b694b2cd5d26ede774719a8ae3))
+* **changelog:** remove changes related to unreleased commits ([#68](https://github.com/warp-ds/vue/issues/68)) ([364a355](https://github.com/warp-ds/vue/commit/364a355e45c4c32ce39458e00f86da797000c8e6))
+* remove useless test and update changelog ([#70](https://github.com/warp-ds/vue/issues/70)) ([4ea3fdc](https://github.com/warp-ds/vue/commit/4ea3fdc42bf063b2eff2b1a89708800088c81926))
+* update test for a button and changelog ([#69](https://github.com/warp-ds/vue/issues/69)) ([4eb675e](https://github.com/warp-ds/vue/commit/4eb675e6eb0f6ad065e43bee3b4400d3aae2b373))
+
+## [1.0.1-next.1](https://github.com/warp-ds/vue/compare/v1.0.0...v1.0.1-next.1) (2023-09-01)
+
+
+### Bug Fixes
+
+* use new button classes and improve conditions ([#62](https://github.com/warp-ds/vue/issues/62)) ([1c9fa6c](https://github.com/warp-ds/vue/commit/1c9fa6c4326d2527f1db58f6d94c19ab3e215031))
+
 # 1.0.0 (2023-08-31)
 
 

CONTRIBUTING.md

@@ -44,6 +44,14 @@ Install dependencies by running:
 pnpm install
 ```
 
+### Shiki
+
+Run following to prepare for visualizing the examples and corresponding code:
+
+```sh
+pnpm run cp && pnpm run cp:shikifix
+```
+
 
 ### Start dev server
 

components/button/w-button.vue

@@ -26,7 +26,7 @@ const ariaValueText = i18n._({
  comment: 'Screenreader message for buttons that are loading'
 });
 
-const buttonTypes = [ 
+const buttonVariants = [
  'primary',
  'secondary',
  'negative',
@@ -48,25 +48,57 @@ const props = defineProps({
  loading: Boolean,
  href: String,
  label: String,
+ fullWidth: Boolean,
 })
 
+const defaultVariant = props.secondary || !buttonVariants.find(b => !!props[b]);
+
 const buttonClass = computed(() => ({
- [ccButton.buttonSecondary]: props.secondary && !props.quiet || !buttonTypes.find(b => !!props[b]),
- // primary buttons
- [ccButton.buttonPrimary]: props.primary && !props.negative,
- [ccButton.buttonDestructive]: props.primary && props.negative,
- // quiet
- [ccButton.buttonFlat]: (props.secondary || (!props.negative && !props.utility)) && props.quiet,
- [ccButton.buttonDestructiveFlat]: props.negative && props.quiet,
- [ccButton.buttonUtilityFlat]: props.utility && props.quiet,
- // others
- [ccButton.buttonSmall]: props.small,
- [ccButton.buttonUtility]: props.utility && !props.quiet,
- [ccButton.buttonLink]: props.link,
- [ccButton.buttonPill]: props.pill,
- [ccButton.buttonInProgress]: props.loading,
- [ccButton.buttonIsDisabled]: props.disabled,
+ [ccButton.secondary]: defaultVariant && !props.small && !props.quiet && !props.loading,
+ [ccButton.secondarySmall]: defaultVariant && props.small && !props.quiet && !props.loading,
+ [ccButton.secondarySmallLoading]: defaultVariant && props.small && !props.quiet && props.loading,
+ [ccButton.secondarySmallQuiet]: defaultVariant && props.small && props.quiet && !props.loading,
+ [ccButton.secondarySmallQuietLoading]: defaultVariant && props.small && props.quiet && props.loading,
+ [ccButton.secondaryQuiet]: defaultVariant && !props.small && props.quiet && !props.loading,
+ [ccButton.secondaryQuietLoading]: defaultVariant && !props.small && props.quiet && props.loading,
+ [ccButton.secondaryLoading]: defaultVariant && !props.small && !props.quiet && props.loading,
+ 
+ [ccButton.primary]: props.primary && !props.small && !props.quiet && !props.loading,
+ [ccButton.primarySmall]: props.primary && props.small && !props.quiet && !props.loading,
+ [ccButton.primarySmallQuiet]: props.primary && props.small && props.quiet && !props.loading,
+ [ccButton.primarySmallLoading]: props.primary && props.small && !props.quiet && props.loading,
+ [ccButton.primarySmallQuietLoading]: props.primary && props.small && props.quiet && props.loading,
+ [ccButton.primaryQuiet]: props.primary && !props.small && props.quiet && !props.loading,
+ [ccButton.primaryQuietLoading]: props.primary && !props.small && props.quiet && props.loading,
+ [ccButton.primaryLoading]: props.primary && !props.small && !props.quiet && props.loading,
+
+ [ccButton.utility]: props.utility && !props.small && !props.quiet && !props.loading,
+ [ccButton.utilitySmall]: props.utility && props.small && !props.quiet && !props.loading,
+ [ccButton.utilitySmallQuiet]: props.utility && props.small && props.quiet && !props.loading,
+ [ccButton.utilitySmallLoading]: props.utility && props.small && !props.quiet && props.loading,
+ [ccButton.utilitySmallQuietLoading]: props.utility && props.small && props.quiet && props.loading,
+ [ccButton.utilityQuiet]: props.utility && !props.small && props.quiet && !props.loading,
+ [ccButton.utilityQuietLoading]: props.utility && !props.small && props.quiet && props.loading,
+ [ccButton.utilityLoading]: props.utility && !props.small && !props.quiet && props.loading,
+
+ [ccButton.negative]: props.negative && !props.small && !props.quiet && !props.loading,
+ [ccButton.negativeSmall]: props.negative && props.small && !props.quiet && !props.loading,
+ [ccButton.negativeSmallQuiet]: props.negative && props.small && props.quiet && !props.loading,
+ [ccButton.negativeSmallLoading]: props.negative && props.small && !props.quiet && props.loading,
+ [ccButton.negativeSmallQuietLoading]: props.negative && props.small && props.quiet && props.loading,
+ [ccButton.negativeQuiet]: props.negative && !props.small && props.quiet && !props.loading,
+ [ccButton.negativeQuietLoading]: props.negative && !props.small && props.quiet && props.loading,
+ [ccButton.negativeLoading]: props.negative && !props.small && !props.quiet && props.loading,
+
+ [ccButton.pill]: props.pill && !props.small && !props.loading,
+ [ccButton.pillSmall]: props.pill && props.small && !props.loading,
+ [ccButton.pillLoading]: props.pill && !props.small && props.loading,
+ [ccButton.pillSmallLoading]: props.pill && props.small && props.loading,
+ [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(() => ({

components/tabs/w-tab.vue

@@ -48,7 +48,7 @@ const contentClasses = computed(() => ({
  :aria-selected="isActive"
  :aria-controls="isActive ? `warp-tabpanel-${name}` : undefined"
  :tabindex="isActive ? 0 : -1"
- @keydown="onKeydown"
+ @keydown="controller.onKeydown"
  >
  <span v-if="$slots.default" :class="iconClasses">
  <slot />

dev/pages/Button.vue

@@ -8,16 +8,17 @@ const active = useIsActive(variants)
 const variantControls = [
  { name: 'Primary', radio },
  { name: 'Secondary', radio },
+ { name: 'Negative', radio },
  { name: 'Link', radio },
  { name: 'Utility', radio },
  { name: 'Pill', radio },
 ]
 
 const modifierControls = [
- { name: 'Negative', checkbox },
  { name: 'Quiet', checkbox },
  { name: 'Small', checkbox },
- { name: 'Loading', checkbox }
+ { name: 'Loading', checkbox },
+ { name: 'FullWidth', checkbox }
 ]
 const modifiers = reactive(buildCheckboxState({ controls: modifierControls }))
 </script>
@@ -30,13 +31,14 @@ const modifiers = reactive(buildCheckboxState({ controls: modifierControls }))
  <w-button
  :primary="active('Primary')"
  :secondary="active('Secondary')"
- :negative="modifiers.Negative"
+ :negative="active('Negative')"
  :link="active('Link')"
  :utility="active('Utility')"
  :pill="active('Pill')"
  :quiet="modifiers.Quiet"
  :small="modifiers.Small"
  :loading="modifiers.Loading"
+ :full-width="modifiers.FullWidth"
  label="Hello Warp" />
  </token>
 

package.json

@@ -1,7 +1,7 @@
 {
  "name": "@warp-ds/vue",
  "repository": "git@github.com:warp-ds/vue.git",
- "version": "1.0.0",
+ "version": "1.0.1-next.4",
  "description": "Warp components for Vue 3",
  "type": "module",
  "exports": {
@@ -32,8 +32,8 @@
  "dependencies": {
  "@lingui/core": "^4.3.0",
  "@warp-ds/core": "^1.0.0",
- "@warp-ds/css": "^1.0.0",
- "@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",