enterprise icon indicating copy to clipboard operation
enterprise copied to clipboard

Typography: Add responsive text classes

Open jvedua opened this issue 2 years ago • 13 comments

A feature that was introduced in the HCM Manager Homepage specifically in the widget "Team Raves".

image image

The ability to emphasize the rave through font size based on the number of characters used. As shown in the example above if the rave provided is short we should automatically use the default largest label size to emphasize it and once the characters exceeds for example 15 characters then we revert to displaying them in its regular size.

This enhanced the experience of the Raves widget as it provided "at a glance" view of short shout outs and kudos that can be immediately absorbed by the viewer.

We would like to request to have this feature standardized in the IDS so we can also utilize it in other future scenarios not just on the "Raves" and this will minimize customization on the development end. Also this was requested by the LIME team when they approved the enhancement.

Thanks! Joseph

jvedua avatar Mar 09 '22 03:03 jvedua

@jvedua Im not sure i understand the logic of how this would work (when would the sizes change?).

It seems like maybe either the developer would have to do this (so not a standard/reusable feature). Or the "raver" would need to edit the rave the way they want (rich text maybe?)

Also from a UI standpoint i think it looks pretty "un-uniform" having them all look totally different.

@kevinwhitedesign @inforandy @lucacolumbu

tmcconechy avatar Mar 09 '22 15:03 tmcconechy

Oh, is it basically "responsive text" like https://www.w3schools.com/howto/howto_css_responsive_text.asp ? I.E. not related by number of characters just different sizes at different breakpoints

tmcconechy avatar Mar 09 '22 15:03 tmcconechy

Hi @tmcconechy,

The idea is to emphasize short shout outs and kudos, something like 15 characters below will be displayed in a much larger font size and 16 characters above will be displayed in the default size.. so we need it to be automatic and will have the character number as trigger of which font size ti display.

Yes it will be un-uniform and thats the idea, we need to emphasize the short call outs and kudos to enhance the "at a glance" experience.

jvedua avatar Mar 10 '22 12:03 jvedua

ok if its just some way to set responsive text like https://www.w3schools.com/howto/howto_css_responsive_text.asp thats possible. But otherwise i dont really understand what the logic would be...

Seems maybe like something the rave team would just code and not a Ids Feature?

tmcconechy avatar Mar 10 '22 14:03 tmcconechy

Yes @tmcconechy thats the initial recommendation for it to be hardcoded but the LIME team requested it to be added as a standard IDS feature. And also I discussed this with my team and we thought that this feature can also be applied on other scenarios not just the raves, at least we already have it as a feature that we can enable will be a good feature.

jvedua avatar Mar 10 '22 15:03 jvedua

@jvedua the examples shown make typography seem inconsistent. I think type is best used where certain content is shown at consistent sizes. Like title. I think we do have 16px body and 14px body for secondary / less important content?

kevinwhitedesign avatar Mar 10 '22 15:03 kevinwhitedesign

I totally agree. I can see responsive text based on the size of the container but maybe not that every rave looks entirely different...

tmcconechy avatar Mar 10 '22 15:03 tmcconechy

@tmcconechy, @kevinwhitedesign so will it be much better to just have this customized rather than standardized? I can re-discuss this with Whey et al

jvedua avatar Mar 10 '22 15:03 jvedua

@jvedua this would need IDS design review. It had ramifications to consider, I see issues with the solution.

kevinwhitedesign avatar Mar 10 '22 15:03 kevinwhitedesign

@kevinwhitedesign ok, will discuss with my team while IDS reviews the request.

jvedua avatar Mar 10 '22 16:03 jvedua

cc @inforandy

tmcconechy avatar Mar 30 '22 16:03 tmcconechy

@jvedua we've come to the consensus that we can't release something like this yet due to scalability / consistency concerns. However, we love the suggestion and we'll be addressing this problem from a system perspective of "lack of type hierarchy / flexibility" in the future version of the design system.

We'll backlog & consider alongside new updates.

kevinwhitedesign avatar Apr 07 '22 19:04 kevinwhitedesign

@kevinwhitedesign got it, I have already cascaded the consensus to the Team here in Manila

Thanks!

jvedua avatar Apr 08 '22 07:04 jvedua