Skip to content

Conversation

adids1221
Copy link
Contributor

@adids1221 adids1221 commented Aug 21, 2024

Description

Button borderWidth grow outside the container fix for outline button.
In outline mode, the padding isn't negative anymore so the border doesn't fill the button container inside part.

Snippet to reproduce:

import React, {Component} from 'react';
import {View, Colors, Stepper, Button} from 'react-native-ui-lib';

export default class PlaygroundScreen extends Component {
  state = {outlineWidth: 1};
  render() {
    const {outlineWidth} = this.state;
    return (
      <View bg-grey80 flex padding-20 center gap-s3>
        <Button label="Button" outline onPress={() => {}} outlineWidth={outlineWidth}/>
        <Button label="Button" outline round onPress={() => {}} outlineWidth={outlineWidth}/>
        <Button label="Button" onPress={() => {}} outlineWidth={outlineWidth} outlineColor={Colors.red30}/>
        <Button label="Button" round onPress={() => {}} outlineWidth={outlineWidth} outlineColor={Colors.red30}/>

        <Stepper
          value={outlineWidth}
          minValue={0}
          maxValue={10}
          step={1}
          onValueChange={value => this.setState({outlineWidth: value})}
        />
      </View>
    );
  }
}

Changelog

Button borderWidth grow outside the container fix for outline button.

Additional info

MADS-4436

@adids1221 adids1221 requested review from M-i-k-e-l and ethanshar and removed request for ethanshar August 21, 2024 11:49
@M-i-k-e-l
Copy link
Collaborator

I don't think I understand the bug, lets talk about it.
BTW, sending outlineWidth={0} gives a border in your code (not in master)

@M-i-k-e-l M-i-k-e-l assigned adids1221 and unassigned M-i-k-e-l Aug 22, 2024
@adids1221
Copy link
Contributor Author

I don't think I understand the bug, lets talk about it. BTW, sending outlineWidth={0} gives a border in your code (not in master)

Iv'e merged master, so outlineWidth={0} should work.
Let's huddle about it.

};

if (outline) {
if (round) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It appears this does nothing, why not remove this completely?

@M-i-k-e-l M-i-k-e-l enabled auto-merge (squash) August 22, 2024 07:33
@M-i-k-e-l M-i-k-e-l merged commit 58e958a into master Aug 22, 2024
@M-i-k-e-l M-i-k-e-l deleted the fix/button_border_width_consistent_style branch August 22, 2024 07:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants