Merge pull request #407 from xTEddie/prechat-toggle-input-styles

PreChatSurveyPane Toggle Input Styles
microsoft · Dec 11, 2023 · 007b9f6 · 007b9f6
2 parents c167932 + 25fb89f
commit 007b9f6
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 3 deletions.
diff --git a/CHANGE_LOG.md b/CHANGE_LOG.md
@@ -231,6 +231,10 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+### Added
+
+- Add ability to customize `PreChatSurveyPane`'s toggle inputs using `IPreChatSurveyPaneToggleInputStyles` & Use `baseline` by default
+
 ### Fixed
 
 - Fixed loading pane icon image fit

diff --git a/chat-components/src/components/prechatsurveypane/PreChatSurveyPane.tsx b/chat-components/src/components/prechatsurveypane/PreChatSurveyPane.tsx
@@ -104,7 +104,10 @@ function PreChatSurveyPane(props: IPreChatSurveyPaneProps) {
                 padding-top: 7px;
                 padding-bottom: 7px;
             }
-            .ac-pushButton { 
+            .ac-input.ac-toggleInput {
+                align-items: ${props.styleProps?.customToggleInputStyleProps?.alignItems ?? defaultPreChatSurveyPaneStyles.customToggleInputStyleProps?.alignItems} !important;
+            }
+            .ac-pushButton {
                 border: 1px solid #00000000;
                 margin: 2px;
                 height: ${props.styleProps?.customButtonStyleProps?.height ?? defaultPreChatSurveyPaneStyles.customButtonStyleProps?.height};
@@ -115,7 +118,7 @@ function PreChatSurveyPane(props: IPreChatSurveyPaneProps) {
                 font-size: ${props.styleProps?.customButtonStyleProps?.fontSize ?? defaultPreChatSurveyPaneStyles.customButtonStyleProps?.fontSize};
                 font-family: ${props.styleProps?.customButtonStyleProps?.fontFamily ?? defaultPreChatSurveyPaneStyles.customButtonStyleProps?.fontFamily};
                 color: ${props.styleProps?.customButtonStyleProps?.color ?? defaultPreChatSurveyPaneStyles.customButtonStyleProps?.color};
-                background-color: ${props.styleProps?.customButtonStyleProps?.backgroundColor ?? defaultPreChatSurveyPaneStyles.customButtonStyleProps?.backgroundColor}; 
+                background-color: ${props.styleProps?.customButtonStyleProps?.backgroundColor ?? defaultPreChatSurveyPaneStyles.customButtonStyleProps?.backgroundColor};
             }`}</style>
             {!props.controlProps?.hidePreChatSurveyPane &&
                 <Stack

diff --git a/...nts/prechatsurveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneStyles.ts b/...nts/prechatsurveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneStyles.ts
@@ -5,12 +5,14 @@ import { defaultPreChatSurveyPaneGeneralStyles } from "./defaultPreChatSurveyPan
 import { defaultPreChatSurveyPaneMultilineTextInputStyles } from "./defaultPreChatSurveyPaneMultilineTextInputStyles";
 import { defaultPreChatSurveyPaneTextInputStyles } from "./defaultPreChatSurveyPaneTextInputStyles";
 import { defaultPreChatSurveyPaneMultichoiceInputStyles } from "./defaultPreChatSurveyPaneMultichoiceInputStyles";
+import { defaultPreChatSurveyPaneToggleInputStyles } from "./defaultPreChatSurveyPaneToggleInputStyles";
 
 export const defaultPreChatSurveyPaneStyles: IPreChatSurveyPaneStyleProps = {
     generalStyleProps: defaultPreChatSurveyPaneGeneralStyles,
     customButtonStyleProps: defaultPreChatSurveyPaneButtonStyles,
     adaptiveCardContainerStyleProps: defaultPreChatSurveyPaneACContainerStyles,
     customTextInputStyleProps: defaultPreChatSurveyPaneTextInputStyles,
     customMultilineTextInputStyleProps: defaultPreChatSurveyPaneMultilineTextInputStyles,
-    customMultichoiceInputStyleProps: defaultPreChatSurveyPaneMultichoiceInputStyles
+    customMultichoiceInputStyleProps: defaultPreChatSurveyPaneMultichoiceInputStyles,
+    customToggleInputStyleProps: defaultPreChatSurveyPaneToggleInputStyles
 };
diff --git a/...surveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneToggleInputStyles.ts b/...surveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneToggleInputStyles.ts
@@ -0,0 +1,5 @@
+import { IPreChatSurveyPaneToggleInputStyles } from "../../../interfaces/IPreChatSurveyPaneToggleInputStyles";
+
+export const defaultPreChatSurveyPaneToggleInputStyles: IPreChatSurveyPaneToggleInputStyles = {
+    alignItems: "baseline"
+};
diff --git a/chat-components/src/components/prechatsurveypane/interfaces/IPreChatSurveyPaneStyleProps.ts b/chat-components/src/components/prechatsurveypane/interfaces/IPreChatSurveyPaneStyleProps.ts
@@ -1,6 +1,7 @@
 import { IPreChatSurveyPaneButtonStyles } from "./IPreChatSurveyPaneButtonStyles";
 import { IStyle } from "@fluentui/react";
 import { IPreChatSurveyPaneElementStyles } from "./IPreChatSurveyPaneElementStyles";
+import { IPreChatSurveyPaneToggleInputStyles } from "./IPreChatSurveyPaneToggleInputStyles";
 
 export interface IPreChatSurveyPaneStyleProps {
     generalStyleProps?: IStyle;
@@ -10,4 +11,5 @@ export interface IPreChatSurveyPaneStyleProps {
     customTextInputStyleProps?: IPreChatSurveyPaneElementStyles;
     customMultilineTextInputStyleProps?: IPreChatSurveyPaneElementStyles;
     customMultichoiceInputStyleProps?: IPreChatSurveyPaneElementStyles;
+    customToggleInputStyleProps?: IPreChatSurveyPaneToggleInputStyles;
 }
diff --git a/...onents/src/components/prechatsurveypane/interfaces/IPreChatSurveyPaneToggleInputStyles.ts b/...onents/src/components/prechatsurveypane/interfaces/IPreChatSurveyPaneToggleInputStyles.ts
@@ -0,0 +1,3 @@
+export interface IPreChatSurveyPaneToggleInputStyles {
+    alignItems?: string;
+}
diff --git a/docs/customizations/prechatsurveypane.md b/docs/customizations/prechatsurveypane.md
@@ -48,6 +48,7 @@
 | customTextInputStyleProps | [IPreChatSurveyPaneElementStyles](../../chat-components/src/components/prechatsurveypane/interfaces/IPreChatSurveyPaneElementStyles.ts) | No | Styles of the `PreChatSurveyPane` text inputs | [defaultPreChatSurveyPaneTextInputStyles.ts](../../chat-components/src/components/prechatsurveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneTextInputStyles.ts) |
 | customMultilineTextInputStyleProps | [IPreChatSurveyPaneElementStyles](../../chat-components/src/components/prechatsurveypane/interfaces/IPreChatSurveyPaneElementStyles.ts) | No | Styles of the `PreChatSurveyPane` multiple text inputs | [defaultPreChatSurveyPaneMultilineTextInputStyles.ts](../../chat-components/src/components/prechatsurveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneMultilineTextInputStyles.ts) |
 | customMultichoiceInputStyleProps | [IPreChatSurveyPaneElementStyles](../../chat-components/src/components/prechatsurveypane/interfaces/IPreChatSurveyPaneElementStyles.ts) | No | Styles of the `PreChatSurveyPane` multiple choice inputs | [defaultPreChatSurveyPaneMultichoiceInputStyles.ts](../../chat-components/src/components/prechatsurveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneMultichoiceInputStyles.ts) |
+| customToggleInputStyleProps | [IPreChatSurveyPaneToggleInputStyles](../../chat-components/src/components/prechatsurveypane/interfaces/IPreChatSurveyPaneToggleInputStyles.ts) | No | Styles of the `PreChatSurveyPane` toggle inputs | [defaultPreChatSurveyPaneToggleInputStyles.ts](../../chat-components/src/components/prechatsurveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneToggleInputStyles.ts) |
 
 ## Sample Scenarios