From 328be980dd706e2bcd9556350eed4786219d22d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Thu, 23 Jan 2020 16:31:01 +0100
Subject: [PATCH 1/5] Introduce BoxEdges typedef.

---
 src/view/stylesmap.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/view/stylesmap.js b/src/view/stylesmap.js
index 0e78a5a52..926c5d37d 100644
--- a/src/view/stylesmap.js
+++ b/src/view/stylesmap.js
@@ -885,3 +885,21 @@ function appendStyleValue( stylesObject, nameOrPath, valueOrObject ) {
  *
  * @typedef {Array.<String, String>} module:engine/view/stylesmap~PropertyDescriptor
  */
+
+/**
+ * An object describing box edges values.
+ *
+ *		const margin = {
+ *			top: '1px',
+ *			right: '3px',
+ *			bottom: '3px',
+ *			left: '7px'
+ *		}
+ *
+ * @typedef {Object} module:engine/view/stylesmap~BoxEdges
+ *
+ * @property {String} top Top edge value.
+ * @property {String} right Right edge value.
+ * @property {String} bottom Bottom edge value.
+ * @property {String} left Left edge value.
+ */

From 9960a1d8fff6723238c7d2ead4efc4716c9a5f3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Thu, 23 Jan 2020 17:10:13 +0100
Subject: [PATCH 2/5] Use module:engine/view/stylesmap~BoxEdges in params.

---
 src/view/styles/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/view/styles/utils.js b/src/view/styles/utils.js
index 8c4a4189f..03b30942f 100644
--- a/src/view/styles/utils.js
+++ b/src/view/styles/utils.js
@@ -151,7 +151,7 @@ export function getTopRightBottomLeftValueReducer( styleShorthand ) {
  *		getTopRightBottomLeftShorthandValue( { top: '1px', right: '1px', bottom: '2px', left: '1px' } );
  *		// will return '1px 1px 2px'
  *
- * @param {String} styleShorthand
+ * @param {module:engine/view/stylesmap~BoxEdges} styleShorthand
  * @returns {Function}
  */
 export function getTopRightBottomLeftShorthandValue( { top, right, bottom, left } ) {

From 3cc01a972e2eddaa0d2c8d236d46b4ebf3b77939 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Thu, 23 Jan 2020 17:12:44 +0100
Subject: [PATCH 3/5] Rename methods that were using TopRightBottomLeft to
 BoxEdges methods.

---
 src/view/styles/border.js  | 16 ++++++++--------
 src/view/styles/margin.js  |  4 ++--
 src/view/styles/padding.js |  4 ++--
 src/view/styles/utils.js   | 14 +++++++-------
 tests/view/styles/utils.js | 28 ++++++++++++++--------------
 tests/view/stylesmap.js    |  4 ++--
 6 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/view/styles/border.js b/src/view/styles/border.js
index 61cde569e..b4709570c 100644
--- a/src/view/styles/border.js
+++ b/src/view/styles/border.js
@@ -7,7 +7,7 @@
  * @module engine/view/styles/border
  */
 
-import { getShorthandValues, getTopRightBottomLeftValueReducer, getTopRightBottomLeftValues, isLength, isLineStyle } from './utils';
+import { getShorthandValues, getBoxEdgesValueReducer, getBoxEdgesValues, isLength, isLineStyle } from './utils';
 
 /**
  * Adds a border CSS styles processing rules.
@@ -95,9 +95,9 @@ export function addBorderRules( stylesProcessor ) {
 	stylesProcessor.setExtractor( 'border-bottom-style', 'border.style.bottom' );
 	stylesProcessor.setExtractor( 'border-left-style', 'border.style.left' );
 
-	stylesProcessor.setReducer( 'border-color', getTopRightBottomLeftValueReducer( 'border-color' ) );
-	stylesProcessor.setReducer( 'border-style', getTopRightBottomLeftValueReducer( 'border-style' ) );
-	stylesProcessor.setReducer( 'border-width', getTopRightBottomLeftValueReducer( 'border-width' ) );
+	stylesProcessor.setReducer( 'border-color', getBoxEdgesValueReducer( 'border-color' ) );
+	stylesProcessor.setReducer( 'border-style', getBoxEdgesValueReducer( 'border-style' ) );
+	stylesProcessor.setReducer( 'border-width', getBoxEdgesValueReducer( 'border-width' ) );
 	stylesProcessor.setReducer( 'border-top', getBorderPositionReducer( 'top' ) );
 	stylesProcessor.setReducer( 'border-right', getBorderPositionReducer( 'right' ) );
 	stylesProcessor.setReducer( 'border-bottom', getBorderPositionReducer( 'bottom' ) );
@@ -134,9 +134,9 @@ function borderNormalizer( value ) {
 	return {
 		path: 'border',
 		value: {
-			color: getTopRightBottomLeftValues( color ),
-			style: getTopRightBottomLeftValues( style ),
-			width: getTopRightBottomLeftValues( width )
+			color: getBoxEdgesValues( color ),
+			style: getBoxEdgesValues( style ),
+			width: getBoxEdgesValues( width )
 		}
 	};
 }
@@ -177,7 +177,7 @@ function getBorderPropertyNormalizer( propertyName ) {
 
 function toBorderPropertyShorthand( value, property ) {
 	return {
-		[ property ]: getTopRightBottomLeftValues( value )
+		[ property ]: getBoxEdgesValues( value )
 	};
 }
 
diff --git a/src/view/styles/margin.js b/src/view/styles/margin.js
index 3554c51d0..8dbab5a4a 100644
--- a/src/view/styles/margin.js
+++ b/src/view/styles/margin.js
@@ -7,7 +7,7 @@
  * @module engine/view/styles/margin
  */
 
-import { getPositionShorthandNormalizer, getTopRightBottomLeftValueReducer } from './utils';
+import { getPositionShorthandNormalizer, getBoxEdgesValueReducer } from './utils';
 
 /**
  * Adds a margin CSS styles processing rules.
@@ -35,7 +35,7 @@ export function addMarginRules( stylesProcessor ) {
 	stylesProcessor.setNormalizer( 'margin-bottom', value => ( { path: 'margin.bottom', value } ) );
 	stylesProcessor.setNormalizer( 'margin-left', value => ( { path: 'margin.left', value } ) );
 
-	stylesProcessor.setReducer( 'margin', getTopRightBottomLeftValueReducer( 'margin' ) );
+	stylesProcessor.setReducer( 'margin', getBoxEdgesValueReducer( 'margin' ) );
 
 	stylesProcessor.setStyleRelation( 'margin', [ 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' ] );
 }
diff --git a/src/view/styles/padding.js b/src/view/styles/padding.js
index f2d8f5bea..c30492999 100644
--- a/src/view/styles/padding.js
+++ b/src/view/styles/padding.js
@@ -7,7 +7,7 @@
  * @module engine/view/styles/padding
  */
 
-import { getPositionShorthandNormalizer, getTopRightBottomLeftValueReducer } from './utils';
+import { getPositionShorthandNormalizer, getBoxEdgesValueReducer } from './utils';
 
 /**
  * Adds a margin CSS styles processing rules.
@@ -34,7 +34,7 @@ export function addPaddingRules( stylesProcessor ) {
 	stylesProcessor.setNormalizer( 'padding-bottom', value => ( { path: 'padding.bottom', value } ) );
 	stylesProcessor.setNormalizer( 'padding-left', value => ( { path: 'padding.left', value } ) );
 
-	stylesProcessor.setReducer( 'padding', getTopRightBottomLeftValueReducer( 'padding' ) );
+	stylesProcessor.setReducer( 'padding', getBoxEdgesValueReducer( 'padding' ) );
 
 	stylesProcessor.setStyleRelation( 'padding', [ 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' ] );
 }
diff --git a/src/view/styles/utils.js b/src/view/styles/utils.js
index 03b30942f..62a74c4af 100644
--- a/src/view/styles/utils.js
+++ b/src/view/styles/utils.js
@@ -91,7 +91,7 @@ export function isURL( string ) {
 	return urlRegExp.test( string );
 }
 
-export function getTopRightBottomLeftValues( value = '' ) {
+export function getBoxEdgesValues( value = '' ) {
 	if ( value === '' ) {
 		return { top: undefined, right: undefined, bottom: undefined, left: undefined };
 	}
@@ -110,12 +110,12 @@ export function getTopRightBottomLeftValues( value = '' ) {
  * Default reducer for CSS properties that concerns edges of a box
  * [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) notations:
  *
- *		stylesProcessor.setReducer( 'padding', getTopRightBottomLeftValueReducer( 'padding' ) );
+ *		stylesProcessor.setReducer( 'padding', getBoxEdgesValueReducer( 'padding' ) );
  *
  * @param {String} styleShorthand
  * @returns {Function}
  */
-export function getTopRightBottomLeftValueReducer( styleShorthand ) {
+export function getBoxEdgesValueReducer( styleShorthand ) {
 	return value => {
 		const { top, right, bottom, left } = value;
 
@@ -138,7 +138,7 @@ export function getTopRightBottomLeftValueReducer( styleShorthand ) {
 				reduced.push( [ styleShorthand + '-left', left ] );
 			}
 		} else {
-			reduced.push( [ styleShorthand, getTopRightBottomLeftShorthandValue( value ) ] );
+			reduced.push( [ styleShorthand, getBoxEdgesShorthandValue( value ) ] );
 		}
 
 		return reduced;
@@ -148,13 +148,13 @@ export function getTopRightBottomLeftValueReducer( styleShorthand ) {
 /**
  * Returns a proper 1-to-4 value of a CSS [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) notation.
  *
- *		getTopRightBottomLeftShorthandValue( { top: '1px', right: '1px', bottom: '2px', left: '1px' } );
+ *		getBoxEdgesShorthandValue( { top: '1px', right: '1px', bottom: '2px', left: '1px' } );
  *		// will return '1px 1px 2px'
  *
  * @param {module:engine/view/stylesmap~BoxEdges} styleShorthand
  * @returns {Function}
  */
-export function getTopRightBottomLeftShorthandValue( { top, right, bottom, left } ) {
+export function getBoxEdgesShorthandValue( { top, right, bottom, left } ) {
 	const out = [];
 
 	if ( left !== right ) {
@@ -182,7 +182,7 @@ export function getPositionShorthandNormalizer( shorthand ) {
 	return value => {
 		return {
 			path: shorthand,
-			value: getTopRightBottomLeftValues( value )
+			value: getBoxEdgesValues( value )
 		};
 	};
 }
diff --git a/tests/view/styles/utils.js b/tests/view/styles/utils.js
index 944901d72..0b8b90167 100644
--- a/tests/view/styles/utils.js
+++ b/tests/view/styles/utils.js
@@ -5,8 +5,8 @@
 
 import {
 	getShorthandValues,
-	getTopRightBottomLeftShorthandValue,
-	getTopRightBottomLeftValues,
+	getBoxEdgesShorthandValue,
+	getBoxEdgesValues,
 	isColor,
 	isLength,
 	isLineStyle
@@ -69,29 +69,29 @@ describe( 'Styles utils', () => {
 		} );
 	} );
 
-	describe( 'getTopRightBottomLeftShorthandValue()', () => {
+	describe( 'getBoxEdgesShorthandValue()', () => {
 		it( 'should output one value for same values', () => {
-			expect( getTopRightBottomLeftShorthandValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'foo' } ) ).to.equal( 'foo' );
+			expect( getBoxEdgesShorthandValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'foo' } ) ).to.equal( 'foo' );
 		} );
 
 		it( 'should output two value for top == bottom and right == left', () => {
-			expect( getTopRightBottomLeftShorthandValue( { top: 'foo', right: 'bar', bottom: 'foo', left: 'bar' } ) ).to.equal( 'foo bar' );
+			expect( getBoxEdgesShorthandValue( { top: 'foo', right: 'bar', bottom: 'foo', left: 'bar' } ) ).to.equal( 'foo bar' );
 		} );
 
 		it( 'should output three values if bottom is different then top', () => {
-			expect( getTopRightBottomLeftShorthandValue( { top: 'foo', right: 'foo', bottom: 'bar', left: 'foo' } ) )
+			expect( getBoxEdgesShorthandValue( { top: 'foo', right: 'foo', bottom: 'bar', left: 'foo' } ) )
 				.to.equal( 'foo foo bar' );
 		} );
 
 		it( 'should output four values if left is different then right', () => {
-			expect( getTopRightBottomLeftShorthandValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'bar' } ) )
+			expect( getBoxEdgesShorthandValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'bar' } ) )
 				.to.equal( 'foo foo foo bar' );
 		} );
 	} );
 
-	describe( 'getTopRightBottomLeftValues()', () => {
+	describe( 'getBoxEdgesValues()', () => {
 		it( 'should parse empty string', () => {
-			expect( getTopRightBottomLeftValues( '' ) ).to.deep.equal( {
+			expect( getBoxEdgesValues( '' ) ).to.deep.equal( {
 				top: undefined,
 				right: undefined,
 				bottom: undefined,
@@ -100,7 +100,7 @@ describe( 'Styles utils', () => {
 		} );
 
 		it( 'should parse one value', () => {
-			expect( getTopRightBottomLeftValues( 'foo' ) ).to.deep.equal( {
+			expect( getBoxEdgesValues( 'foo' ) ).to.deep.equal( {
 				top: 'foo',
 				right: 'foo',
 				bottom: 'foo',
@@ -109,7 +109,7 @@ describe( 'Styles utils', () => {
 		} );
 
 		it( 'should parse one value', () => {
-			expect( getTopRightBottomLeftValues( 'foo' ) ).to.deep.equal( {
+			expect( getBoxEdgesValues( 'foo' ) ).to.deep.equal( {
 				top: 'foo',
 				right: 'foo',
 				bottom: 'foo',
@@ -118,7 +118,7 @@ describe( 'Styles utils', () => {
 		} );
 
 		it( 'should parse two value', () => {
-			expect( getTopRightBottomLeftValues( 'foo bar' ) ).to.deep.equal( {
+			expect( getBoxEdgesValues( 'foo bar' ) ).to.deep.equal( {
 				top: 'foo',
 				right: 'bar',
 				bottom: 'foo',
@@ -127,7 +127,7 @@ describe( 'Styles utils', () => {
 		} );
 
 		it( 'should parse three values', () => {
-			expect( getTopRightBottomLeftValues( 'foo foo bar' ) ).to.deep.equal( {
+			expect( getBoxEdgesValues( 'foo foo bar' ) ).to.deep.equal( {
 				top: 'foo',
 				right: 'foo',
 				bottom: 'bar',
@@ -136,7 +136,7 @@ describe( 'Styles utils', () => {
 		} );
 
 		it( 'should output four values if left is different then right', () => {
-			expect( getTopRightBottomLeftValues( 'foo foo foo bar' ) ).to.deep.equal( {
+			expect( getBoxEdgesValues( 'foo foo foo bar' ) ).to.deep.equal( {
 				top: 'foo',
 				right: 'foo',
 				bottom: 'foo',
diff --git a/tests/view/stylesmap.js b/tests/view/stylesmap.js
index 8eedb236a..c2b9c115b 100644
--- a/tests/view/stylesmap.js
+++ b/tests/view/stylesmap.js
@@ -6,7 +6,7 @@
 import StylesMap, { StylesProcessor } from '../../src/view/stylesmap';
 import encodedImage from './_utils/encodedimage.txt';
 import { addPaddingRules } from '../../src/view/styles/padding';
-import { getTopRightBottomLeftValueReducer } from '../../src/view/styles/utils';
+import { getBoxEdgesValueReducer } from '../../src/view/styles/utils';
 
 describe( 'StylesMap', () => {
 	let stylesMap, stylesProcessor;
@@ -23,7 +23,7 @@ describe( 'StylesMap', () => {
 			path: 'foo.top',
 			value
 		} ) );
-		stylesProcessor.setReducer( 'foo', getTopRightBottomLeftValueReducer( 'foo' ) );
+		stylesProcessor.setReducer( 'foo', getBoxEdgesValueReducer( 'foo' ) );
 
 		addPaddingRules( stylesProcessor );
 		StylesMap._setProcessor( stylesProcessor );

From 4674ba4ec3f2ef79c69bbb9a840a002e332c29e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Fri, 24 Jan 2020 09:25:24 +0100
Subject: [PATCH 4/5] Rename BoxEdges to BoxSides.

Edges are more like contours around the box (containing or not containing the padding, border, etc.) and the box has always 4 sides (top, left, bottom, right).
---
 src/view/styles/border.js  | 16 ++++++++--------
 src/view/styles/margin.js  |  4 ++--
 src/view/styles/padding.js |  4 ++--
 src/view/styles/utils.js   | 16 ++++++++--------
 src/view/stylesmap.js      | 12 ++++++------
 tests/view/styles/utils.js | 28 ++++++++++++++--------------
 tests/view/stylesmap.js    |  4 ++--
 7 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/view/styles/border.js b/src/view/styles/border.js
index b4709570c..b044d9fbb 100644
--- a/src/view/styles/border.js
+++ b/src/view/styles/border.js
@@ -7,7 +7,7 @@
  * @module engine/view/styles/border
  */
 
-import { getShorthandValues, getBoxEdgesValueReducer, getBoxEdgesValues, isLength, isLineStyle } from './utils';
+import { getShorthandValues, getBoxSidesValueReducer, getBoxSidesValues, isLength, isLineStyle } from './utils';
 
 /**
  * Adds a border CSS styles processing rules.
@@ -95,9 +95,9 @@ export function addBorderRules( stylesProcessor ) {
 	stylesProcessor.setExtractor( 'border-bottom-style', 'border.style.bottom' );
 	stylesProcessor.setExtractor( 'border-left-style', 'border.style.left' );
 
-	stylesProcessor.setReducer( 'border-color', getBoxEdgesValueReducer( 'border-color' ) );
-	stylesProcessor.setReducer( 'border-style', getBoxEdgesValueReducer( 'border-style' ) );
-	stylesProcessor.setReducer( 'border-width', getBoxEdgesValueReducer( 'border-width' ) );
+	stylesProcessor.setReducer( 'border-color', getBoxSidesValueReducer( 'border-color' ) );
+	stylesProcessor.setReducer( 'border-style', getBoxSidesValueReducer( 'border-style' ) );
+	stylesProcessor.setReducer( 'border-width', getBoxSidesValueReducer( 'border-width' ) );
 	stylesProcessor.setReducer( 'border-top', getBorderPositionReducer( 'top' ) );
 	stylesProcessor.setReducer( 'border-right', getBorderPositionReducer( 'right' ) );
 	stylesProcessor.setReducer( 'border-bottom', getBorderPositionReducer( 'bottom' ) );
@@ -134,9 +134,9 @@ function borderNormalizer( value ) {
 	return {
 		path: 'border',
 		value: {
-			color: getBoxEdgesValues( color ),
-			style: getBoxEdgesValues( style ),
-			width: getBoxEdgesValues( width )
+			color: getBoxSidesValues( color ),
+			style: getBoxSidesValues( style ),
+			width: getBoxSidesValues( width )
 		}
 	};
 }
@@ -177,7 +177,7 @@ function getBorderPropertyNormalizer( propertyName ) {
 
 function toBorderPropertyShorthand( value, property ) {
 	return {
-		[ property ]: getBoxEdgesValues( value )
+		[ property ]: getBoxSidesValues( value )
 	};
 }
 
diff --git a/src/view/styles/margin.js b/src/view/styles/margin.js
index 8dbab5a4a..b308fbd64 100644
--- a/src/view/styles/margin.js
+++ b/src/view/styles/margin.js
@@ -7,7 +7,7 @@
  * @module engine/view/styles/margin
  */
 
-import { getPositionShorthandNormalizer, getBoxEdgesValueReducer } from './utils';
+import { getPositionShorthandNormalizer, getBoxSidesValueReducer } from './utils';
 
 /**
  * Adds a margin CSS styles processing rules.
@@ -35,7 +35,7 @@ export function addMarginRules( stylesProcessor ) {
 	stylesProcessor.setNormalizer( 'margin-bottom', value => ( { path: 'margin.bottom', value } ) );
 	stylesProcessor.setNormalizer( 'margin-left', value => ( { path: 'margin.left', value } ) );
 
-	stylesProcessor.setReducer( 'margin', getBoxEdgesValueReducer( 'margin' ) );
+	stylesProcessor.setReducer( 'margin', getBoxSidesValueReducer( 'margin' ) );
 
 	stylesProcessor.setStyleRelation( 'margin', [ 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' ] );
 }
diff --git a/src/view/styles/padding.js b/src/view/styles/padding.js
index c30492999..0a906e6d6 100644
--- a/src/view/styles/padding.js
+++ b/src/view/styles/padding.js
@@ -7,7 +7,7 @@
  * @module engine/view/styles/padding
  */
 
-import { getPositionShorthandNormalizer, getBoxEdgesValueReducer } from './utils';
+import { getPositionShorthandNormalizer, getBoxSidesValueReducer } from './utils';
 
 /**
  * Adds a margin CSS styles processing rules.
@@ -34,7 +34,7 @@ export function addPaddingRules( stylesProcessor ) {
 	stylesProcessor.setNormalizer( 'padding-bottom', value => ( { path: 'padding.bottom', value } ) );
 	stylesProcessor.setNormalizer( 'padding-left', value => ( { path: 'padding.left', value } ) );
 
-	stylesProcessor.setReducer( 'padding', getBoxEdgesValueReducer( 'padding' ) );
+	stylesProcessor.setReducer( 'padding', getBoxSidesValueReducer( 'padding' ) );
 
 	stylesProcessor.setStyleRelation( 'padding', [ 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' ] );
 }
diff --git a/src/view/styles/utils.js b/src/view/styles/utils.js
index 62a74c4af..704cbb6fd 100644
--- a/src/view/styles/utils.js
+++ b/src/view/styles/utils.js
@@ -91,7 +91,7 @@ export function isURL( string ) {
 	return urlRegExp.test( string );
 }
 
-export function getBoxEdgesValues( value = '' ) {
+export function getBoxSidesValues( value = '' ) {
 	if ( value === '' ) {
 		return { top: undefined, right: undefined, bottom: undefined, left: undefined };
 	}
@@ -110,12 +110,12 @@ export function getBoxEdgesValues( value = '' ) {
  * Default reducer for CSS properties that concerns edges of a box
  * [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) notations:
  *
- *		stylesProcessor.setReducer( 'padding', getBoxEdgesValueReducer( 'padding' ) );
+ *		stylesProcessor.setReducer( 'padding', getBoxSidesValueReducer( 'padding' ) );
  *
  * @param {String} styleShorthand
  * @returns {Function}
  */
-export function getBoxEdgesValueReducer( styleShorthand ) {
+export function getBoxSidesValueReducer( styleShorthand ) {
 	return value => {
 		const { top, right, bottom, left } = value;
 
@@ -138,7 +138,7 @@ export function getBoxEdgesValueReducer( styleShorthand ) {
 				reduced.push( [ styleShorthand + '-left', left ] );
 			}
 		} else {
-			reduced.push( [ styleShorthand, getBoxEdgesShorthandValue( value ) ] );
+			reduced.push( [ styleShorthand, getBoxSidesShorthandValue( value ) ] );
 		}
 
 		return reduced;
@@ -148,13 +148,13 @@ export function getBoxEdgesValueReducer( styleShorthand ) {
 /**
  * Returns a proper 1-to-4 value of a CSS [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) notation.
  *
- *		getBoxEdgesShorthandValue( { top: '1px', right: '1px', bottom: '2px', left: '1px' } );
+ *		getBoxSidesShorthandValue( { top: '1px', right: '1px', bottom: '2px', left: '1px' } );
  *		// will return '1px 1px 2px'
  *
- * @param {module:engine/view/stylesmap~BoxEdges} styleShorthand
+ * @param {module:engine/view/stylesmap~BoxSides} styleShorthand
  * @returns {Function}
  */
-export function getBoxEdgesShorthandValue( { top, right, bottom, left } ) {
+export function getBoxSidesShorthandValue( { top, right, bottom, left } ) {
 	const out = [];
 
 	if ( left !== right ) {
@@ -182,7 +182,7 @@ export function getPositionShorthandNormalizer( shorthand ) {
 	return value => {
 		return {
 			path: shorthand,
-			value: getBoxEdgesValues( value )
+			value: getBoxSidesValues( value )
 		};
 	};
 }
diff --git a/src/view/stylesmap.js b/src/view/stylesmap.js
index 926c5d37d..3045c885e 100644
--- a/src/view/stylesmap.js
+++ b/src/view/stylesmap.js
@@ -887,7 +887,7 @@ function appendStyleValue( stylesObject, nameOrPath, valueOrObject ) {
  */
 
 /**
- * An object describing box edges values.
+ * An object describing box sides values.
  *
  *		const margin = {
  *			top: '1px',
@@ -896,10 +896,10 @@ function appendStyleValue( stylesObject, nameOrPath, valueOrObject ) {
  *			left: '7px'
  *		}
  *
- * @typedef {Object} module:engine/view/stylesmap~BoxEdges
+ * @typedef {Object} module:engine/view/stylesmap~BoxSides
  *
- * @property {String} top Top edge value.
- * @property {String} right Right edge value.
- * @property {String} bottom Bottom edge value.
- * @property {String} left Left edge value.
+ * @property {String} top Top side value.
+ * @property {String} right Right side value.
+ * @property {String} bottom Bottom side value.
+ * @property {String} left Left side value.
  */
diff --git a/tests/view/styles/utils.js b/tests/view/styles/utils.js
index 0b8b90167..9e262841e 100644
--- a/tests/view/styles/utils.js
+++ b/tests/view/styles/utils.js
@@ -5,8 +5,8 @@
 
 import {
 	getShorthandValues,
-	getBoxEdgesShorthandValue,
-	getBoxEdgesValues,
+	getBoxSidesShorthandValue,
+	getBoxSidesValues,
 	isColor,
 	isLength,
 	isLineStyle
@@ -69,29 +69,29 @@ describe( 'Styles utils', () => {
 		} );
 	} );
 
-	describe( 'getBoxEdgesShorthandValue()', () => {
+	describe( 'getBoxSidesShorthandValue()', () => {
 		it( 'should output one value for same values', () => {
-			expect( getBoxEdgesShorthandValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'foo' } ) ).to.equal( 'foo' );
+			expect( getBoxSidesShorthandValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'foo' } ) ).to.equal( 'foo' );
 		} );
 
 		it( 'should output two value for top == bottom and right == left', () => {
-			expect( getBoxEdgesShorthandValue( { top: 'foo', right: 'bar', bottom: 'foo', left: 'bar' } ) ).to.equal( 'foo bar' );
+			expect( getBoxSidesShorthandValue( { top: 'foo', right: 'bar', bottom: 'foo', left: 'bar' } ) ).to.equal( 'foo bar' );
 		} );
 
 		it( 'should output three values if bottom is different then top', () => {
-			expect( getBoxEdgesShorthandValue( { top: 'foo', right: 'foo', bottom: 'bar', left: 'foo' } ) )
+			expect( getBoxSidesShorthandValue( { top: 'foo', right: 'foo', bottom: 'bar', left: 'foo' } ) )
 				.to.equal( 'foo foo bar' );
 		} );
 
 		it( 'should output four values if left is different then right', () => {
-			expect( getBoxEdgesShorthandValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'bar' } ) )
+			expect( getBoxSidesShorthandValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'bar' } ) )
 				.to.equal( 'foo foo foo bar' );
 		} );
 	} );
 
-	describe( 'getBoxEdgesValues()', () => {
+	describe( 'getBoxSidesValues()', () => {
 		it( 'should parse empty string', () => {
-			expect( getBoxEdgesValues( '' ) ).to.deep.equal( {
+			expect( getBoxSidesValues( '' ) ).to.deep.equal( {
 				top: undefined,
 				right: undefined,
 				bottom: undefined,
@@ -100,7 +100,7 @@ describe( 'Styles utils', () => {
 		} );
 
 		it( 'should parse one value', () => {
-			expect( getBoxEdgesValues( 'foo' ) ).to.deep.equal( {
+			expect( getBoxSidesValues( 'foo' ) ).to.deep.equal( {
 				top: 'foo',
 				right: 'foo',
 				bottom: 'foo',
@@ -109,7 +109,7 @@ describe( 'Styles utils', () => {
 		} );
 
 		it( 'should parse one value', () => {
-			expect( getBoxEdgesValues( 'foo' ) ).to.deep.equal( {
+			expect( getBoxSidesValues( 'foo' ) ).to.deep.equal( {
 				top: 'foo',
 				right: 'foo',
 				bottom: 'foo',
@@ -118,7 +118,7 @@ describe( 'Styles utils', () => {
 		} );
 
 		it( 'should parse two value', () => {
-			expect( getBoxEdgesValues( 'foo bar' ) ).to.deep.equal( {
+			expect( getBoxSidesValues( 'foo bar' ) ).to.deep.equal( {
 				top: 'foo',
 				right: 'bar',
 				bottom: 'foo',
@@ -127,7 +127,7 @@ describe( 'Styles utils', () => {
 		} );
 
 		it( 'should parse three values', () => {
-			expect( getBoxEdgesValues( 'foo foo bar' ) ).to.deep.equal( {
+			expect( getBoxSidesValues( 'foo foo bar' ) ).to.deep.equal( {
 				top: 'foo',
 				right: 'foo',
 				bottom: 'bar',
@@ -136,7 +136,7 @@ describe( 'Styles utils', () => {
 		} );
 
 		it( 'should output four values if left is different then right', () => {
-			expect( getBoxEdgesValues( 'foo foo foo bar' ) ).to.deep.equal( {
+			expect( getBoxSidesValues( 'foo foo foo bar' ) ).to.deep.equal( {
 				top: 'foo',
 				right: 'foo',
 				bottom: 'foo',
diff --git a/tests/view/stylesmap.js b/tests/view/stylesmap.js
index c2b9c115b..bb1cedabb 100644
--- a/tests/view/stylesmap.js
+++ b/tests/view/stylesmap.js
@@ -6,7 +6,7 @@
 import StylesMap, { StylesProcessor } from '../../src/view/stylesmap';
 import encodedImage from './_utils/encodedimage.txt';
 import { addPaddingRules } from '../../src/view/styles/padding';
-import { getBoxEdgesValueReducer } from '../../src/view/styles/utils';
+import { getBoxSidesValueReducer } from '../../src/view/styles/utils';
 
 describe( 'StylesMap', () => {
 	let stylesMap, stylesProcessor;
@@ -23,7 +23,7 @@ describe( 'StylesMap', () => {
 			path: 'foo.top',
 			value
 		} ) );
-		stylesProcessor.setReducer( 'foo', getBoxEdgesValueReducer( 'foo' ) );
+		stylesProcessor.setReducer( 'foo', getBoxSidesValueReducer( 'foo' ) );
 
 		addPaddingRules( stylesProcessor );
 		StylesMap._setProcessor( stylesProcessor );

From b4880014a2b245dadbad46d657c451d0ebbd4b33 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 24 Jan 2020 10:16:39 +0100
Subject: [PATCH 5/5] Docs: Minor corrections.

---
 src/view/styles/utils.js |  3 ++-
 src/view/stylesmap.js    | 12 ++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/view/styles/utils.js b/src/view/styles/utils.js
index 704cbb6fd..2ddb997fb 100644
--- a/src/view/styles/utils.js
+++ b/src/view/styles/utils.js
@@ -146,7 +146,8 @@ export function getBoxSidesValueReducer( styleShorthand ) {
 }
 
 /**
- * Returns a proper 1-to-4 value of a CSS [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) notation.
+ * Returns a [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) notation
+ * of a CSS property value.
  *
  *		getBoxSidesShorthandValue( { top: '1px', right: '1px', bottom: '2px', left: '1px' } );
  *		// will return '1px 1px 2px'
diff --git a/src/view/stylesmap.js b/src/view/stylesmap.js
index 3045c885e..4204844a5 100644
--- a/src/view/stylesmap.js
+++ b/src/view/stylesmap.js
@@ -887,14 +887,22 @@ function appendStyleValue( stylesObject, nameOrPath, valueOrObject ) {
  */
 
 /**
- * An object describing box sides values.
+ * An object describing values associated with the sides of a box, for instance margins, paddings,
+ * border widths, border colors, etc.
  *
  *		const margin = {
  *			top: '1px',
  *			right: '3px',
  *			bottom: '3px',
  *			left: '7px'
- *		}
+ *		};
+ *
+ *		const borderColor = {
+ *			top: 'red',
+ *			right: 'blue',
+ *			bottom: 'blue',
+ *			left: 'red'
+ *		};
  *
  * @typedef {Object} module:engine/view/stylesmap~BoxSides
  *