Hi, I am trying to theme the confirmation message but I cannot find how to decorate the message component. I've looked to the examples and decorate some field elements using the "withCustomStyles" example (https://github.com/lauriii/next-acms-webform/blob/theming-example/pages/...) but I cannot theme the message.
Even if I wanted to use the markup provided from the webform configuration the markup gets rendered as string including HTML tags.

Am I missing something or this is not possible at the moment?

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

matteo.borgognoni created an issue. See original summary.

matteo.borgognoni’s picture

Issue summary: View changes
StatusFileSize
new73.8 KB
matteo.borgognoni’s picture

Issue summary: View changes

hooroomoo made their first commit to this issue’s fork.

hooroomoo’s picture

Edit: Removed original comment

hooroomoo’s picture

Status: Active » Needs review
hooroomoo’s picture

Thanks for filing this issue, I created an MR that should allow this now. If you are using the 'withCustomStyles' example, pass your styling to the the wrapperProps argument of the EnhancedComponent.

const messageProps = {
  className: classNames(['text-red-700', 'text-sm', 'font-bold'])
 }

<Webform id={id} data={webform} customComponents={{
          message: withCustomStyles(components.message, {}, {}, messageProps),
          confirmation_page: withCustomStyles(components.confirmation_page, {}, {}, messageProps),
    }}/>

You could also do something like this where you pass in a variable with a custom message and theme.

export const Message1 = () => {
  return <div {...messageProps}>Hello I am a confirmation message</div>;
}

<Webform id={id} data={webform} customComponents={{
          message: Message1,
    }}/>

lauriii made their first commit to this issue’s fork.

lauriii’s picture

Status: Needs review » Fixed

Thanks! Merged!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.