React-native-ui-kitten: ButtonGroup appearance missing option 'ghost'

[arafatzahan]

As the title says, ButtonGroup prop appearance only allows filled and outline, but not ghost. This should be fixed as there's no reason to not allow ghost appearance in buttongroup.

[artyorsh]

@arafatzahan

no reason to not allow

This would be the same as using multiple Buttons without wrapping it into a Group. Any reason to allow it?

[arafatzahan]

@artyorsh It feels inconsistent, as filled and outline options work, but not ghost. I wanted to create a rating buttongroup like this.

<ButtonGroup  
    style={styles.reviewButtons}
    appearance="ghost"
    status="warning"
>
    {steps.map((v, i) => (
        <Button
            key={i}
            icon={
                ratingReview > i ? StarIconFill : StarIcon
            }
            onPress={() => setRatingReview(v)}
        />
    ))}
</ButtonGroup>

ended up doing what you suggested:

<View style={styles.reviewButtons}>
    {steps.map((v, i) => (
        <Button
            key={i}
            appearance="ghost"
            status="warning"
            icon={
                ratingReview > i ? StarIconFill : StarIcon
            }
            onPress={() => setRatingReview(v)}
        />
    ))}
</View>

I reported the issue because I thought it's kind of inconsistent how filled and outlined works but ghost doesn't. It's up to you.

Thanks.

[ptboyer]

I'm in the same boat here.

It would be best to not discriminate the "ghost" appearance option for a ButtonGroup as it is ultimately passed into its child Button elements.

@artyorsh

Any reason to allow it?

I still want to maintain the rounded corners for the pressed highlight when you have many ghost buttons in a group.

[ptboyer]

Quick fix: You can eliminate the warning message by patching in a functional appearance mapping for ButtonGroup via ApplicationProvider, hence making the "ghost" appearance a valid option.

import * as eva from "@eva-design/eva";

...

const { outline } = eva.mapping.components.ButtonGroup.appearances;
const ghostStatusKeys = Object.keys(outline);
const ghostStatusGeneric = {
  borderColor: "transparent",
  dividerBackgroundColor: "transparent",
};

eva.mapping.components.ButtonGroup.appearances.ghost = {
  mapping: {},
  variantGroups: {
    status: ghostStatusKeys.reduce(
      (acc, key) => Object.assign(acc, { [key]: ghostStatusGeneric }),
      {}
    ),
  },
};

...

<ApplicationProvider {...eva} theme={eva.light}>