fix(checkbox): add missing readonly prop (#3859)

* chore(checkbox): added missing prop value * chore(checkbox): updated disabled on readonly * chore(checkbox): update golden image cache * chore(checkbox): allowing support for both setting and removing readonly * chore(checkbox): added the disabled proprety directly to the input * chore(checkbox): updated golden image cache * chore(checkbox): added test for readonly typing --------- Co-authored-by: Rajdeep Chandra <rajdeepc@adobe.com>
adobe · Dec 14, 2023 · 35b5649 · 35b5649
1 parent 2328a62
commit 35b5649
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 13 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 0726ebbd02b4064ebab9683ec4e3ae00163a21ed
+        default: 0214646d25bd039099827dde1d6b00663e084836
     wireit_cache_name:
         type: string
         default: wireit

diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
@@ -71,7 +71,7 @@
         "@spectrum-web-components/shared": "^0.40.1"
     },
     "devDependencies": {
-        "@spectrum-css/checkbox": "^7.0.11"
+        "@spectrum-css/checkbox": "^8.0.3"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/checkbox/src/CheckboxMixin.ts b/packages/checkbox/src/CheckboxMixin.ts
@@ -29,6 +29,7 @@ export interface CheckboxElement {
     handleChange(): void;
     inputElement: HTMLInputElement;
     name?: string;
+    readonly?: boolean;
 }
 
 export function CheckboxMixin<T extends Constructor<ReactiveElement>>(
@@ -74,6 +75,7 @@ export function CheckboxMixin<T extends Constructor<ReactiveElement>>(
                     name=${ifDefined(this.name || undefined)}
                     type="checkbox"
                     .checked=${this.checked}
+                    ?disabled=${this.readonly}
                     @change=${this.handleChange}
                 />
             `;

diff --git a/packages/checkbox/src/spectrum-checkbox.css b/packages/checkbox/src/spectrum-checkbox.css
@@ -700,6 +700,10 @@ governing permissions and limitations under the License.
     position: relative;
 }
 #box:before {
+    block-size: var(
+        --mod-checkbox-control-size,
+        var(--spectrum-checkbox-control-size)
+    );
     border-color: var(
         --highcontrast-checkbox-color-default,
         var(
@@ -720,7 +724,7 @@ governing permissions and limitations under the License.
     content: '';
     display: block;
     forced-color-adjust: none;
-    height: var(
+    inline-size: var(
         --mod-checkbox-control-size,
         var(--spectrum-checkbox-control-size)
     );
@@ -737,10 +741,6 @@ governing permissions and limitations under the License.
                 var(--spectrum-checkbox-animation-duration)
             )
             ease-in-out;
-    width: var(
-        --mod-checkbox-control-size,
-        var(--spectrum-checkbox-control-size)
-    );
     z-index: 0;
 }
 #box:after {
@@ -756,7 +756,8 @@ governing permissions and limitations under the License.
     );
     content: '';
     display: block;
-    inset: 0;
+    inset-block: 0;
+    inset-inline: 0;
     margin: var(
         --mod-checkbox-focus-indicator-gap,
         var(--spectrum-checkbox-focus-indicator-gap)

diff --git a/packages/checkbox/test/checkbox.test.ts b/packages/checkbox/test/checkbox.test.ts
@@ -274,7 +274,11 @@ describe('Checkbox', () => {
 
         expect(el.checked).to.be.true;
     });
-
+    it('should recognize readonly property', async () => {
+        const el: Checkbox = await fixture('<sp-checkbox></sp-checkbox>');
+        expect(el.readonly).to.not.throw;
+        expect(el.readonly).to.be.a('boolean');
+    });
     it('maintains its value when [readonly]', async () => {
         const el = await fixture<Checkbox>(html`
             <sp-checkbox id="checkbox0" checked readonly>Component</sp-checkbox>

diff --git a/yarn.lock b/yarn.lock
@@ -6797,10 +6797,10 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-6.2.1.tgz#8a6d5906483e9b2fd5e3debbc9d61ffee0ec53a0"
   integrity sha512-piawqolhedkdudq6TOB1PopRvFtFkaOWiDGlscPaHLGD4DsmLSmlFp6YRl/AmmD6vnPQs+mq/EUmNFamzUroAQ==
 
-"@spectrum-css/checkbox@^7.0.11":
-  version "7.0.11"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-7.0.11.tgz#1dea027dce45b575c8cdde7b020aeba2207981fe"
-  integrity sha512-L7B/fHaMo9+zdjJROHsYMlxN4huPEnnJjTR/qDnA/0y46InGIBipNCDa514Li3gL61qMeMvJCiRW3W+cDXOpxw==
+"@spectrum-css/checkbox@^8.0.3":
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-8.0.3.tgz#d03088d5091a0b401bdc9938e625bf47244b924d"
+  integrity sha512-E4XIDl/nx16Z1ITdjgIbe9d2cgSVCzS5l31NJmzHzwnR9LK11j72FnOjclXmVTmaTQa9vkaS6InC0hOaROrxvg==
 
 "@spectrum-css/clearbutton@^5.0.5":
   version "5.0.12"