@cypress-design/react-checkbox 0.4.6 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @cypress-design/react-checkbox
2
2
 
3
+ ## 0.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#151](https://github.com/cypress-io/cypress-design/pull/151) [`8b0e735`](https://github.com/cypress-io/cypress-design/commit/8b0e7356eb64a6b3583d3486dda8ecbb11c34cca) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: use clases compatible with both windi and tailwind
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [[`106b61a`](https://github.com/cypress-io/cypress-design/commit/106b61a97888f956a4c9d235fde5efb4243e1445), [`7b4f416`](https://github.com/cypress-io/cypress-design/commit/7b4f4162a0d150aa8cab7ec239faebb58c39464d)]:
12
+ - @cypress-design/react-icon@0.17.0
13
+
3
14
  ## 0.4.6
4
15
 
5
16
  ### Patch Changes
package/Checkbox.tsx CHANGED
@@ -81,7 +81,7 @@ export const Checkbox: FunctionComponent<CheckboxProps> = ({
81
81
  )}
82
82
  <span
83
83
  className={clsx([
84
- `block border-1 border-solid rounded h-16px w-16px flex flex-shrink-0 items-center text-white`,
84
+ `block border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white`,
85
85
  disabled
86
86
  ? 'border-gray-200 bg-gray-100'
87
87
  : localChecked
@@ -97,7 +97,7 @@ export const Checkbox: FunctionComponent<CheckboxProps> = ({
97
97
  <span
98
98
  className={clsx([
99
99
  disabled ? 'text-gray-500' : 'text-gray-800',
100
- 'block ml-8px text-16px leading-24px font-light select-none',
100
+ 'block ml-[8px] text-[16px] leading-[24px] font-light select-none',
101
101
  ])}
102
102
  >
103
103
  {label}
@@ -17,8 +17,10 @@ describe('Checkbox', () => {
17
17
  )
18
18
 
19
19
  cy.get('input[type="checkbox"]').should('be.checked')
20
+ cy.percySnapshot()
20
21
  cy.contains('Welcome guide settings').click()
21
22
  cy.get('input[type="checkbox"]').should('not.be.checked')
23
+ cy.percySnapshot()
22
24
  })
23
25
 
24
26
  it('changes when checkbox is clicked', () => {
@@ -48,6 +50,8 @@ describe('Checkbox', () => {
48
50
  />
49
51
  )
50
52
 
53
+ cy.percySnapshot()
54
+
51
55
  cy.get('label span:first-child').invoke('outerWidth').should('equal', 16)
52
56
  })
53
57
  })
package/dist/index.es.mjs CHANGED
@@ -82,7 +82,7 @@ function __rest(s, e) {
82
82
  var compileReactIconProperties = function (_a) {
83
83
  var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
84
84
  var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
85
- if (!ICON_COLOR_PROP_NAMES.includes(attrName)) {
85
+ if (!ICON_COLOR_PROP_NAMES.includes(attrName) && attrName !== 'name') {
86
86
  newAttributes[attrName] =
87
87
  attributes[attrName];
88
88
  }
@@ -130,7 +130,7 @@ var Checkbox = function (_a) {
130
130
  // <windi-keep strokeColor="white"/>
131
131
  React.createElement(IconCheckmarkSmall, { strokeColor: "white", className: "absolute" })),
132
132
  React.createElement("span", { className: clsx([
133
- "block border-1 border-solid rounded h-16px w-16px flex flex-shrink-0 items-center text-white",
133
+ "block border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white",
134
134
  disabled
135
135
  ? 'border-gray-200 bg-gray-100'
136
136
  : localChecked
@@ -143,11 +143,11 @@ var Checkbox = function (_a) {
143
143
  ]) }),
144
144
  label && (React.createElement("span", { className: clsx([
145
145
  disabled ? 'text-gray-500' : 'text-gray-800',
146
- 'block ml-8px text-16px leading-24px font-light select-none',
146
+ 'block ml-[8px] text-[16px] leading-[24px] font-light select-none',
147
147
  ]) }, label)))));
148
148
  };
149
149
 
150
150
  export { Checkbox as default };
151
151
 
152
- /* <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"> */
152
+ /* <windicss-keep class="block relative flex items-center absolute inset-0 w-0 h-0 opacity-0 border 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"> */
153
153
  //# sourceMappingURL=index.es.mjs.map