feat(button): adding active prop to Button

[gopalgoel19]

Button( active prop )

This PR will introduce possibility to specify active buttons. Most of the code logic have been picked up from #14.

TODO

• Conformance test
• Minimal doc site example
• Stardust base theme
• Teams Light theme
• Teams Dark theme
• Teams Contrast theme
• Confirm RTL usage
• W3 accessibility check
• Stardust accessibility check
• Update glossary props table
• Update the CHANGELOG.md

API Proposal

active

active property will make buttons in active state by manipulating backgroundColor

<Button active content="click" />

<button class="ui-button" active="">
  <span>Click me</span>
</button>

[jurokapsiar]

in the PR description you mention disabled property, but I do not see any change related to that property in the files.

[gopalgoel19]

@jurokapsiar It was a typo. I meant to say active property.

[kuzhelov]

it seems to be a more complex story around this. Button could be of primary or secondary type - and for these types its visual look should differ. Currently it seems that only the case of default button is handled.

[gopalgoel19]

Ah, I didn't think of that. Let me work on it.

[gopalgoel19]

@kuzhelov I made some changes. Please check.

[notandrew]

should this have the px-to-rem helper?

[gopalgoel19]

I am not sure what that does. What do you suggest?

[kuzhelov]

@gopalgoel19, essentially it is about using pxToRem() helper function. You should think about whether this function should be used in your case or not - the rule is the following: if you would like your size to adapt font size changes (for example, if browser uses large font size for rendering page content you would like your sizes being proportionally larger as well), you should rem units instead of pixels. Seems that in your case rem units are more appropriate, as button's border should be thicker in case if font size is increased.

Please, use the following code snippet as an example (imageVariables.ts):

export default () => ({
  ....
  avatarRadius: pxToRem(9999),
  avatarSize: pxToRem(32),
})

[kuzhelov]

oops, merge conflict is not resolved

[kuzhelov]

could be done a bit succinctly:

borderWidth: `${secondary ? pxToRem(circular ? 1 : 2) : 0}`,

[gopalgoel19]

That is a nice suggestion.

[kuzhelov]

the same here - more succinct expression could be used, to avoid duplication

[kuzhelov]

nit: also, it would be a bit easier to read if there would be no negation in the condition:

 borderWidth: `${active ? 0 : pxToRem(circular ? 1 : 2) }`,