@cypress-design/vue-checkbox 0.4.5 → 0.4.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cypress-design/vue-checkbox
 
+## 0.4.6
+
+### Patch Changes
+
+- [#112](https://github.com/cypress-io/cypress-design/pull/112) [`d229b48`](https://github.com/cypress-io/cypress-design/commit/d229b48a3806a882abe83c9ebf9c32ed18d2c47f) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: when label is too big avoid checkbox shrinking
+
 ## 0.4.5
 
 ### Patch Changes

package/Checkbox.vue

@@ -60,7 +60,7 @@ function updated() {
 }
 
 const checkboxClasses = computed(() => [
-  'block border-1 border-solid rounded h-16px w-16px',
+  'block border-1 border-solid rounded h-16px w-16px flex-shrink-0',
   props.disabled
     ? 'border-gray-200 bg-gray-100'
     : localChecked.value
@@ -95,7 +95,7 @@ const checkboxClasses = computed(() => [
         <span
           v-if="label"
           :class="[
-            'ml-2 text-16px leading-normal font-light select-none',
+            'ml-8px text-16px leading-24px font-light select-none',
             disabled ? 'text-gray-500' : 'text-gray-800',
           ]"
         >

package/CheckboxVue.cy.tsx

@@ -39,6 +39,19 @@ describe('<Checkbox />', () => {
     cy.get('input[type="checkbox"]').should('not.be.checked')
   })
 
+  it('keeps its width when label is long', () => {
+    mount(() => {
+      return (
+        <Checkbox
+          label="lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+          id="lorem-checkbox"
+        />
+      )
+    })
+
+    cy.get('label span:first-child').invoke('outerWidth').should('equal', 16)
+  })
+
   it('renders vModel', () => {
     const isChecked = ref(false)
     mount(() => {

package/dist/index.es.mjs

@@ -1,39 +1,40 @@
-import { h as k, defineComponent as p, ref as f, computed as y, openBlock as d, createElementBlock as b, createElementVNode as i, createBlock as C, unref as m, createCommentVNode as h, normalizeClass as g, renderSlot as v, toDisplayString as x } from "vue";
+import { h as k, defineComponent as p, ref as f, computed as x, openBlock as i, createElementBlock as b, createElementVNode as d, createBlock as y, unref as m, createCommentVNode as h, normalizeClass as g, renderSlot as C, toDisplayString as v } from "vue";
 import * as w from "@cypress-design/icon-registry";
-import { ICON_COLOR_PROP_NAMES as S } from "@cypress-design/icon-registry";
-const j = ({
-  body: e,
+import { ICON_COLOR_PROP_NAMES as B } from "@cypress-design/icon-registry";
+const S = ({
+  body: o,
   compiledClasses: t,
-  size: o,
+  size: e,
   class: l,
   interactiveColorsOnGroup: c,
   ...a
 }) => {
-  const n = Object.keys(a).reduce((u, s) => (S.includes(s) || (u[s] = a[s]), u), {}), r = {
-    width: o,
-    height: o,
+  const n = Object.keys(a).reduce((u, s) => (B.includes(s) || (u[s] = a[s]), u), {}), r = {
+    width: e,
+    height: e,
+    viewBox: `0 0 ${e} ${e}`,
     fill: "none",
-    innerHTML: e,
+    innerHTML: o,
     ...n
   };
   return t.length && (r.class = t.join(" ")), r;
-}, z = (e) => {
-  const { sizeWithDefault: t, compiledClasses: o } = w.getComponentAttributes({ ...e, availableSizes: ["16"] }), l = {
+}, j = (o) => {
+  const { sizeWithDefault: t, compiledClasses: e } = w.getComponentAttributes({ ...o, availableSizes: ["16"] }), l = {
     16: '<path d="M5 8.5 7.5 11 11 5" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
   }[t];
   if (!l)
     throw Error(`Icon "checkmark-small" is not available in size ${t}`);
-  return k("svg", j({
-    ...e,
+  return k("svg", S({
+    ...o,
     size: t,
     body: l,
-    compiledClasses: o
+    compiledClasses: e
   }));
-}, B = { class: "block relative flex items-center" }, O = ["id", "name", "disabled", "checked"], V = ["for"];
+}, z = { class: "block relative flex items-center" }, O = ["id", "name", "disabled", "checked"], V = ["for"];
 function N() {
   return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, "");
 }
-const D = /* @__PURE__ */ p({
+const $ = /* @__PURE__ */ p({
   __name: "Checkbox",
   props: {
     id: { default: () => N() },
@@ -45,57 +46,57 @@ const D = /* @__PURE__ */ p({
     label: null
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const o = e, l = f(o.modelValue || o.checked);
+  setup(o, { emit: t }) {
+    const e = o, l = f(e.modelValue || e.checked);
     function c() {
       l.value = !l.value, t("update:modelValue", l.value);
     }
-    const a = y(() => [
-      "block border-1 border-solid rounded h-16px w-16px",
-      o.disabled ? "border-gray-200 bg-gray-100" : l.value ? {
-        "border-indigo-500 bg-indigo-400": o.color === "indigo",
-        "border-jade-500 bg-jade-400": o.color === "jade",
-        "border-red-500 bg-red-400": o.color === "red"
+    const a = x(() => [
+      "block border-1 border-solid rounded h-16px w-16px flex-shrink-0",
+      e.disabled ? "border-gray-200 bg-gray-100" : l.value ? {
+        "border-indigo-500 bg-indigo-400": e.color === "indigo",
+        "border-jade-500 bg-jade-400": e.color === "jade",
+        "border-red-500 bg-red-400": e.color === "red"
       } : "border-gray-200 bg-white"
     ]);
-    return (n, r) => (d(), b("span", B, [
-      i("input", {
-        id: e.id,
+    return (n, r) => (i(), b("span", z, [
+      d("input", {
+        id: o.id,
         class: "absolute inset-0 w-0 h-0 opacity-0",
-        name: e.name || e.id,
+        name: o.name || o.id,
         type: "checkbox",
         onChange: c,
-        disabled: o.disabled,
+        disabled: e.disabled,
         checked: l.value
       }, null, 40, O),
-      i("label", {
+      d("label", {
         className: "flex items-center",
-        for: e.id
+        for: o.id
       }, [
-        l.value ? (d(), C(m(z), {
+        l.value ? (i(), y(m(j), {
           key: 0,
           strokeColor: "white",
           class: "absolute"
         })) : h("", !0),
-        i("span", {
+        d("span", {
           class: g(m(a))
         }, null, 2),
-        v(n.$slots, "label", {}, () => [
-          e.label ? (d(), b("span", {
+        C(n.$slots, "label", {}, () => [
+          o.label ? (i(), b("span", {
             key: 0,
             class: g([
-              "ml-2 text-16px leading-normal font-light select-none",
-              e.disabled ? "text-gray-500" : "text-gray-800"
+              "ml-8px text-16px leading-24px font-light select-none",
+              o.disabled ? "text-gray-500" : "text-gray-800"
             ])
-          }, x(e.label), 3)) : h("", !0)
+          }, v(o.label), 3)) : h("", !0)
         ])
       ], 8, V)
     ]));
   }
 });
 export {
-  D as default
+  $ as default
 };
 
-/* <windicss-keep class="block border-1 border-solid rounded h-16px w-16px border-gray-200 bg-gray-100 border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 bg-white relative flex items-center absolute inset-0 w-0 h-0 opacity-0 ml-2 text-16px leading-normal font-light select-none text-gray-500 text-gray-800 icon-dark-white"> */
+/* <windicss-keep class="block border-1 border-solid rounded h-16px w-16px flex-shrink-0 border-gray-200 bg-gray-100 border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 bg-white relative flex items-center absolute inset-0 w-0 h-0 opacity-0 ml-8px text-16px leading-24px font-light select-none text-gray-500 text-gray-800 icon-dark-white"> */
 //# sourceMappingURL=index.es.mjs.map