feat(pos-image): Add object-fit CSS property

pod-os · Oct 4, 2024 · 201397b · 201397b
1 parent a038d9f
commit 201397b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/elements/CHANGELOG.md b/elements/CHANGELOG.md
@@ -25,6 +25,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - [pos-login](../docs/elements/components/pos-login): Minor styling adjustments
 - [pos-app-browser](../docs/elements/apps/pos-app-browser)
   - redesign of header, footer and navigation bar
+- [pos-image](../docs/elements/components/pos-image)
+  - new CSS variable --object-fit to apply [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) to the img (defaults to `cover`)
 
 ## 0.18.0
 

diff --git a/elements/src/components/pos-image/pos-image.css b/elements/src/components/pos-image/pos-image.css
@@ -1,26 +1,30 @@
-
 :host {
   /**
    * @prop --width: Width of the image
    * @prop --height: Height of the image
    * @prop --border-radius: Border radius of the image
    * @prop --max-width: Maximum width of the image
    * @prop --max-height: Maximum height of the image
+   * @prop --object-fit: CSS object-fit of the image
    */
+  --object-fit: cover;
 }
 
-img, ion-skeleton-text, div.error {
+img,
+ion-skeleton-text,
+div.error {
   border-radius: var(--border-radius);
   width: var(--width);
   height: var(--height);
   max-width: var(--max-width);
   max-height: var(--max-height);
+  object-fit: var(--object-fit);
 }
 
 .error {
   display: flex;
   opacity: 0.8;
-  background: repeating-linear-gradient( -45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px );
+  background: repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);
   flex-direction: column;
   border: 1px solid red;
   color: black;
@@ -33,8 +37,8 @@ img, ion-skeleton-text, div.error {
 
 .error ion-icon {
   color: #282828;
-  --ionicon-stroke-width: calc(var(--width) / 5) ;
-  font-size: calc(var(--width) / 2)
+  --ionicon-stroke-width: calc(var(--width) / 5);
+  font-size: calc(var(--width) / 2);
 }
 
 a.error {
@@ -49,5 +53,5 @@ a.error {
 }
 
 .text {
-  font-size: calc(var(--width) / 20)
+  font-size: calc(var(--width) / 20);
 }
diff --git a/storybook/stories/7_pos-image.stories.mdx b/storybook/stories/7_pos-image.stories.mdx
@@ -13,7 +13,14 @@ import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
       "https://solidproject.solidcommunity.net/public/non-existing-image.png",
     unauthenticatedUrl:
       "https://solidproject.solidcommunity.net/private/restricted-access.png",
+    objectFit: "cover"
   }}
+  argTypes= {{
+      objectFit: {
+        options: ['cover', 'fill', 'contain', 'none', 'scale-down'],
+        control: { type: 'select' },
+      },
+    }}
 />
 
 ## pos-image
@@ -25,8 +32,8 @@ loaded image:
 
 <Canvas withSource="open">
   <Story name="Display an image">
-    {({ url, width, height, borderRadius }) => html`
-      <pos-image style="--width: ${width}; --height: ${height}; --border-radius: ${borderRadius};" src=${url} />
+    {({ url, width, height, borderRadius, objectFit}) => html`
+      <pos-image style="--width: ${width}; --height: ${height}; --border-radius: ${borderRadius}; --object-fit: ${objectFit};" src=${url} />
     `}
   </Story>
 </Canvas>
@@ -35,7 +42,7 @@ If the file is not found it will display a box with an error message:
 
 <Canvas withSource="open">
   <Story name="Not Found">
-    {({ notFoundUrl, width, height, borderRadius }) => html` <pos-image style="--width: ${width}; --height: ${height}; --border-radius: ${borderRadius};" src=${notFoundUrl} /> `}
+    {({ notFoundUrl, width, height, borderRadius, objectFit}) => html` <pos-image style="--width: ${width}; --height: ${height}; --border-radius: ${borderRadius}; --object-fit: ${objectFit};" src=${notFoundUrl} /> `}
   </Story>
 </Canvas>
 
@@ -44,8 +51,8 @@ show that:
 
 <Canvas withSource="open">
   <Story name="Unauthenticated">
-    {({ unauthenticatedUrl, width, height, borderRadius }) => html`
-      <pos-image style="--width: ${width}; --height: ${height}; --border-radius: ${borderRadius};" src=${unauthenticatedUrl} />
+    {({ unauthenticatedUrl, width, height, borderRadius, objectFit}) => html`
+      <pos-image style="--width: ${width}; --height: ${height}; --border-radius: ${borderRadius}; --object-fit: ${objectFit};" src=${unauthenticatedUrl} />
     `}
   </Story>
 </Canvas>