Javalab: add resize text options in the settings menu - #48077

thanks for this comment!

This may be unavoidable with the way we want to programmatically change font size, but I'm curious if this means we won't be able to fully remove inline styles from this component? @madelynkasula

Yeah good question, I was wondering the same. I opted to keep this here since this component is still using inline styles, but if we can programmatically do this via scss somehow that would be ideal. Maybe some sass magic to extract the font size value from the class name?

yeah, i was wondering the same thing. there are probably other solutions, but the 2 i think of immediately are:

1. all styles are SCSS except fontSize (simplest, not really the worst to live with)
2. we write some creative SCSS to generate the classes we need to set fontSize. this would be pretty simple to write (a map or function that programmatically generates classes like fontSize-13, fontSize-18, etc). however, this would likely leave us tightly coupled to the JS here unless we can figure out a creative way to share constants since both JS and SCSS would need to know that the font size can be from 13-68 and increments by 5 each step

if we can figure out a DRY way to share the "font sizes range from 13-68 every 5px," i think we could figure something out from there, but i'm not sure if it's worth it. we could just leave a comment that says why fontSize is set by the style attr and to use SCSS for everything else 🤷🏻‍♀️

Sounds good, yeah I'll leave a comment for now and we can revisit when this component gets converted to use SCSS.

okay, maybe i disagree with myself. the constant-sharing would be pretty easy if SCSS controls everything... some pseudocode to explain what i'm thinking (pay no attention to the weird filenames and stuff)

// javalab-editor.module.scss
$increment: 5;
$min-size: 13;
$max-size: 68;

// a function that generates CSS classes to control font-size from 13-68, incrementing every 5

:export {
  // variables created above to be used in JS
}

// redux.js
import style from 'javalab-editor.module.scss';

const INCREMENT_PX = parseInt(style.increment);

interested in y'alls thoughts on how this feels though

Ahh interesting. Wasn't too sure about how to share variables but this looks pretty promising. I'll give it a shot, thanks!

i didn't see @sanchitmalhotra126's comment until after i wrote my previous comment -- i'm fine with your suggestion for how to handle right now, just brainstorming how to handle this in the future 😄

Gotcha sounds good :) I think I'm inclined to leave as-is for now (with the comment), but do think this is a direction worth exploring

nit: it's a little confusing that some strings are i18n and others are javalabMsg -- maybe javalabI18n instead?

I think we tend to use javalabMsg across most Javalab components, so I can change i18n to msg instead if that's clearer?

works for me!

okay, maybe i disagree with myself. the constant-sharing would be pretty easy if SCSS controls everything... some pseudocode to explain what i'm thinking (pay no attention to the weird filenames and stuff)

// javalab-editor.module.scss
$increment: 5;
$min-size: 13;
$max-size: 68;

// a function that generates CSS classes to control font-size from 13-68, incrementing every 5

:export {
  // variables created above to be used in JS
}

// redux.js
import style from 'javalab-editor.module.scss';

const INCREMENT_PX = parseInt(style.increment);

interested in y'alls thoughts on how this feels though