Merge pull request #509 from EshaanAgg/kimg_app

feat: add `appearanceOverrides` prop to `KImg`
learningequality · Jan 15, 2024 · 3cb2b83 · 3cb2b83
2 parents 7166a00 + 693b017
commit 3cb2b83
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,16 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Upcoming version
 
+- [#509]
+  - **Description:** Introduces `appearanceOverrides` prop for the `KImg` component
+  - **Products impact:** new API 
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/371
+  - **Components:** KImg
+  - **Breaking:** No
+  - **Impacts a11y:** No
+  - **Guidance:** -
+
+[#509]: https://github.com/learningequality/kolibri-design-system/pull/509
 - [#516]
   - **Description:** Upgrades follow-redirects dependency
   - **Products impact:** Dependency upgrade

diff --git a/docs/pages/kimg.vue b/docs/pages/kimg.vue
@@ -76,7 +76,41 @@
             altText="Computers are run by bees"
           />
         </DocsShowCode>
+      </div>
 
+      <div>
+        You can also use the <DocsInternalLink href="#prop:appearanceOverrides">
+          appearanceOverrides prop
+        </DocsInternalLink> to add custom styles to the image. It accepts any Vue dynamic styles object and applies the same with the highest precedence.
+        <DocsShow>
+          <KImg
+            :src="require('../assets/img_sample_for_kimg.png')"
+            altText="Computers are run by bees"
+            :width="'100%'"
+            :appearanceOverrides="{
+              width: '50%',
+              border: '2px solid black',
+              padding: '10px',
+              borderRadius: '5px'
+            }
+            "
+          />
+        </DocsShow>
+        <DocsShowCode language="html">
+          <KImg
+            :src="require('../assets/img_sample_for_kimg.png')"
+            altText="Computers are run by bees"
+            :width="'100%'"
+            :appearanceOverrides="{
+              width: '50%',
+              border: '2px solid black',
+              padding: '10px',
+              borderRadius: '5px'
+            }
+            "
+          />
+        </DocsShowCode>
+        Even thought the <code>width</code> prop specifies the width of the image to be <code>100%</code>, the <code>appearanceOverrides</code> prop overrides it and sets the width to <code>50%</code>.
       </div>
     </DocsPageSection>
   </DocsPageTemplate>

diff --git a/lib/KImg.vue b/lib/KImg.vue
@@ -81,6 +81,14 @@
         type: [Number, String],
         default: undefined,
       },
+      /**
+       * Accepts a Vue dynamic styles object to override the default styles to modify the appearance of the component.
+       * It's attributes always take precedence over any specified styling (internal component's styles, styles calculated from props etc.)
+       */
+      appearanceOverrides: {
+        type: Object,
+        default: () => ({}),
+      },
     },
     data() {
       return {
@@ -91,6 +99,7 @@
           minHeight: this.imgMinHeight,
           maxWidth: this.imgMaxWidth,
           minWidth: this.imgMinWidth,
+          ...this.appearanceOverrides,
         },
       };
     },