fix: added option to override the slide button container

EAVFW · Sep 6, 2024 · 8a0417c · 8a0417c
1 parent 0b28486
commit 8a0417c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/packages/core/src/components/button/Button.tsx b/packages/core/src/components/button/Button.tsx
@@ -2,9 +2,10 @@
 import React, { PropsWithChildren } from "react";
 import { MouseEventHandler, useEffect, useState } from "react";
 import { quickformtokens } from "../../style/quickFormTokensDefinition";
-import { makeStyles, shorthands } from "@griffel/react";
+import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
 
 type BtnContainerProps = {
+    readonly buttonClassName?: string;
     readonly className?: string;
     readonly style?: React.CSSProperties;
     readonly disabled?: boolean;
@@ -37,7 +38,7 @@ const useButtonStyles = makeStyles({
     }
 })
 
-export const Button: React.FC<PropsWithChildren<BtnContainerProps>> = ({ children, showPressEnter, onClick, disabled, visible, style }) => {
+export const Button: React.FC<PropsWithChildren<BtnContainerProps>> = ({ children, showPressEnter, onClick, disabled, visible, style, className, buttonClassName }) => {
 
     if (typeof visible !== "undefined" && visible === false) {
         return (<></>);
@@ -60,9 +61,9 @@ export const Button: React.FC<PropsWithChildren<BtnContainerProps>> = ({ childre
     }, []);
 
     return (
-        <div className={styles.container}>
+        <div className={mergeClasses(styles.container, className)}>
             <button
-                className={styles.button}
+                className={mergeClasses(styles.button, buttonClassName)}
                 style={style}
                 disabled={disabled}
                 type="button"

diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -4,15 +4,19 @@ import { useQuickForm } from '../../../state/QuickFormContext';
 import { Button, Slide } from '../../index';
 import { useHandleEnterKeypress } from '../../../hooks';
 import { quickformtokens } from "../../../style";
-import { mergeClasses } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { IconResolver } from '../../icons/IconResolver';
 import { SlideModel } from '../../../model';
 
+const useSlideRenderStyles = makeStyles({
+    button: { display: 'flex', alignItems: 'center', justifyContent: 'center' }
+});
 
 export const SlideRenderer: React.FC = () => {
 
     const { state, goToNextSlide } = useQuickForm();
     const [className, setClassName] = useState(state.classes.slide);
+    const styles = useSlideRenderStyles();
 
     const currentSlide: SlideModel = state.slides[state.currIdx];
 
@@ -47,7 +51,8 @@ export const SlideRenderer: React.FC = () => {
         >
             <Slide model={currentSlide} />
             <Button
-                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                className={state.classes.slideButtonContainer}
+                buttonClassName={mergeClasses(styles.button, state.classes.slideButton)}
                 onClick={goToNextSlide}
                 showPressEnter={showPressEnter}
                 children={

diff --git a/packages/core/src/state/QuickformState.ts b/packages/core/src/state/QuickformState.ts
@@ -3,7 +3,15 @@ import { SlideModel } from "../model/SlideModel";
 import { LayoutDefinition, QuickFormModel } from "../model";
 import { IconType } from "../components/icons/IconResolver";
 
-export type QuickformClassNames = { slide: string, slideIsIn: string, slideIsOut: string, submit:string, ending:string };
+export type QuickformClassNames = {
+    slide: string,
+    slideButton: string,
+    slideButtonContainer: string;
+    slideIsIn: string,
+    slideIsOut: string,
+    submit: string,
+    ending: string
+};
 export type QuickformState = {
     autoAdvanceSlides?: boolean;
     enableQuestionNumbers?: boolean;