Issue-249: Update HSelect label styling

[Kimaiyo077]

What is the Purpose?

Wrap label text when it exceeds a given limit

What was the approach?

Add CSS styling to wrap text

Are there any concerns to addressed further before or after merging this PR?

None

Mentions?

@andrewtpham @ninetteadhikari

Issue(s) affected?

Close #249

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/hikaya/vue-ui-components/BnL1uFuUdFB2vUNwHGaBVwCM2NwE
✅ Preview: https://vue-ui-components-git-select-styling-hikaya.vercel.app

[andrewtpham]

@amosnjoroge FYI, copying you to review this PR to give you an example of the minor styling changes we can make to help get the components more consistent. You can see the changes I made:

• replace the grey with a standard grey variable we use across the app called light-body-grey which can be found in https://github.com/hikaya-io/hakawati/blob/fbbc4ac4ace24df7fac1029f2b4c25ed1da17b26/src/styles/theme.scss line 28
• add italics and updated font size to 14px to stay consistent with .body-reg

[amosnjoroge]

@amosnjoroge FYI, copying you to review this PR to give you an example of the minor styling changes we can make to help get the components more consistent. You can see the changes I made:

• replace the grey with a standard grey variable we use across the app called light-body-grey which can be found in https://github.com/hikaya-io/hakawati/blob/fbbc4ac4ace24df7fac1029f2b4c25ed1da17b26/src/styles/theme.scss line 28
• add italics and updated font size to 14px to stay consistent with .body-reg

Thanks @andrewtpham noted.

[amosnjoroge]

@Kimaiyo077 and @andrewtpham for the wrapping text feature itself, I am checking the storybook preview but I can't seem to see the options with the long text. Could there be an issue with the display of the options.

[andrewtpham]

@amosnjoroge check out custom-select component: http://localhost:54836/?path=/story/select--custom-select

[amosnjoroge]

@amosnjoroge check out custom-select component: http://localhost:54836/?path=/story/select--custom-select

Ah thanks, I was looking into H-Select.

One small question; if we have multiple similar long text options which only have different ending text (which will be wrapped out of view) how will the user differentiate between these options?

[andrewtpham]

@amosnjoroge check out custom-select component: http://localhost:54836/?path=/story/select--custom-select

Ah thanks, I was looking into H-Select.

One small question; if we have multiple similar long text options which only have different ending text (which will be wrapped out of view) how will the user differentiate between these options?

Not sure, havent thought of that. Maybe we can do a tool tip on hover over the dropdown option but that might get a little messy in the UI. If we could determine when there is overflow, we display an el-tooltip on the dropdown option, that could make it less messy 🤔

What do you think @Kimaiyo077? We can handle this is a separate PR if needed. I want to get this merged ASAP so we can implement the dots FE PR which this is dependent on.