feat(button): add 'flat' variant

react95-io · Dec 13, 2020 · c6a2fb3 · c6a2fb3
1 parent d288522
commit c6a2fb3
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 10 deletions.
diff --git a/example/src/examples/ButtonExample.tsx b/example/src/examples/ButtonExample.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import React from 'react';
-import { Button, Panel } from 'react95-native';
+import { Button, Panel, Card } from 'react95-native';
 
 import Container from '../util/Container';
 
@@ -112,9 +112,28 @@ const ButtonExample = () => {
       </Container.Section>
 
       <Container.Section title='Flat'>
-        <Button variant='flat' onPress={() => console.warn('Pressed')}>
-          This flat variant needs to be improved
-        </Button>
+        <Card>
+          <Card.Content style={{display: 'flex',
+    flexDirection: 'row',justifyContent:'space-between', padding: 40}}>
+            <Button
+              primary
+              variant='flat'
+              onPress={() => console.warn('Pressed')}
+            >
+              Primary
+            </Button>
+            <Button variant='flat' onPress={() => console.warn('Pressed')}>
+              Default
+            </Button>
+            <Button
+              variant='flat'
+              disabled
+              onPress={() => console.warn('Pressed')}
+            >
+              Disabled
+            </Button>
+          </Card.Content>
+        </Card>
       </Container.Section>
 
       <Container.Section title='Square'>

diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -3,13 +3,14 @@ import {
   StyleSheet,
   // TODO: use Pressable instead of TouchableHighlight?
   TouchableHighlight,
-  Text,
   View,
   ImageBackground,
   StyleProp,
   ViewStyle,
 } from 'react-native';
 
+import { Text } from '..';
+
 import { ThemeContext } from '../common/theming/Theme';
 import { blockSizes } from '../common/styles';
 
@@ -52,6 +53,8 @@ const Button = ({
     return square ? blockSizes[size] : 'auto';
   };
 
+  const isFlat = variant === 'flat';
+
   return (
     <View
       style={[
@@ -66,6 +69,13 @@ const Button = ({
         variant={variant}
         primary={primary}
         active={active}
+        style={{
+          backgroundColor: isFlat
+            ? disabled
+              ? theme.flatLight
+              : 'transparent'
+            : theme.material,
+        }}
       />
 
       <TouchableHighlight
@@ -82,9 +92,11 @@ const Button = ({
         accessibilityRole='button'
         accessibilityLabel={accessibilityLabel}
       >
-        <Text style={[disabled ? theme.text.disabled : theme.text.default]}>
-          {children}
-        </Text>
+        <View pointerEvents='none'>
+          <Text disabled={!isFlat && disabled} secondary={isFlat && disabled}>
+            {children}
+          </Text>
+        </View>
       </TouchableHighlight>
     </View>
   );
@@ -112,6 +124,7 @@ type BorderProps = {
   variant?: 'menu' | 'flat' | 'default' | 'outside';
   primary?: boolean;
   active?: boolean;
+  style?: StyleProp<ViewStyle>;
 };
 
 // TODO: pass theme as an argument instead of using context ?
@@ -120,6 +133,7 @@ const Borders = ({
   variant = 'default',
   primary = false,
   active = false,
+  style = {},
 }: BorderProps) => {
   const theme = useContext(ThemeContext);
 
@@ -140,15 +154,20 @@ const Borders = ({
     focus = isPressed ? [theme.border.focusOutline] : [];
   } else if (variant === 'menu' && (active || isPressed)) {
     wrapper = [theme.border.well];
+  } else if (variant === 'flat') {
+    wrapper = primary ? [theme.border.outline] : [];
+    outer = [theme.border.flat];
+    inner = [];
+    focus = isPressed ? [theme.border.focusOutline] : [];
   }
 
   return (
     <View
       style={[
         borderStyles.position,
-        { backgroundColor: theme.material },
         active || isPressed ? borderStyles.invert : {},
         ...wrapper,
+        style,
       ]}
     >
       {outer && (
@@ -157,7 +176,11 @@ const Borders = ({
             <View style={[borderStyles.position, ...inner]}>
               {focus && !active && (
                 <View
-                  style={[borderStyles.position, { margin: primary ? 0 : 2 }, ...focus]}
+                  style={[
+                    borderStyles.position,
+                    { margin: primary ? 0 : 2 },
+                    ...focus,
+                  ]}
                 />
               )}
               {active && (

diff --git a/src/common/styles.ts b/src/common/styles.ts
@@ -69,6 +69,10 @@ export const border = (theme: Theme) =>
       borderRightColor: theme.borderDark,
       borderBottomColor: theme.borderDark,
     },
+    flat: {
+      ...commonBorderStyle,
+      borderColor: theme.flatDark
+    }
   });
 
 export const text = (theme: Theme) =>