Update style for vertical action sets

dist/Components/Containers/ButtonGroup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 interface IProps {
     hasSpacing: boolean;
-    flexDirection: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    flexDirection: 'row' | 'column';
 }
 export declare class ButtonGroup extends React.Component<IProps> {
     render(): JSX.Element;

dist/Components/Containers/ButtonGroup.js

@@ -15,7 +15,7 @@ export class ButtonGroup extends React.Component {
         if (this.props.hasSpacing) {
             return {
                 marginTop: StyleManager.actionSetSpacing,
-                paddingTop: 12,
+                paddingTop: this.props.flexDirection === 'row' ? 12 : 0,
                 justifyContent: 'center',
                 borderTopWidth: StyleManager.separatorThickness,
                 borderTopColor: StyleManager.separatorColor

dist/Config/default.json

@@ -104,7 +104,7 @@
     "actions": {
         "maxActions": 2,
         "spacing": "large",
-        "buttonSpacing": 0,
+        "buttonSpacing": 12,
         "showCard": {
             "actionMode": "inline",
             "inlineTopMargin": 16,

dist/Views/Actions/Action.d.ts

@@ -5,6 +5,7 @@ import { SubmitActionModel } from '../../Models/Actions/SubmitAction';
 interface IProps {
     index: number;
     model: OpenUrlActionModel | ShowCardActionModel | SubmitActionModel;
+    direction: 'row' | 'column';
     theme: 'default' | 'emphasis';
 }
 interface IState {
@@ -15,8 +16,8 @@ export declare class ActionView extends React.Component<IProps, IState> {
     render(): JSX.Element;
     private onPress;
     private readonly isOneTimeAction;
-    private readonly leftBorderWidth;
-    private readonly spacing;
+    private readonly borderWidth;
+    private readonly borderStyle;
     private readonly title;
 }
 export {};

dist/Views/Actions/Action.js

@@ -31,25 +31,34 @@ export class ActionView extends React.Component {
         if (!model || !model.isSchemaCheckPassed) {
             return DebugOutputFactory.createDebugOutputBanner(model.type + '>>' + model.title + ' is not valid', theme, 'error');
         }
-        return (React.createElement(Button, { flex: 1, title: this.title, color: StyleManager.getColor('accent', theme, false), fontSize: StyleManager.getFontSize('default'), fontWeight: StyleManager.getFontWeight('bolder'), backgroundColor: StyleManager.getBackgroundColor(theme), textHorizontalAlign: 'center', textVerticalAlign: 'center', paddingTop: 6, paddingBottom: 6, paddingLeft: 16, paddingRight: 16, onPress: this.onPress, disabled: this.state.disabled, marginTop: StyleManager.actionDirection === 'vertically' ? this.spacing : 0, marginLeft: StyleManager.actionDirection === 'horizontal' ? this.spacing : 0, style: {
-                borderLeftWidth: this.leftBorderWidth,
-                borderLeftColor: StyleManager.separatorColor,
-            } }));
+        return (React.createElement(Button, { flex: 1, title: this.title, color: StyleManager.getColor('accent', theme, false), fontSize: StyleManager.getFontSize('default'), fontWeight: StyleManager.getFontWeight('bolder'), backgroundColor: StyleManager.getBackgroundColor(theme), textHorizontalAlign: 'center', textVerticalAlign: 'center', paddingTop: 12, paddingBottom: 12, paddingLeft: 16, paddingRight: 16, onPress: this.onPress, disabled: this.state.disabled, style: this.borderStyle }));
     }
     get isOneTimeAction() {
         return ConfigManager.getInstance().getConfig().mode === 'release' && this.props.model && this.props.model.type === ActionType.Submit;
     }
-    get leftBorderWidth() {
+    get borderWidth() {
         if (this.props.index !== undefined && this.props.index > 0) {
-            return 1;
+            return StyleManager.separatorThickness;
         }
         return 0;
     }
-    get spacing() {
-        if (this.props.index !== undefined && this.props.index > 0) {
-            return StyleManager.actionSpacing;
+    get borderStyle() {
+        switch (this.props.direction) {
+            case 'column':
+                return {
+                    paddingTop: 16,
+                    paddingBottom: 16,
+                    borderTopWidth: this.borderWidth,
+                    borderTopColor: StyleManager.separatorColor,
+                };
+            default:
+                return {
+                    paddingTop: 6,
+                    paddingBottom: 6,
+                    borderLeftWidth: this.borderWidth,
+                    borderLeftColor: StyleManager.separatorColor,
+                };
         }
-        return 0;
     }
     get title() {
         const { model } = this.props;

dist/Views/Cards/AdaptiveCard.js

@@ -72,7 +72,7 @@ export class AdaptiveCardView extends React.Component {
             return undefined;
         }
         return model.actions.map((action, index) => {
-            return ActionFactory.createAction(action, index, theme);
+            return ActionFactory.createAction(action, index, this.buttonFlexDirection, theme);
         });
     }
     renderSubCard() {

dist/Views/Factories/ActionFactory.d.ts

@@ -3,5 +3,5 @@ import { OpenUrlActionModel } from '../../Models/Actions/OpenUrlAction';
 import { ShowCardActionModel } from '../../Models/Actions/ShowCardAction';
 import { SubmitActionModel } from '../../Models/Actions/SubmitAction';
 export declare class ActionFactory {
-    static createAction(model: OpenUrlActionModel | ShowCardActionModel | SubmitActionModel, index: number, theme: 'default' | 'emphasis'): JSX.Element;
+    static createAction(model: OpenUrlActionModel | ShowCardActionModel | SubmitActionModel, index: number, direction: 'row' | 'column', theme: 'default' | 'emphasis'): JSX.Element;
 }

dist/Views/Factories/ActionFactory.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ActionView } from '../Actions/Action';
 export class ActionFactory {
-    static createAction(model, index, theme) {
+    static createAction(model, index, direction, theme) {
         if (model) {
-            return (React.createElement(ActionView, { key: model.type + index, index: index, model: model, theme: theme }));
+            return (React.createElement(ActionView, { key: model.type + index, index: index, model: model, direction: direction, theme: theme }));
         }
         return null;
     }

examples/AdaptiveCards/Components/Containers/ButtonGroup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 interface IProps {
     hasSpacing: boolean;
-    flexDirection: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    flexDirection: 'row' | 'column';
 }
 export declare class ButtonGroup extends React.Component<IProps> {
     render(): JSX.Element;

examples/AdaptiveCards/Components/Containers/ButtonGroup.js

@@ -15,7 +15,7 @@ export class ButtonGroup extends React.Component {
         if (this.props.hasSpacing) {
             return {
                 marginTop: StyleManager.actionSetSpacing,
-                paddingTop: 12,
+                paddingTop: this.props.flexDirection === 'row' ? 12 : 0,
                 justifyContent: 'center',
                 borderTopWidth: StyleManager.separatorThickness,
                 borderTopColor: StyleManager.separatorColor

examples/AdaptiveCards/Config/default.json

@@ -104,7 +104,7 @@
     "actions": {
         "maxActions": 2,
         "spacing": "large",
-        "buttonSpacing": 0,
+        "buttonSpacing": 12,
         "showCard": {
             "actionMode": "inline",
             "inlineTopMargin": 16,

examples/AdaptiveCards/Views/Actions/Action.d.ts

@@ -5,6 +5,7 @@ import { SubmitActionModel } from '../../Models/Actions/SubmitAction';
 interface IProps {
     index: number;
     model: OpenUrlActionModel | ShowCardActionModel | SubmitActionModel;
+    direction: 'row' | 'column';
     theme: 'default' | 'emphasis';
 }
 interface IState {
@@ -15,8 +16,8 @@ export declare class ActionView extends React.Component<IProps, IState> {
     render(): JSX.Element;
     private onPress;
     private readonly isOneTimeAction;
-    private readonly leftBorderWidth;
-    private readonly spacing;
+    private readonly borderWidth;
+    private readonly borderStyle;
     private readonly title;
 }
 export {};

examples/AdaptiveCards/Views/Actions/Action.js

@@ -31,25 +31,34 @@ export class ActionView extends React.Component {
         if (!model || !model.isSchemaCheckPassed) {
             return DebugOutputFactory.createDebugOutputBanner(model.type + '>>' + model.title + ' is not valid', theme, 'error');
         }
-        return (React.createElement(Button, { flex: 1, title: this.title, color: StyleManager.getColor('accent', theme, false), fontSize: StyleManager.getFontSize('default'), fontWeight: StyleManager.getFontWeight('bolder'), backgroundColor: StyleManager.getBackgroundColor(theme), textHorizontalAlign: 'center', textVerticalAlign: 'center', paddingTop: 6, paddingBottom: 6, paddingLeft: 16, paddingRight: 16, onPress: this.onPress, disabled: this.state.disabled, marginTop: StyleManager.actionDirection === 'vertically' ? this.spacing : 0, marginLeft: StyleManager.actionDirection === 'horizontal' ? this.spacing : 0, style: {
-                borderLeftWidth: this.leftBorderWidth,
-                borderLeftColor: StyleManager.separatorColor,
-            } }));
+        return (React.createElement(Button, { flex: 1, title: this.title, color: StyleManager.getColor('accent', theme, false), fontSize: StyleManager.getFontSize('default'), fontWeight: StyleManager.getFontWeight('bolder'), backgroundColor: StyleManager.getBackgroundColor(theme), textHorizontalAlign: 'center', textVerticalAlign: 'center', paddingTop: 12, paddingBottom: 12, paddingLeft: 16, paddingRight: 16, onPress: this.onPress, disabled: this.state.disabled, style: this.borderStyle }));
     }
     get isOneTimeAction() {
         return ConfigManager.getInstance().getConfig().mode === 'release' && this.props.model && this.props.model.type === ActionType.Submit;
     }
-    get leftBorderWidth() {
+    get borderWidth() {
         if (this.props.index !== undefined && this.props.index > 0) {
-            return 1;
+            return StyleManager.separatorThickness;
         }
         return 0;
     }
-    get spacing() {
-        if (this.props.index !== undefined && this.props.index > 0) {
-            return StyleManager.actionSpacing;
+    get borderStyle() {
+        switch (this.props.direction) {
+            case 'column':
+                return {
+                    paddingTop: 16,
+                    paddingBottom: 16,
+                    borderTopWidth: this.borderWidth,
+                    borderTopColor: StyleManager.separatorColor,
+                };
+            default:
+                return {
+                    paddingTop: 6,
+                    paddingBottom: 6,
+                    borderLeftWidth: this.borderWidth,
+                    borderLeftColor: StyleManager.separatorColor,
+                };
         }
-        return 0;
     }
     get title() {
         const { model } = this.props;

examples/AdaptiveCards/Views/Cards/AdaptiveCard.js

@@ -72,7 +72,7 @@ export class AdaptiveCardView extends React.Component {
             return undefined;
         }
         return model.actions.map((action, index) => {
-            return ActionFactory.createAction(action, index, theme);
+            return ActionFactory.createAction(action, index, this.buttonFlexDirection, theme);
         });
     }
     renderSubCard() {

examples/AdaptiveCards/Views/Factories/ActionFactory.d.ts

@@ -3,5 +3,5 @@ import { OpenUrlActionModel } from '../../Models/Actions/OpenUrlAction';
 import { ShowCardActionModel } from '../../Models/Actions/ShowCardAction';
 import { SubmitActionModel } from '../../Models/Actions/SubmitAction';
 export declare class ActionFactory {
-    static createAction(model: OpenUrlActionModel | ShowCardActionModel | SubmitActionModel, index: number, theme: 'default' | 'emphasis'): JSX.Element;
+    static createAction(model: OpenUrlActionModel | ShowCardActionModel | SubmitActionModel, index: number, direction: 'row' | 'column', theme: 'default' | 'emphasis'): JSX.Element;
 }

examples/AdaptiveCards/Views/Factories/ActionFactory.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ActionView } from '../Actions/Action';
 export class ActionFactory {
-    static createAction(model, index, theme) {
+    static createAction(model, index, direction, theme) {
         if (model) {
-            return (React.createElement(ActionView, { key: model.type + index, index: index, model: model, theme: theme }));
+            return (React.createElement(ActionView, { key: model.type + index, index: index, model: model, direction: direction, theme: theme }));
         }
         return null;
     }

src/Components/Containers/ButtonGroup.tsx

@@ -4,7 +4,7 @@ import { StyleManager } from '../../Styles/StyleManager';
 
 interface IProps {
     hasSpacing: boolean;
-    flexDirection: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    flexDirection: 'row' | 'column';
 }
 
 export class ButtonGroup extends React.Component<IProps> {
@@ -28,7 +28,7 @@ export class ButtonGroup extends React.Component<IProps> {
         if (this.props.hasSpacing) {
             return {
                 marginTop: StyleManager.actionSetSpacing,
-                paddingTop: 12,
+                paddingTop: this.props.flexDirection === 'row' ? 12 : 0,
                 justifyContent: 'center',
                 borderTopWidth: StyleManager.separatorThickness,
                 borderTopColor: StyleManager.separatorColor

src/Config/default.json

@@ -104,7 +104,7 @@
     "actions": {
         "maxActions": 2,
         "spacing": "large",
-        "buttonSpacing": 0,
+        "buttonSpacing": 12,
         "showCard": {
             "actionMode": "inline",
             "inlineTopMargin": 16,

src/Views/Actions/Action.tsx

@@ -12,6 +12,7 @@ import { DebugOutputFactory } from '../Factories/DebugOutputFactory';
 interface IProps {
     index: number;
     model: OpenUrlActionModel | ShowCardActionModel | SubmitActionModel;
+    direction: 'row' | 'column';
     theme: 'default' | 'emphasis';
 }
 
@@ -45,18 +46,13 @@ export class ActionView extends React.Component<IProps, IState> {
                 backgroundColor={StyleManager.getBackgroundColor(theme)}
                 textHorizontalAlign='center'
                 textVerticalAlign='center'
-                paddingTop={6}
-                paddingBottom={6}
+                paddingTop={12}
+                paddingBottom={12}
                 paddingLeft={16}
                 paddingRight={16}
                 onPress={this.onPress}
                 disabled={this.state.disabled}
-                marginTop={StyleManager.actionDirection === 'vertically' ? this.spacing : 0}
-                marginLeft={StyleManager.actionDirection === 'horizontal' ? this.spacing : 0}
-                style={{
-                    borderLeftWidth: this.leftBorderWidth,
-                    borderLeftColor: StyleManager.separatorColor,
-                }}
+                style={this.borderStyle}
             />
         );
     }
@@ -86,18 +82,30 @@ export class ActionView extends React.Component<IProps, IState> {
         return ConfigManager.getInstance().getConfig().mode === 'release' && this.props.model && this.props.model.type === ActionType.Submit;
     }
 
-    private get leftBorderWidth() {
+    private get borderWidth() {
         if (this.props.index !== undefined && this.props.index > 0) {
-            return 1;
+            return StyleManager.separatorThickness;
         }
         return 0;
     }
 
-    private get spacing() {
-        if (this.props.index !== undefined && this.props.index > 0) {
-            return StyleManager.actionSpacing;
+    private get borderStyle() {
+        switch (this.props.direction) {
+            case 'column':
+                return {
+                    paddingTop: 16,
+                    paddingBottom: 16,
+                    borderTopWidth: this.borderWidth,
+                    borderTopColor: StyleManager.separatorColor,
+                };
+            default:
+                return {
+                    paddingTop: 6,
+                    paddingBottom: 6,
+                    borderLeftWidth: this.borderWidth,
+                    borderLeftColor: StyleManager.separatorColor,
+                };
         }
-        return 0;
     }
 
     // As lots of the skill team is violate the rule that title is required in all actions,

src/Views/Cards/AdaptiveCard.tsx

@@ -108,7 +108,7 @@ export class AdaptiveCardView extends React.Component<IProps, IState> {
         }
 
         return model.actions.map((action, index) => {
-            return ActionFactory.createAction(action, index, theme);
+            return ActionFactory.createAction(action, index, this.buttonFlexDirection, theme);
         });
     }
 

src/Views/Factories/ActionFactory.tsx

@@ -7,13 +7,14 @@ import { ActionView } from '../Actions/Action';
 
 export class ActionFactory {
     // tslint:disable-next-line:max-line-length
-    public static createAction(model: OpenUrlActionModel | ShowCardActionModel | SubmitActionModel, index: number, theme: 'default' | 'emphasis'): JSX.Element {
+    public static createAction(model: OpenUrlActionModel | ShowCardActionModel | SubmitActionModel, index: number, direction: 'row' | 'column', theme: 'default' | 'emphasis'): JSX.Element {
         if (model) {
             return (
-                <ActionView 
+                <ActionView
                     key={model.type + index}
                     index={index}
                     model={model}
+                    direction={direction}
                     theme={theme}
                 />
             );

tool/src/assets/AdaptiveCards/Components/Containers/ButtonGroup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 interface IProps {
     hasSpacing: boolean;
-    flexDirection: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    flexDirection: 'row' | 'column';
 }
 export declare class ButtonGroup extends React.Component<IProps> {
     render(): JSX.Element;

tool/src/assets/AdaptiveCards/Components/Containers/ButtonGroup.js

@@ -15,7 +15,7 @@ export class ButtonGroup extends React.Component {
         if (this.props.hasSpacing) {
             return {
                 marginTop: StyleManager.actionSetSpacing,
-                paddingTop: 12,
+                paddingTop: this.props.flexDirection === 'row' ? 12 : 0,
                 justifyContent: 'center',
                 borderTopWidth: StyleManager.separatorThickness,
                 borderTopColor: StyleManager.separatorColor

tool/src/assets/AdaptiveCards/Config/default.json

@@ -104,7 +104,7 @@
     "actions": {
         "maxActions": 2,
         "spacing": "large",
-        "buttonSpacing": 0,
+        "buttonSpacing": 12,
         "showCard": {
             "actionMode": "inline",
             "inlineTopMargin": 16,

tool/src/assets/AdaptiveCards/Views/Actions/Action.d.ts

@@ -5,6 +5,7 @@ import { SubmitActionModel } from '../../Models/Actions/SubmitAction';
 interface IProps {
     index: number;
     model: OpenUrlActionModel | ShowCardActionModel | SubmitActionModel;
+    direction: 'row' | 'column';
     theme: 'default' | 'emphasis';
 }
 interface IState {
@@ -15,8 +16,8 @@ export declare class ActionView extends React.Component<IProps, IState> {
     render(): JSX.Element;
     private onPress;
     private readonly isOneTimeAction;
-    private readonly leftBorderWidth;
-    private readonly spacing;
+    private readonly borderWidth;
+    private readonly borderStyle;
     private readonly title;
 }
 export {};

tool/src/assets/AdaptiveCards/Views/Actions/Action.js

@@ -31,25 +31,34 @@ export class ActionView extends React.Component {
         if (!model || !model.isSchemaCheckPassed) {
             return DebugOutputFactory.createDebugOutputBanner(model.type + '>>' + model.title + ' is not valid', theme, 'error');
         }
-        return (React.createElement(Button, { flex: 1, title: this.title, color: StyleManager.getColor('accent', theme, false), fontSize: StyleManager.getFontSize('default'), fontWeight: StyleManager.getFontWeight('bolder'), backgroundColor: StyleManager.getBackgroundColor(theme), textHorizontalAlign: 'center', textVerticalAlign: 'center', paddingTop: 6, paddingBottom: 6, paddingLeft: 16, paddingRight: 16, onPress: this.onPress, disabled: this.state.disabled, marginTop: StyleManager.actionDirection === 'vertically' ? this.spacing : 0, marginLeft: StyleManager.actionDirection === 'horizontal' ? this.spacing : 0, style: {
-                borderLeftWidth: this.leftBorderWidth,
-                borderLeftColor: StyleManager.separatorColor,
-            } }));
+        return (React.createElement(Button, { flex: 1, title: this.title, color: StyleManager.getColor('accent', theme, false), fontSize: StyleManager.getFontSize('default'), fontWeight: StyleManager.getFontWeight('bolder'), backgroundColor: StyleManager.getBackgroundColor(theme), textHorizontalAlign: 'center', textVerticalAlign: 'center', paddingTop: 12, paddingBottom: 12, paddingLeft: 16, paddingRight: 16, onPress: this.onPress, disabled: this.state.disabled, style: this.borderStyle }));
     }
     get isOneTimeAction() {
         return ConfigManager.getInstance().getConfig().mode === 'release' && this.props.model && this.props.model.type === ActionType.Submit;
     }
-    get leftBorderWidth() {
+    get borderWidth() {
         if (this.props.index !== undefined && this.props.index > 0) {
-            return 1;
+            return StyleManager.separatorThickness;
         }
         return 0;
     }
-    get spacing() {
-        if (this.props.index !== undefined && this.props.index > 0) {
-            return StyleManager.actionSpacing;
+    get borderStyle() {
+        switch (this.props.direction) {
+            case 'column':
+                return {
+                    paddingTop: 16,
+                    paddingBottom: 16,
+                    borderTopWidth: this.borderWidth,
+                    borderTopColor: StyleManager.separatorColor,
+                };
+            default:
+                return {
+                    paddingTop: 6,
+                    paddingBottom: 6,
+                    borderLeftWidth: this.borderWidth,
+                    borderLeftColor: StyleManager.separatorColor,
+                };
         }
-        return 0;
     }
     get title() {
         const { model } = this.props;

tool/src/assets/AdaptiveCards/Views/Cards/AdaptiveCard.js

@@ -72,7 +72,7 @@ export class AdaptiveCardView extends React.Component {
             return undefined;
         }
         return model.actions.map((action, index) => {
-            return ActionFactory.createAction(action, index, theme);
+            return ActionFactory.createAction(action, index, this.buttonFlexDirection, theme);
         });
     }
     renderSubCard() {

tool/src/assets/AdaptiveCards/Views/Factories/ActionFactory.d.ts

@@ -3,5 +3,5 @@ import { OpenUrlActionModel } from '../../Models/Actions/OpenUrlAction';
 import { ShowCardActionModel } from '../../Models/Actions/ShowCardAction';
 import { SubmitActionModel } from '../../Models/Actions/SubmitAction';
 export declare class ActionFactory {
-    static createAction(model: OpenUrlActionModel | ShowCardActionModel | SubmitActionModel, index: number, theme: 'default' | 'emphasis'): JSX.Element;
+    static createAction(model: OpenUrlActionModel | ShowCardActionModel | SubmitActionModel, index: number, direction: 'row' | 'column', theme: 'default' | 'emphasis'): JSX.Element;
 }

tool/src/assets/AdaptiveCards/Views/Factories/ActionFactory.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ActionView } from '../Actions/Action';
 export class ActionFactory {
-    static createAction(model, index, theme) {
+    static createAction(model, index, direction, theme) {
         if (model) {
-            return (React.createElement(ActionView, { key: model.type + index, index: index, model: model, theme: theme }));
+            return (React.createElement(ActionView, { key: model.type + index, index: index, model: model, direction: direction, theme: theme }));
         }
         return null;
     }