Simple Modal button font

UI Builder
1

Hi,

Trying out the Simple Modal component. Well done !

A little remark, though : why is it that the buttons are hard-coded with the Arial font ? Couldn’t they just use the general font of the app ?

image
image2300×218 57.5 KB

2

These styles are not hard-coded.

image
image1268×215 24.9 KB

User agent stylesheet it’s styles that are defined by your browser/system.
Also, you could check the styles of this component here
As you see, Arial isn’t used by the component.

3

Hi @Dima and thank you for your reply.
Indeed, but then how come the buttons do not take up the styling of other buttons in the UI builder ? In my case, I have defined Lato, Roboto, sans-serif as the font-family, and I would expect all components to use that.
Another example I encountered in the meantime : the modal text does not take up the standard text styling of all text components.

4

Not sure how you define font family for your buttons(it will be helpful if you provide your way), but if you do it through app-level variables, it makes sense if custom component buttons also should accept it(same for text fonts).

I’ve created a ticket to research how that should work, and we will notify you when it will be released.

Regards, Dima.

6

Little update.

Simple Modal parts - buttons, and text are not instances of basic UI Builder components, they could have differences in sizes or other properties that could break the layout if we try to fully inherit basic components.
But for your case, is fully valuable to get the possibility to change font family through custom component styles variables or even inherit it from body.

For now, you could use the styles template that I provide below to reassign font family for any of the component parts:

.bl-customComponent-simple-modal {
  .simple-modal {
    &__content {
      font-family: X
    }

    &__title {
      font-family: X
    }

    &__text {
      font-family: X
    }

    &__button {
      font-family: X
    }

    &__input-form {
      .form-input {
        &__input {
          font-family: X
        }

        &__placeholder {
          font-family: X
        }
      }
    }
  }
}
7

Hi again @Dima,

Thanks for coming back to me here.

I define my font family by overriding the default font for body in the theme stylesheet. But it does not seem to be inherited into the component.
image

You are talking about app-level variables, but I don’t know where that is. Is there a way to actually get rid of the default Roboto ? (my app is a mobile app, so I have to package it in the app, which makes it heavier, I would gladly get rid of it)

Understood that inheriting standard UI builder styles could break the layout, it makes sense. Thanks for the example stylesheet. I was looking for a way to avoid having to redefine this (less code, and not having to maintain the font in many different places).

8

Hello @Nicolas_REMY,

But it does not seem to be inherited into the component.
You are talking about app-level variables, but I don’t know where that is.

As Dima said, it might not work at the moment. An internal ticket was created by Dima in order to research it and, if needed, to fix it. Soon we’ll get back to you with the results.