fix: upgrade lit-labs/react version

- adopts the fix for boolean getters and setters from lit/lit#2799 (comment) - fixes an issue introduced in PR #130 where cds-pagination-button was getting disabled="false" rendered
vmware-clarity · Aug 24, 2022 · 7a69762 · 7a69762
1 parent ebd5f55
commit 7a69762
Show file tree

Hide file tree

Showing 15 changed files with 20 additions and 61 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/react/package.json b/projects/react/package.json
@@ -17,7 +17,7 @@
     "@babel/core": "7.12.0",
     "@babel/preset-env": "7.12.0",
     "@cds/core": "file:./../core/dist/lib",
-    "@lit-labs/react": "^1.0.1",
+    "@lit-labs/react": "^1.0.8",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",

diff --git a/projects/react/src/button/__snapshots__/index.test.tsx.snap b/projects/react/src/button/__snapshots__/index.test.tsx.snap
@@ -18,7 +18,6 @@ exports[`CdsButton snapshot 1`] = `
     danger
   </cds-button>
   <cds-button
-    disabled="true"
     tabindex="0"
   >
     disabled

diff --git a/projects/react/src/button/index.test.tsx b/projects/react/src/button/index.test.tsx
@@ -17,9 +17,8 @@ describe('CdsButton', () => {
 
     expect(await screen.findByRole('button', { name: 'primary' })).toHaveAttribute('status', 'primary');
     expect(await screen.findByRole('button', { name: 'success' })).toHaveAttribute('status', 'success');
-    // There's a lit issue that is resulting in this being 'true' instead of ''
-    // https://github.com/lit/lit/issues/2799#issuecomment-1203178300
-    expect(await screen.findByRole('button', { name: 'disabled' })).toHaveAttribute('disabled', 'true');
+    expect(await screen.findByRole('button', { name: 'disabled' })).toBeDisabled();
+    expect(await screen.findByRole('button', { name: 'disabled' })).toHaveAttribute('disabled', '');
   });
 
   it('snapshot', () => {

diff --git a/projects/react/src/date/__snapshots__/index.test.tsx.snap b/projects/react/src/date/__snapshots__/index.test.tsx.snap
@@ -5,7 +5,6 @@ exports[`CdsDate snapshot 1`] = `
   <cds-date
     cds-control=""
     control-width="shrink"
-    layout="horizontal"
   >
     <style />
     <label

diff --git a/projects/react/src/file/__snapshots__/index.test.tsx.snap b/projects/react/src/file/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`CdsFile snapshot 1`] = `
 <div>
   <cds-file
     cds-control=""
-    layout="vertical"
   >
     <label>
       label

diff --git a/projects/react/src/forms/__snapshots__/index.test.tsx.snap b/projects/react/src/forms/__snapshots__/index.test.tsx.snap
@@ -7,7 +7,6 @@ exports[`CdsControl snapshot 1`] = `
   >
     <cds-control
       cds-control=""
-      layout="compact"
     >
       <label>
         label
@@ -23,7 +22,6 @@ exports[`CdsControl snapshot 1`] = `
     </cds-control>
     <cds-control
       cds-control=""
-      layout="compact"
     >
       <label>
         label
@@ -39,7 +37,6 @@ exports[`CdsControl snapshot 1`] = `
     </cds-control>
     <cds-control
       cds-control=""
-      layout="compact"
     >
       <label>
         label

diff --git a/projects/react/src/icon/__snapshots__/index.test.tsx.snap b/projects/react/src/icon/__snapshots__/index.test.tsx.snap
@@ -2,25 +2,10 @@
 
 exports[`CdsIcon snapshot 1`] = `
 <div>
-  <cds-icon
-    shape="user"
-    size="lg"
-  />
-  <cds-icon
-    shape="user"
-    size="lg"
-  />
-  <cds-icon
-    shape="user"
-    size="lg"
-  />
-  <cds-icon
-    shape="user"
-    size="lg"
-  />
-  <cds-icon
-    shape="user"
-    size="lg"
-  />
+  <cds-icon />
+  <cds-icon />
+  <cds-icon />
+  <cds-icon />
+  <cds-icon />
 </div>
 `;
diff --git a/projects/react/src/input/__snapshots__/index.test.tsx.snap b/projects/react/src/input/__snapshots__/index.test.tsx.snap
@@ -8,7 +8,6 @@ exports[`CdsInput snapshot 1`] = `
   >
     <cds-input
       cds-control=""
-      layout="vertical"
     >
       <label>
         label
@@ -19,7 +18,6 @@ exports[`CdsInput snapshot 1`] = `
     </cds-input>
     <cds-input
       cds-control=""
-      layout="vertical"
     >
       <label>
         disabled

