Replace border style, width, and color properties with shorthand

yomidevs · Jan 27, 2024 · d70dcb6 · d70dcb6
1 parent 8d9ac15
commit d70dcb6
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 43 deletions.
diff --git a/ext/data/schemas/dictionary-term-bank-v3-schema.json b/ext/data/schemas/dictionary-term-bank-v3-schema.json
@@ -204,21 +204,13 @@
                                     "description": "The vertical alignment of the image.",
                                     "enum": ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"]
                                 },
-                                "borderRadius": {
-                                    "type": "string",
-                                    "description": "Roundness of the corners of the image's outer border edge."
-                                },
-                                "borderStyle": {
+                                "border": {
                                     "type": "string",
-                                    "description": "Line style for all four sides of the image's border."
+                                    "description": "Shorthand for border width, style, and color."
                                 },
-                                "borderWidth": {
-                                    "type": "string",
-                                    "description": "Width of the image's border."
-                                },
-                                "borderColor": {
+                                "borderRadius": {
                                     "type": "string",
-                                    "description": "Color of the image's border."
+                                    "description": "Roundness of the corners of the image's outer border edge."
                                 },
                                 "sizeUnits": {
                                     "type": "string",

diff --git a/ext/js/dictionary/dictionary-importer.js b/ext/js/dictionary/dictionary-importer.js
@@ -488,18 +488,14 @@ export class DictionaryImporter {
     async _resolveStructuredContentImage(context, target, source, entry) {
         const {
             verticalAlign,
+            border,
             borderRadius,
-            borderStyle,
-            borderWidth,
-            borderColor,
             sizeUnits
         } = source;
         await this._createImageData(context, target, source, entry);
         if (typeof verticalAlign === 'string') { target.verticalAlign = verticalAlign; }
+        if (typeof border === 'string') { target.border = border; }
         if (typeof borderRadius === 'string') { target.borderRadius = borderRadius; }
-        if (typeof borderStyle === 'string') { target.borderStyle = borderStyle; }
-        if (typeof borderWidth === 'string') { target.borderWidth = borderWidth; }
-        if (typeof borderColor === 'string') { target.borderColor = borderColor; }
         if (typeof sizeUnits === 'string') { target.sizeUnits = sizeUnits; }
     }
 

diff --git a/ext/js/display/sandbox/structured-content-generator.js b/ext/js/display/sandbox/structured-content-generator.js
@@ -73,10 +73,8 @@ export class StructuredContentGenerator {
             collapsed,
             collapsible,
             verticalAlign,
+            border,
             borderRadius,
-            borderStyle,
-            borderWidth,
-            borderColor,
             sizeUnits
         } = data;
 
@@ -134,10 +132,8 @@ export class StructuredContentGenerator {
         }
 
         imageContainer.style.width = `${usedWidth}em`;
+        if (typeof border === 'string') { imageContainer.style.border = border; }
         if (typeof borderRadius === 'string') { imageContainer.style.borderRadius = borderRadius; }
-        if (typeof borderStyle === 'string') { imageContainer.style.borderStyle = borderStyle; }
-        if (typeof borderWidth === 'string') { imageContainer.style.borderWidth = borderWidth; }
-        if (typeof borderColor === 'string') { imageContainer.style.borderColor = borderColor; }
         if (typeof title === 'string') {
             imageContainer.title = title;
         }

diff --git a/test/data/dictionaries/valid-dictionary1/term_bank_1.json b/test/data/dictionaries/valid-dictionary1/term_bank_1.json
@@ -81,7 +81,7 @@
                 "Image alt text tests.\n𬵪 = Unicode character\n",
                 {"tag": "img", "alt": "𬵪", "path": "aosaba_mono.png", "height": 1.0, "width": 1.0, "background": false, "sizeUnits": "em", "collapsed": false, "collapsible": false, "appearance": "monochrome"},
                 " = monochrome PNG\n",
-                {"tag": "img", "alt": "𬵪", "path": "aosaba_auto.png", "height": 1.0, "width": 1.0, "background": false, "sizeUnits": "em", "collapsed": false, "collapsible": false, "appearance": "auto", "borderRadius": "20%", "borderStyle": "solid", "borderWidth": "1px", "borderColor": "red"},
+                {"tag": "img", "alt": "𬵪", "path": "aosaba_auto.png", "height": 1.0, "width": 1.0, "background": false, "sizeUnits": "em", "collapsed": false, "collapsible": false, "appearance": "auto", "borderRadius": "20%", "border": "solid 1px red"},
                 " = color PNG"
             ]},
             {"type": "structured-content", "content": [

diff --git a/types/ext/dictionary-data.d.ts b/types/ext/dictionary-data.d.ts
@@ -113,10 +113,8 @@ export type TermGlossaryDeinflection = [
 export type TermImage = StructuredContent.ImageElementBase & {
     // Compatibility properties
     verticalAlign?: undefined;
+    border?: undefined;
     borderRadius?: undefined;
-    borderStyle?: undefined;
-    borderWidth?: undefined;
-    borderColor?: undefined;
     sizeUnits?: undefined;
 };
 

diff --git a/types/ext/structured-content.d.ts b/types/ext/structured-content.d.ts
@@ -41,10 +41,8 @@ export type ImageAppearance = 'auto' | 'monochrome';
 
 export type Image = DictionaryData.TermImage & {
     verticalAlign: VerticalAlign;
+    border: string;
     borderRadius: string;
-    borderStyle: string;
-    borderWidth: string;
-    borderColor: string;
     sizeUnits: SizeUnits;
 };
 
@@ -208,21 +206,13 @@ export type ImageElement = ImageElementBase & {
      */
     verticalAlign?: VerticalAlign;
     /**
-     * Roundness of the corners of the image's outer border edge.
-     */
-    borderRadius?: string;
-    /**
-     * Line style for all four sides of the image's border.
+     * Shorthand for border width, style, and color.
      */
-    borderStyle?: string;
+    border?: string;
     /**
-     * Width of the image's border.
-     */
-    borderWidth?: string;
-    /**
-     * Color of the image's border.
+     * Roundness of the corners of the image's outer border edge.
      */
-    borderColor?: string;
+    borderRadius?: string;
     /**
      * The units for the width and height.
      */