fixup! Fix(web, web-react): Make individual items in vertical Flex reflect alignmentX #DS-1820

Author: adamkudrna

packages/web/src/scss/tools/__tests__/_dictionaries.test.scss

@@ -67,18 +67,39 @@
                     $properties: (
                         'justify-content',
                         'justify-items',
-                    ),
-                    $infix: 'tablet--'
+                    )
                 );
             }
 
             @include test.expect() {
-                .Test--tablet--alignmentXStretch {
+                .Test--alignmentXStretch {
                     justify-content: stretch;
                     justify-items: stretch;
                 }
             }
         }
+
+        @include test.assert() {
+            @include test.output() {
+                @include dictionaries.generate-alignments(
+                    $class-name: 'Test',
+                    $dictionary-values: (
+                        'space-between',
+                    ),
+                    $axis: 'x',
+                    $properties: (
+                        'justify-content',
+                        'justify-items',
+                    )
+                );
+            }
+
+            @include test.expect() {
+                .Test--alignmentXSpaceBetween {
+                    justify-content: space-between;
+                }
+            }
+        }
     }
 }
 

packages/web/src/scss/tools/_dictionaries.scss

@@ -24,6 +24,7 @@
 }
 
 // Mixin to generate alignment classes based on a dictionary
+// Invalid property-value pairs are filtered out from the generated classes.
 // Parameters are:
 // * $class-name: the name of the component class to generate
 // * $dictionary-values: map of the dictionary values to generate
@@ -39,6 +40,9 @@
             'align-items',
         ),
     );
+    $invalid-property-value-map: (
+        'justify-items': 'space-between',
+    );
 
     @if $properties {
         $axis-properties: map.set($axis-properties, $axis, $properties);
@@ -47,7 +51,14 @@
     @each $alignment in $dictionary-values {
         .#{$class-name}--#{$infix}#{spirit-string.convert-kebab-case-to-camel-case(alignment-#{$axis}-#{$alignment})} {
             @each $property in map.get($axis-properties, $axis) {
-                #{$property}: string.unquote(alignment.translate-physical-to-logical($alignment));
+                @if not(
+                    map.has-key($invalid-property-value-map, $property) and
+                        map.get($invalid-property-value-map, $property) ==
+                        $alignment
+                )
+                {
+                    #{$property}: string.unquote(alignment.translate-physical-to-logical($alignment));
+                }
             }
         }
     }