fix: addresses data issues with input button in text action (#1728)

* fixes data issues with button in text action

* fixes logic

* fixes missing prop

* removes unneeded code

* updates prop description

Author: nalogiudice

packages/fast-components-react-msft/app/utilities/additional-props.plugin.ts

@@ -13,10 +13,14 @@ export default class MapChildrenPropToCallbackPassingClassName extends Plugin<
             const callbackArguments: any = {
                 className,
             };
-            callbackArguments.disabled =
-                typeof disabled === "boolean" ? disabled : undefined;
-            callbackArguments.appearance =
-                typeof appearance === "string" ? appearance : undefined;
+
+            if (disabled) {
+                callbackArguments.disabled = disabled;
+            }
+
+            if (appearance) {
+                callbackArguments.appearance = appearance;
+            }
 
             return React.createElement(
                 childOption.component,

packages/fast-components-react-msft/src/text-action/examples.data.tsx

@@ -18,7 +18,6 @@ const examples: ComponentFactoryExample<TextActionProps> = {
         button: {
             id: buttonSchema.id,
             props: {
-                disabled: true,
                 children: {
                     id: svgSchema.id,
                     props: {
@@ -40,7 +39,6 @@ const examples: ComponentFactoryExample<TextActionProps> = {
             button: {
                 id: buttonSchema.id,
                 props: {
-                    disabled: true,
                     children: {
                         id: svgSchema.id,
                         props: {
@@ -60,7 +58,6 @@ const examples: ComponentFactoryExample<TextActionProps> = {
             button: {
                 id: buttonSchema.id,
                 props: {
-                    disabled: true,
                     children: "Search",
                 },
             } as any,
@@ -82,7 +79,6 @@ const examples: ComponentFactoryExample<TextActionProps> = {
             button: {
                 id: buttonSchema.id,
                 props: {
-                    disabled: true,
                     children: {
                         id: svgSchema.id,
                         props: {
@@ -103,7 +99,6 @@ const examples: ComponentFactoryExample<TextActionProps> = {
             button: {
                 id: buttonSchema.id,
                 props: {
-                    disabled: true,
                     children: {
                         id: svgSchema.id,
                         props: {
@@ -146,7 +141,6 @@ const examples: ComponentFactoryExample<TextActionProps> = {
             button: {
                 id: buttonSchema.id,
                 props: {
-                    disabled: true,
                     children: {
                         id: svgSchema.id,
                         props: {
@@ -169,7 +163,6 @@ const examples: ComponentFactoryExample<TextActionProps> = {
             button: {
                 id: buttonSchema.id,
                 props: {
-                    disabled: true,
                     children: {
                         id: svgSchema.id,
                         props: {

packages/fast-components-react-msft/src/text-action/text-action.props.ts

@@ -24,11 +24,7 @@ export interface TextActionHandledProps
     /**
      * The text action button
      */
-    button?: (
-        classname?: string,
-        disabled?: boolean,
-        appearance?: ButtonAppearance
-    ) => React.ReactNode;
+    button?: (classname?: string, disabled?: boolean) => React.ReactNode;
 
     /**
      * Text action button position
@@ -56,6 +52,11 @@ export interface TextActionHandledProps
      * Callback for when text action input is blurred
      */
     onBlur?: (e?: React.FocusEvent<HTMLInputElement>) => void;
+
+    /**
+     * Overall disabled attribute that controls both the input and button disabled states
+     */
+    disabled?: boolean;
 }
 
 export type TextActionProps = TextActionHandledProps & TextActionUnhandledProps;

packages/fast-components-styles-msft/src/text-action/index.ts

@@ -107,9 +107,6 @@ const styles: ComponentStyles<TextActionClassNameContract, DesignSystem> = (
             },
         },
         textAction_button: {
-            borderColor: "transparent",
-            color: neutralForegroundRest,
-            fill: neutralForegroundRest,
             height: `calc(${height()(designSystem)} - 6px)`,
             minWidth: "fit-content",
             margin: "2px",