feat: expose inner node component props (#15)

ory · Oct 6, 2022 · 580fcdb · 580fcdb
1 parent e4b4ce3
commit 580fcdb
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 16 deletions.
diff --git a/src/react-components/ory/helpers/filter-flow-nodes.tsx b/src/react-components/ory/helpers/filter-flow-nodes.tsx
@@ -6,17 +6,18 @@ import {
   getNodeInputType,
   isUiNodeInputAttributes,
 } from "@ory/integrations/ui"
-import { Node } from "./node"
+import { Node, NodeOverrideProps } from "./node"
 import { gridStyle } from "../../../theme"
 
-export interface Props {
+export interface Props extends NodeOverrideProps {
   filter: FilterNodesByGroups
   includeCSRF?: boolean
 }
 
 export const FilterFlowNodes = ({
   filter,
   includeCSRF,
+  ...overrides
 }: Props): JSX.Element | null => {
   const getInputName = (node: UiNode): string =>
     isUiNodeInputAttributes(node.attributes) ? node.attributes.name : ""
@@ -29,11 +30,11 @@ export const FilterFlowNodes = ({
     .map((node, k) =>
       ["hidden"].includes(getNodeInputType(node.attributes))
         ? {
-            node: <Node node={node} key={k} />,
+            node: <Node node={node} key={k} {...overrides} />,
             hidden: true,
           }
         : {
-            node: <Node node={node} key={k} />,
+            node: <Node node={node} key={k} {...overrides} />,
             hidden: false,
           },
     )

diff --git a/src/react-components/ory/helpers/node.tsx b/src/react-components/ory/helpers/node.tsx
@@ -6,8 +6,8 @@ import {
   isUiNodeInputAttributes,
   isUiNodeTextAttributes,
 } from "@ory/integrations/ui"
-import { Button } from "../../button"
-import { ButtonSocial } from "../../button-social"
+import { Button, ButtonProps } from "../../button"
+import { ButtonSocial, ButtonSocialProps } from "../../button-social"
 import { Checkbox } from "../../checkbox"
 import { InputField } from "../../input-field"
 import { Image } from "../../image"
@@ -23,13 +23,22 @@ interface ButtonSubmit {
   value: string
 }
 
+export type NodeOverrideProps = {
+  buttonOverrideProps?: Partial<ButtonProps>
+  buttonSocialOverrideProps?: Partial<ButtonSocialProps>
+}
+
+export type NodeProps = {
+  node: UiNode
+  className?: string
+} & NodeOverrideProps
+
 export const Node = ({
   node,
   className,
-}: {
-  node: UiNode
-  className?: string
-}): JSX.Element | null => {
+  buttonOverrideProps,
+  buttonSocialOverrideProps,
+}: NodeProps): JSX.Element | null => {
   if (isUiNodeImageAttributes(node.attributes)) {
     return (
       <Image
@@ -142,6 +151,7 @@ export const Node = ({
             size={"large"}
             fullWidth
             disabled={attrs.disabled}
+            {...(buttonSocialOverrideProps && buttonSocialOverrideProps)}
             {...submit}
           />
         ) : (
@@ -151,6 +161,7 @@ export const Node = ({
             variant={"semibold"}
             fullWidth
             disabled={attrs.disabled}
+            {...(buttonOverrideProps && buttonOverrideProps)}
             {...submit}
           />
         )

diff --git a/src/react-components/ory/sections/lookup-secret-settings-section.tsx b/src/react-components/ory/sections/lookup-secret-settings-section.tsx
@@ -26,7 +26,10 @@ export const LookupSecretSettingsSection = ({
         <FilterFlowNodes
           filter={{ ...filter, excludeAttributes: "submit,button" }}
         />
-        <FilterFlowNodes filter={{ ...filter, attributes: "submit,button" }} />
+        <FilterFlowNodes
+          filter={{ ...filter, attributes: "submit,button" }}
+          buttonOverrideProps={{ fullWidth: false }}
+        />
       </div>
     </div>
   ) : null

diff --git a/src/react-components/ory/sections/oidc-settings-section.tsx b/src/react-components/ory/sections/oidc-settings-section.tsx
@@ -23,7 +23,10 @@ export const OIDCSettingsSection = ({
   return hasOIDC(flow.ui.nodes) ? (
     <div className={gridStyle({ gap: 32 })}>
       <NodeMessages nodes={filterNodesByGroups(filter)} />
-      <FilterFlowNodes filter={filter} />
+      <FilterFlowNodes
+        filter={filter}
+        buttonOverrideProps={{ fullWidth: false }}
+      />
     </div>
   ) : null
 }
diff --git a/src/react-components/ory/sections/password-settings-section.tsx b/src/react-components/ory/sections/password-settings-section.tsx
@@ -25,7 +25,10 @@ export const PasswordSettingsSection = ({
         <FilterFlowNodes
           filter={{ ...filter, excludeAttributes: "submit,button" }}
         />
-        <FilterFlowNodes filter={{ ...filter, attributes: "submit,button" }} />
+        <FilterFlowNodes
+          filter={{ ...filter, attributes: "submit,button" }}
+          buttonOverrideProps={{ fullWidth: false }}
+        />
       </div>
     </div>
   ) : null

diff --git a/src/react-components/ory/sections/profile-settings-section.tsx b/src/react-components/ory/sections/profile-settings-section.tsx
@@ -20,7 +20,10 @@ export const ProfileSettingsSection = ({
         <FilterFlowNodes
           filter={{ ...filter, excludeAttributes: "submit,button" }}
         />
-        <FilterFlowNodes filter={{ ...filter, attributes: "submit,button" }} />
+        <FilterFlowNodes
+          filter={{ ...filter, attributes: "submit,button" }}
+          buttonOverrideProps={{ fullWidth: false }}
+        />
       </div>
     </div>
   )

diff --git a/src/react-components/ory/sections/totp-settings-section.tsx b/src/react-components/ory/sections/totp-settings-section.tsx
@@ -26,7 +26,10 @@ export const TOTPSettingsSection = ({
         <FilterFlowNodes
           filter={{ ...filter, excludeAttributes: "submit,button" }}
         />
-        <FilterFlowNodes filter={{ ...filter, attributes: "submit,button" }} />
+        <FilterFlowNodes
+          filter={{ ...filter, attributes: "submit,button" }}
+          buttonOverrideProps={{ fullWidth: false }}
+        />
       </div>
     </div>
   ) : null

diff --git a/src/react-components/ory/sections/webauthn-settings-section.tsx b/src/react-components/ory/sections/webauthn-settings-section.tsx
@@ -26,7 +26,10 @@ export const WebAuthnSettingsSection = ({
         <FilterFlowNodes
           filter={{ ...filter, excludeAttributes: "submit,button" }}
         />
-        <FilterFlowNodes filter={{ ...filter, attributes: "submit,button" }} />
+        <FilterFlowNodes
+          filter={{ ...filter, attributes: "submit,button" }}
+          buttonOverrideProps={{ fullWidth: false }}
+        />
       </div>
     </div>
   ) : null