Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

button border width grow outside the container #3221

Merged
merged 4 commits into from
Aug 22, 2024

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 ethanshar and M-i-k-e-l and removed request for ethanshar August 21, 2024 11:49
@M-i-k-e-l
Copy link
Contributor

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.

@@ -190,14 +183,9 @@ class Button extends PureComponent<Props, ButtonState> {
minWidth: MIN_WIDTH.LARGE
};

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

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
1 check passed
@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