feat(action-buttons): enhance alignments and positions

Author: zhpenkov

packages/core/scss/components/action-buttons/_layout.scss

@@ -42,6 +42,9 @@
     .k-actions-end {
         justify-content: flex-end;
     }
+    .k-actions-justify {
+        justify-content: space-between;
+    }
     .k-actions-stretched > * {
         flex: 1 0 0%;
     }
@@ -54,6 +57,7 @@
     }
     .k-actions-vertical {
         flex-flow: column nowrap;
+        align-items: normal;
     }
 
 

packages/fluent/scss/action-buttons/_layout.scss

@@ -39,6 +39,9 @@
     .k-actions-end {
         justify-content: flex-end;
     }
+    .k-actions-justify {
+        justify-content: space-between;
+    }
     .k-actions-stretched > * {
         flex: 1 0 0%;
     }
@@ -50,5 +53,6 @@
     }
     .k-actions-vertical {
         flex-flow: column nowrap;
+        align-items: normal;
     }
 }

packages/html/src/action-buttons/action-buttons.spec.tsx

@@ -7,7 +7,7 @@ const states = [];
 const options = {};
 
 export type KendoActionButtonsProps = {
-    alignment?: 'start' | 'center' | 'end' | 'stretched';
+    alignment?: 'start' | 'center' | 'end' | 'stretched' | 'justify';
     orientation?: 'horizontal' | 'vertical';
 };
 

packages/html/src/action-buttons/tests/action-buttons.tsx

@@ -8,12 +8,14 @@ const styles = `
     }
 `;
 
-export default () =>(
+export default () => (
     <>
         <style>{styles}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-2">
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
             <span>start</span>
             <span>end</span>
+            <span>center</span>
+
             <div>
                 <ActionButtons alignment="start">
                     <Button>First</Button>
@@ -28,26 +30,43 @@ export default () =>(
                     <Button>Third</Button>
                 </ActionButtons>
             </div>
-
-            <span>center</span>
-            <span>stretch</span>
             <div>
                 <ActionButtons alignment="center">
                     <Button>First</Button>
                     <Button>Second</Button>
                     <Button>Third</Button>
                 </ActionButtons>
             </div>
+
+            <span>stretch</span>
+            <span>justify</span>
+            <span>orientation - vertical</span>
+
             <div>
                 <ActionButtons alignment="stretched">
                     <Button>First</Button>
                     <Button>Second</Button>
                     <Button>Third</Button>
                 </ActionButtons>
             </div>
+            <div>
+                <ActionButtons alignment="justify">
+                    <Button>First</Button>
+                    <Button>Second</Button>
+                    <Button>Third</Button>
+                </ActionButtons>
+            </div>
+            <div>
+                <ActionButtons orientation="vertical">
+                    <Button>First</Button>
+                    <Button>Second</Button>
+                    <Button>Third</Button>
+                </ActionButtons>
+            </div>
 
             <span>rtl start</span>
             <span>rtl end</span>
+            <span>rtl center</span>
             <div dir="rtl">
                 <ActionButtons alignment="start">
                     <Button>First</Button>
@@ -62,23 +81,39 @@ export default () =>(
                     <Button>Third</Button>
                 </ActionButtons>
             </div>
-
-            <span>rtl center</span>
-            <span>rtl stretch</span>
             <div dir="rtl">
                 <ActionButtons alignment="center">
                     <Button>First</Button>
                     <Button>Second</Button>
                     <Button>Third</Button>
                 </ActionButtons>
             </div>
+
+            <span>rtl stretch</span>
+            <span>rtl justify</span>
+            <span>rtl orientation - vertical</span>
+
             <div dir="rtl">
                 <ActionButtons alignment="stretched">
                     <Button>First</Button>
                     <Button>Second</Button>
                     <Button>Third</Button>
                 </ActionButtons>
             </div>
+            <div dir="rtl">
+                <ActionButtons alignment="justify">
+                    <Button>First</Button>
+                    <Button>Second</Button>
+                    <Button>Third</Button>
+                </ActionButtons>
+            </div>
+            <div dir="rtl">
+                <ActionButtons orientation="vertical">
+                    <Button>First</Button>
+                    <Button>Second</Button>
+                    <Button>Third</Button>
+                </ActionButtons>
+            </div>
         </div>
 
     </>