fix: use latest @spectrum-css/thumbnail with built in "cover" support

adobe · Jan 7, 2022 · d152b4e · d152b4e
1 parent d23f735
commit d152b4e
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -184,7 +184,7 @@
     "resolutions": {
         "cssnano/**/postcss-calc": "7.0.0"
     },
-    "customElements": "projects/documentation/custom-elements.json",
+    "customElements": ".storybook/custom-elements.json",
     "workspaces": [
         "packages/*",
         "projects/*"

diff --git a/packages/thumbnail/package.json b/packages/thumbnail/package.json
@@ -48,7 +48,7 @@
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/thumbnail": "^2.0.1"
+        "@spectrum-css/thumbnail": "^2.0.5"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/thumbnail/src/Thumbnail.ts b/packages/thumbnail/src/Thumbnail.ts
@@ -37,6 +37,9 @@ export class Thumbnail extends SizedMixin(SpectrumElement, {
     @property({ type: String, reflect: true })
     public background?: string;
 
+    @property({ type: Boolean, reflect: true })
+    public cover = false;
+
     protected render(): TemplateResult {
         return html`
             ${this.background

diff --git a/packages/thumbnail/src/spectrum-config.js b/packages/thumbnail/src/spectrum-config.js
@@ -29,6 +29,11 @@ const config = {
                     name: 'focused',
                     selector: '.is-focused',
                 },
+                {
+                    type: 'boolean',
+                    name: 'cover',
+                    selector: '.spectrum-Thumbnail--cover',
+                },
                 {
                     type: 'enum',
                     name: 'size',

diff --git a/packages/thumbnail/src/spectrum-thumbnail.css b/packages/thumbnail/src/spectrum-thumbnail.css
@@ -233,6 +233,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     max-width: 100%;
     z-index: 1;
 }
+:host([cover]) ::slotted(*) {
+    height: 100%; /* .spectrum-Thumbnail--cover .spectrum-Thumbnail-image */
+    object-fit: cover;
+    object-position: center;
+    width: 100%;
+}
 .background {
     background-position: 50%;
     background-size: cover;

diff --git a/packages/thumbnail/src/thumbnail.css b/packages/thumbnail/src/thumbnail.css
@@ -15,9 +15,3 @@ governing permissions and limitations under the License.
 ::slotted(:not(img)) {
     display: none;
 }
-
-:host([cover]) ::slotted(img) {
-    object-fit: cover;
-    width: 100%;
-    height: 100%;
-}
diff --git a/yarn.lock b/yarn.lock
@@ -4145,10 +4145,10 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.1.1.tgz#38f2137d956eea535da5f28911bbf38c7f2ab0f8"
   integrity sha512-t/UBnanOvqiXeOki0DXEcLS+InKMZt+VhAAHynHvK2oyJ0+hBa5SUv1XS0POT0sBBZ2GoLnz4SEp0u5ZIkBhVQ==
 
-"@spectrum-css/thumbnail@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/thumbnail/-/thumbnail-2.0.1.tgz#e8e6a6964595fa7eba129f6a8e788c617bd4ce4a"
-  integrity sha512-2+k6Wo3oIiDk1ORN+j0imUzm5jiCauahqDVFik2q6+FzWvjPcRWh5JVD+8zyyd83eiw97J9a1v1aMgigl9BPqQ==
+"@spectrum-css/thumbnail@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/thumbnail/-/thumbnail-2.0.5.tgz#a310696987405372d68a97b74cd88170fa9486c3"
+  integrity sha512-UETCxPIvqPSGLOf7yMXs1V8GgLONwV9cXiZ1ha3wUxFLofbz/W8K0LUQKT4Uv6Yhvz6Yu8nYohj46+aSV7kjeQ==
 
 "@spectrum-css/toast@^4.1.4":
   version "4.1.4"