@cypress-design/react-checkbox 0.4.5 → 0.4.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cypress-design/react-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.tsx

@@ -81,7 +81,7 @@ export const Checkbox: FunctionComponent<CheckboxProps> = ({
         )}
         <span
           className={clsx([
-            `block border-1 border-solid rounded h-16px w-16px flex items-center text-white`,
+            `block border-1 border-solid rounded h-16px w-16px flex flex-shrink-0 items-center text-white`,
             disabled
               ? 'border-gray-200 bg-gray-100'
               : localChecked
@@ -97,7 +97,7 @@ export const Checkbox: FunctionComponent<CheckboxProps> = ({
           <span
             className={clsx([
               disabled ? 'text-gray-500' : 'text-gray-800',
-              'block ml-2 text-16px leading-normal font-light select-none',
+              'block ml-8px text-16px leading-24px font-light select-none',
             ])}
           >
             {label}

package/CheckboxReact.cy.tsx

@@ -38,4 +38,16 @@ describe('Checkbox', () => {
     cy.get('svg').click()
     cy.get('input[type="checkbox"]').should('not.be.checked')
   })
+
+  it('keeps its width when label is long', () => {
+    mount(
+      <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"
+        onChange={() => {}}
+      />
+    )
+
+    cy.get('label span:first-child').invoke('outerWidth').should('equal', 16)
+  })
 })

package/dist/index.es.mjs

@@ -88,7 +88,7 @@ var compileReactIconProperties = function (_a) {
         }
         return newAttributes;
     }, {});
-    var componentProps = __assign({ width: size, height: size, fill: 'none', dangerouslySetInnerHTML: {
+    var componentProps = __assign({ width: size, height: size, viewBox: "0 0 " + size + " " + size, fill: 'none', dangerouslySetInnerHTML: {
             __html: body
         } }, filteredAttributes);
     if (attributes.className) {
@@ -130,7 +130,7 @@ var Checkbox = function (_a) {
             // <windi-keep strokeColor="white"/>
             React.createElement(IconCheckmarkSmall, { strokeColor: "white", className: "absolute" })),
             React.createElement("span", { className: clsx([
-                    "block border-1 border-solid rounded h-16px w-16px flex items-center text-white",
+                    "block border-1 border-solid rounded h-16px w-16px flex flex-shrink-0 items-center text-white",
                     disabled
                         ? 'border-gray-200 bg-gray-100'
                         : localChecked
@@ -143,11 +143,11 @@ var Checkbox = function (_a) {
                 ]) }),
             label && (React.createElement("span", { className: clsx([
                     disabled ? 'text-gray-500' : 'text-gray-800',
-                    'block ml-2 text-16px leading-normal font-light select-none',
+                    'block ml-8px text-16px leading-24px font-light select-none',
                 ]) }, label)))));
 };
 
 export { Checkbox as default };
 
-/* <windicss-keep class="block relative flex items-center absolute inset-0 w-0 h-0 opacity-0 border-1 border-solid rounded h-16px w-16px text-white 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 text-gray-500 text-gray-800 ml-2 text-16px leading-normal font-light select-none icon-dark-white"> */
+/* <windicss-keep class="block relative flex items-center absolute inset-0 w-0 h-0 opacity-0 border-1 border-solid rounded h-16px w-16px flex-shrink-0 text-white 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 text-gray-500 text-gray-800 ml-8px text-16px leading-24px font-light select-none icon-dark-white"> */
 //# sourceMappingURL=index.es.mjs.map