React-native-ui-kitten: All Buttons inside ButtonGroup have same status

[28harishkumar]

Issue type

I'm submitting a ... (check one with "x")

• [ ] bug report
• [x] feature request

Issue description

Current behavior:
Button elements in ButtonGroup have same status

Expected behavior:
Each Button should have its own status

Steps to reproduce:

<ButtonGroup>
     <Button status='success'>
         A
     </Button>
     <Button>
        B
     </Button>
     <Button>
        C
     </Button>
</ButtonGroup>

Related code:

insert short code snippets here

Other information:

OS, device, package version

package: 4.3.0

[artyorsh]

Hi @28harishkumar 👋
You can achieve this by passing appearance or status property to ButtonGroup

import React from 'react';
import { ButtonGroup, Button } from 'react-native-ui-kitten';

const SameStatusButtonGroup = () => (
  <ButtonGroup status='success'>
    <Button>A</Button>
    <Button>B</Button>
    <Button>C</Button>
  </ButtonGroup>
);

const SameAppearanceButtonGroup = () => (
  <ButtonGroup appearance='outline'>
    <Button>A</Button>
    <Button>B</Button>
    <Button>C</Button>
  </ButtonGroup>
);

[28harishkumar]

Hi @artyorsh

I typed appearance instead of status.
My point is different status inside ButtonGroup

<ButtonGroup>
     <Button status='success'>
         A
     </Button>
     <Button>
        B
     </Button>
     <Button status='danger'>
        C
     </Button>
</ButtonGroup>

[artyorsh]

@28harishkumar can you share a bit more information about the use-case? Such changes need discussion with our design team

[28harishkumar]

Currently I am not able to give inline Action Buttons with different colors.
Simple use case is providing Save, Save & Add Another and Delete options for some entry. Save with primary status, Save & Add Another with info status and Delete with danger status.

Another use case is providing OK and Cancel buttons.

Although all use cases can be covered by replacing ButtonGroup with View and writing extra style. But it will be better if ButtonGroup does not restrict individual Button property.

Additionally I found one more issue. ButtonGroup is accepting white status and it is passing it to Button. Button does not accept white status. It accepts basic status that is not accepted by
ButtonGroup.
It raises following warning:

Button: unsupported configuration.
Check one of the following prop values {
  "appearance": "filled",
  "variants": [
    "white",
    "medium"
  ],
  "states": []
}
📖 Documentation: https://akveo.github.io/react-native-ui-kitten/docs/components/button/api

[artyorsh]

@28harishkumar we don't think ButtonGroup should be used for this case. Instead, just use multiple Buttons without wrapping into ButtonGroup. See our vision of it.

I found one more issue

Thanks for reporting 👍 We've already got fix for this. Will be available in next release

[pjnovas]

@artyorsh hey, I came up with a similar case; what I'm trying to do is like the old pagination from bootstrap

Snack has that feature for selecting the platform too:

My first attemp was to set up a ButtonGroup and changing one to the children Button's state as a "Selected one". Is there a way of accomplish that on the current version of the library?

Thanks!

[artyorsh]

@pjnovas Actually, ButtonGroup is not about selection mode. For this case, you may see a gist I use in my project

[garrett-gottlieb]

@artyorsh this would be a great element to include in a future release.

[Luard]

You can also achieve this by changing the button style instead of the status, for example:

<ButtonGroup status="basic" appearance="outline" >
    <Button 
        textStyle={ selected ? { color: "white" } : null }
        style={ selected ? styles.buttonSelected : null }>
            L
    </Button>
    <Button>M</Button>
    <Button>R</Button>
</ButtonGroup>

Also, I realised that using status="basic" on the ButtonGroup on Dark Mode is showing a highlighten white instead on a gray. Is that correct?

Example, using Dark Mode, the border of the basic status is has strong as the control status:

<ButtonGroup status="basic" appearance="outline" >
    <Button>L</Button>
    <Button>M</Button>
    <Button>R</Button>
</ButtonGroup>