Dynamic/custom font size for Icon Text component

[trz-justin-dev]

Just noticed dynamic font size is not allowed for Icon Text components.

[Paulo]

Hi @trz-justin-dev, thanks for flagging this! This is one of the components that we still need to add the new component font size control feature to.

Feature:

Component font size control

You can now adjust the font size for most components directly in the Styles settings! Available font size options map to the app's Typography settings for the current theme. You can also click FX to specify a px font size using a custom or dynamic value, such as 11px or h6Font. [font size] Some components with existing text size controls, such as Divider, are unchanged. Font size controls for these components will eventually move to the Styles settings in future updates.

I found an internal ticket were we are tracking this pending update, I added your feedback to it.

We'll be happy to update you here when it's done.

[Paulo]

Custom font size has been added for this component!

To set a custom value, add the "Font size" style under 'Appearance' and click "FX."

[trz-justin-dev]

@Paulo woohoo! is this the first time we're able to set an icon's size?

[Paulo]

First time we're able to set it to a custom size. We used to have limited options.

[trz-justin-dev]

@Paulo awesome!

i'm working today on a page which needs a little tag alongside text, and we'd like it to hug the text. since each text (there are three) has a different character length, we found putting two components side-by-side doesn't leave a consistent gap. wondering if you have ideas/suggestions?

goal is to get something like this (from Figma):

i first tried an icon text component with background and text coloring, but not quite good enough:

then i tried tags component to get the spacing, but lost control of font size between two tags:

thank you!

[Paulo]

I helped someone build a similar structure using a Container and a Key-Value component:

Locking UI components in place

I know this is an old thread but it causing me a bit of a headache. everytime I go to edit my app, it shifts the components, and they dont always go back to where they should go. Ive had to readjust my layout over a dozen times now because the components seem to float to wherever there is room. what is should look like: [image] What it ACTUALLY looks like: [Screenshot 2024-02-28 182556]

However, if we use the Icon format for the value of 'CARRIER' we won't be able to put text next to the check mark symbol. The spacing issue would be fixed, but the value would just be a symbol. Is the tradeoff worth it for your use case?

[trz-justin-dev]

hey @Paulo thanks for the help! the tag looks way better in key-value component, and the ability to have different fonts for label and value is perfect!

i can't find a way to hide the value but show the label (both disappear for a not-truthy value like ""), and would need a Left Justified option to keep consistent gap between label and value (tho it makes sense for key-value to not have this). also, when the fonts are different sizes, the tag is no longer aligned vertically with the label sadly. it's subtle but noticeable

i'll keep hacking around and see what i can make

[Paulo]

The tag format does look great but I see what you mean by it no longer being vertically aligned. I tried custom css to add top padding but it has an impact on every key-value pair. Let us know if you find a better way!

[trz-justin-dev]

hey @Paulo I think i stumbled on something useful related to this issue: the "stack" option for containers!

here's what i did:

1. add a container component
   a. set its type to stack instead of grid
   b. remove its margin, background color, border, and header
2. bring into the container both a text label and a tag/tags component
3. set the width to be Auto (this is a game changer)

i'm excited to see what other layout quirks i can fix with stack container plus auto width components!

[Paulo]

This is exactly what you were looking for!