feat(buttonGroup): add ghost appearance for buttonGroup component (#1382

)

src/components/ui/buttonGroup/buttonGroup.component.tsx

@@ -29,7 +29,7 @@ import {
 } from '../button/button.component';
 
 type ButtonGroupStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: LiteralUnion<'filled' | 'outline'>;
+  appearance?: LiteralUnion<'filled' | 'outline' | 'ghost'>;
 }>;
 
 export interface ButtonGroupProps extends ViewProps, ButtonGroupStyledProps {
@@ -50,7 +50,7 @@ export type ButtonGroupElement = React.ReactElement<ButtonGroupProps>;
  * Buttons to be rendered within the group.
  *
  * @property {string} appearance - Appearance of the component.
- * Can be `filled` or `outline`.
+ * Can be `filled`, `outline` or `ghost`.
  * Defaults to *filled*.
  *
  * @property {string} status - Status of the component.

src/components/ui/buttonGroup/buttonGroup.spec.tsx

@@ -52,6 +52,19 @@ describe('@button-group: component checks', () => {
     expect(buttonAppearance).toEqual('outline');
   });
 
+  it('should render ghost buttons', () => {
+    const component = render(
+      <TestButtonGroup appearance='ghost'/>,
+    );
+
+    const buttons = component.getAllByType(Button);
+    const buttonAppearance: string = buttons.reduce((current: string, child: ReactTestInstance): string => {
+      return child.props.appearance;
+    }, 'ghost');
+
+    expect(buttonAppearance).toEqual('ghost');
+  });
+
   it('should render giant buttons', () => {
     const component = render(
       <TestButtonGroup size='giant'/>,

src/showcases/components/buttonGroup/buttonGroupAppearance.component.tsx

@@ -17,6 +17,12 @@ export const ButtonGroupAppearanceShowcase = () => (
       <Button>R</Button>
     </ButtonGroup>
 
+    <ButtonGroup style={styles.buttonGroup} appearance='ghost'>
+      <Button>L</Button>
+      <Button>M</Button>
+      <Button>R</Button>
+    </ButtonGroup>
+
   </Layout>
 );
 

src/showcases/components/buttonGroup/buttonGroupGhost.component.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Button, ButtonGroup, Layout } from '@ui-kitten/components';
+
+export const ButtonGroupGhostShowcase = () => (
+  <Layout style={styles.container} level='1'>
+    <ButtonGroup style={styles.buttonGroup} appearance='ghost' status='primary'>
+      <Button>L</Button>
+      <Button>R</Button>
+    </ButtonGroup>
+
+    <ButtonGroup style={styles.buttonGroup} appearance='ghost' status='success'>
+      <Button>L</Button>
+      <Button>R</Button>
+    </ButtonGroup>
+
+    <ButtonGroup style={styles.buttonGroup} appearance='ghost' status='info'>
+      <Button>L</Button>
+      <Button>R</Button>
+    </ButtonGroup>
+
+    <ButtonGroup style={styles.buttonGroup} appearance='ghost' status='warning'>
+      <Button>L</Button>
+      <Button>R</Button>
+    </ButtonGroup>
+
+    <ButtonGroup style={styles.buttonGroup} appearance='ghost' status='danger'>
+      <Button>L</Button>
+      <Button>R</Button>
+    </ButtonGroup>
+
+    <ButtonGroup style={styles.buttonGroup} appearance='ghost' status='basic'>
+      <Button>L</Button>
+      <Button>R</Button>
+    </ButtonGroup>
+
+    <View style={styles.controlContainer}>
+      <ButtonGroup style={styles.buttonGroup} appearance='ghost' status='control'>
+        <Button>L</Button>
+        <Button>R</Button>
+      </ButtonGroup>
+    </View>
+  </Layout>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  buttonGroup: {
+    margin: 2,
+  },
+  controlContainer: {
+    borderRadius: 4,
+    margin: 2,
+    padding: 6,
+    justifyContent: 'center',
+    backgroundColor: '#3366FF',
+  },
+});