Scaling components instead of custom CSS

[iansinnott]

I'm using the <Toggle /> component and was trying to make it smaller. It seems there is no way to do this other than completely re-styling the element. The components look quite nice but may not be the right size for every UI, so adding a prop to make the element smaller or larger (without changing inline styles) would be great.

[nikgraf]

Hi @iansinnott

Thanks for your suggestion. We were considering pre-defined size-levels for Toggle early on, but dropped the idea due increased complexity. The main idea of Belle components is to allow a lot of styling freedom. By adding a size property people who want to style the Toggle differently might have a hard time doing so. Nevertheless I think we should have done a better job to explain how to style a Toggle. We added an example here: http://nikgraf.github.io/belle/#/component/toggle

<Toggle style={{
          borderRadius: 10,
          height: 20,
          width: 50
        }}
        sliderStyle={{
          // Calculated with 2 * the width of choice area
          width: 80
        }}
        sliderWrapperStyle={{
          borderRadius: 10
        }}
        handleStyle={{
          borderRadius: 10,
          // 1 px smaller than the width due the border effect
          height: 19,
          width: 20
        }}
        firstChoiceStyle={{
          height: 20,
          // Calculated with the width of the whole toggle - half of the width from the handle
          width: 40,
          lineHeight: 20 + 'px',
          textIndent: -5,
          fontSize: 12
        }}
        secondChoiceStyle={{
          height: 20,
          // Calculated with the width of the whole toggle - half of the width from the handle
          // style.width - (handleStyle.width / 2 )
          width: 40,
          lineHeight: 20 + 'px',
          textIndent: 5,
          fontSize: 10
        }}
        activeHandleStyle={{
          height: 20
        }} />

If you need help or have a specific size in mind. I'm happy to help. Shouldn't take a lot of time 😄

[iansinnott]

Thanks @nikgraf. Yeah I totally understand if you thought the additional complexity of adding a size prop wasn't worth it. I read through your docs as well, but what made me think of a this feature was that many of the styles are related to eachother to bring the final look together.

If all it were possible to pass something like <Toggle scale={0.5} /> and get a component that was half as wide and half as tall that would be very useful, and would probably help with adoption. I'm not sure how your styles are calculated now but if it were possible to just multiply all the relevant size styles by this.props.scale that might be a less complex solution.

Thanks for the cool lib

[nikgraf]

@iansinnott I gave this a bit more thought over the weekend. I totally see the need and tried to come up with a solution that would allow scaling without introducing more complexity. I think a UI configurator where you dynamically could change the styles would be great. In the end you could export the styles.

Would you be interested to pair on a simple iteration for the Toggle? Shouldn't take us more than a few hours.

[iansinnott]

Absolutely. Let's connect over email and figure out a time that works. I'm at ian@iansinnott.com