diff --git a/projects/react/src/pagination/__snapshots__/index.test.tsx.snap b/projects/react/src/pagination/__snapshots__/index.test.tsx.snap
@@ -8,7 +8,6 @@ exports[`CdsPagination snapshot 1`] = `
     <style />
     <cds-pagination-button
       aria-label="go to first"
-      disabled="true"
       tabindex="0"
     />
     <cds-pagination-button

diff --git a/projects/react/src/pagination/index.test.tsx b/projects/react/src/pagination/index.test.tsx
@@ -10,11 +10,12 @@ describe('CdsPagination', () => {
         <CdsPaginationButton aria-label="go to previous" action="prev" disabled></CdsPaginationButton>
         <span aria-label="current page">1 / 3</span>
         <CdsPaginationButton aria-label="go to next" action="next"></CdsPaginationButton>
-        <CdsPaginationButton aria-label="go to last" action="last"></CdsPaginationButton>
+        <CdsPaginationButton aria-label="go to last" action="last" disabled={false}></CdsPaginationButton>
       </CdsPagination>
     );
     expect(document.querySelector('cds-pagination')).toBeInTheDocument();
     expect(await screen.findByRole('button', { name: /go to first/i })).toBeDisabled();
+    expect(await screen.findByRole('button', { name: /go to next/i })).not.toBeDisabled();
     expect(await screen.findByRole('button', { name: /go to last/i })).not.toBeDisabled();
     expect(await screen.findByLabelText('current page')).toHaveTextContent(/1 \/ 3/i);
   });
@@ -23,7 +24,7 @@ describe('CdsPagination', () => {
     const { container } = render(
       <CdsPagination aria-label="pagination">
         <CdsPaginationButton aria-label="go to first" action="prev" disabled></CdsPaginationButton>
-        <CdsPaginationButton aria-label="go to next" action="next"></CdsPaginationButton>
+        <CdsPaginationButton aria-label="go to next" action="next" disabled={false}></CdsPaginationButton>
       </CdsPagination>
     );
     expect(container).toMatchSnapshot();

diff --git a/projects/react/src/password/__snapshots__/index.test.tsx.snap b/projects/react/src/password/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`CdsPassword snapshot 1`] = `
 <div>
   <cds-password
     cds-control=""
-    layout="vertical"
   >
     <label>
       label

diff --git a/projects/react/src/range/__snapshots__/index.test.tsx.snap b/projects/react/src/range/__snapshots__/index.test.tsx.snap
@@ -5,7 +5,6 @@ exports[`CdsRange snapshot 1`] = `
   <cds-form-group>
     <cds-range
       cds-control=""
-      layout="horizontal"
     >
       <style />
       <label>
@@ -22,7 +21,6 @@ exports[`CdsRange snapshot 1`] = `
     </cds-range>
     <cds-range
       cds-control=""
-      layout="horizontal"
     >
       <style />
       <label>
@@ -40,7 +38,6 @@ exports[`CdsRange snapshot 1`] = `
     </cds-range>
     <cds-range
       cds-control=""
-      layout="horizontal"
     >
       <style />
       <label>
@@ -57,7 +54,6 @@ exports[`CdsRange snapshot 1`] = `
     </cds-range>
     <cds-range
       cds-control=""
-      layout="horizontal"
     >
       <style />
       <label>

diff --git a/projects/react/src/search/__snapshots__/index.test.tsx.snap b/projects/react/src/search/__snapshots__/index.test.tsx.snap
@@ -62,7 +62,6 @@ exports[`CdsSearch snapshot 1`] = `
     <cds-form-group>
       <cds-search
         cds-control=""
-        layout="horizontal"
       >
         <style />
         <label>
@@ -79,7 +78,6 @@ exports[`CdsSearch snapshot 1`] = `
       </cds-search>
       <cds-search
         cds-control=""
-        layout="horizontal"
       >
         <style />
         <label>
@@ -96,7 +94,6 @@ exports[`CdsSearch snapshot 1`] = `
       </cds-search>
       <cds-search
         cds-control=""
-        layout="horizontal"
       >
         <style />
         <label>
@@ -118,7 +115,6 @@ exports[`CdsSearch snapshot 1`] = `
     <cds-form-group>
       <cds-search
         cds-control=""
-        layout="compact"
       >
         <style />
         <label>
@@ -135,7 +131,6 @@ exports[`CdsSearch snapshot 1`] = `
       </cds-search>
       <cds-search
         cds-control=""
-        layout="compact"
       >
         <style />
         <label>
@@ -152,7 +147,6 @@ exports[`CdsSearch snapshot 1`] = `
       </cds-search>
       <cds-search
         cds-control=""
-        layout="compact"
       >
         <style />
         <label>

diff --git a/projects/react/src/textarea/__snapshots__/index.test.tsx.snap b/projects/react/src/textarea/__snapshots__/index.test.tsx.snap
@@ -9,7 +9,6 @@ exports[`CdsTextarea snapshot 1`] = `
     <cds-form-group>
       <cds-textarea
         cds-control=""
-        layout="vertical"
       >
         <label>
           label
@@ -23,7 +22,6 @@ exports[`CdsTextarea snapshot 1`] = `
       </cds-textarea>
       <cds-textarea
         cds-control=""
-        layout="vertical"
       >
         <label>
           error status
@@ -37,7 +35,6 @@ exports[`CdsTextarea snapshot 1`] = `
       </cds-textarea>
       <cds-textarea
         cds-control=""
-        layout="vertical"
       >
         <label>
           success status
@@ -56,7 +53,6 @@ exports[`CdsTextarea snapshot 1`] = `
     <cds-form-group>
       <cds-textarea
         cds-control=""
-        layout="horizontal"
       >
         <label>
           label
@@ -70,7 +66,6 @@ exports[`CdsTextarea snapshot 1`] = `
       </cds-textarea>
       <cds-textarea
         cds-control=""
-        layout="horizontal"
       >
         <label>
           error status
@@ -84,7 +79,6 @@ exports[`CdsTextarea snapshot 1`] = `
       </cds-textarea>
       <cds-textarea
         cds-control=""
-        layout="horizontal"
       >
         <label>
           success status