feat(panel): add cutout variant

Author: Artur Bien

example/src/ExamplesScreen.tsx

@@ -5,7 +5,6 @@ import {
   Panel,
   AppBar,
   Button,
-  Cutout,
   List,
   Text,
   ScrollView,
@@ -131,7 +130,7 @@ const ExamplesScreen = () => {
             </View>
             <Button
               square
-              variant='outside'
+              variant='raised'
               size='lg'
               style={styles.aboutButton}
               onPress={() => setShowAboutModal(true)}
@@ -156,11 +155,9 @@ const ExamplesScreen = () => {
               />
             ))}
           </ScrollPanel>
-          <Panel variant='outside' style={styles.panel}>
+          <Panel variant='raised' style={styles.panel}>
             <Divider />
-            <Cutout
-              style={[styles.cutout, { backgroundColor: currentTheme.canvas }]}
-            >
+            <Panel variant='cutout' background='canvas' style={styles.cutout}>
               <ScrollView
                 style={styles.scrollView}
                 scrollViewProps={{
@@ -189,7 +186,7 @@ const ExamplesScreen = () => {
                   ))}
                 </List.Accordion>
               </ScrollView>
-            </Cutout>
+            </Panel>
             <View style={[styles.statusBar]}>
               <Panel
                 variant='well'
@@ -251,14 +248,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginBottom: -4,
     zIndex: 10,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 1,
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 1.4,
-    elevation: 2,
   },
   logo: {
     flexDirection: 'row',

example/src/examples/ButtonExample.tsx

@@ -46,30 +46,30 @@ const ButtonExample = () => {
         <View style={styles.buttonWrapper}>
           <Button
             primary
-            variant='outside'
+            variant='raised'
             onPress={() => console.warn('Pressed')}
           >
             Primary
           </Button>
-          <Button variant='outside' onPress={() => console.warn('Pressed')}>
+          <Button variant='raised' onPress={() => console.warn('Pressed')}>
             Default
           </Button>
           <Button
             active
-            variant='outside'
+            variant='raised'
             onPress={() => console.warn('Pressed')}
           >
             Active
           </Button>
           <Button
-            variant='outside'
+            variant='raised'
             disabled
             onPress={() => console.warn('Pressed')}
           >
             Disabled
           </Button>
           <Button
-            variant='outside'
+            variant='raised'
             onPress={() => console.warn('Pressed')}
             square
           >

example/src/examples/CheckboxExample.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import { Checkbox, Fieldset, Cutout } from 'react95-native';
+import { Checkbox, Fieldset, Panel } from 'react95-native';
 
 import ExamplePanel from '../util/ExamplePanel';
 
@@ -39,7 +39,7 @@ const CheckboxExample = () => {
           disabled
         />
       </Fieldset>
-      <Cutout>
+      <Panel variant='cutout' background='canvas'>
         <View style={{ padding: 20 }}>
           <Fieldset variant='flat' label='Default'>
             <Checkbox
@@ -72,7 +72,7 @@ const CheckboxExample = () => {
             />
           </Fieldset>
         </View>
-      </Cutout>
+      </Panel>
     </ExamplePanel>
   );
 };

example/src/examples/CutoutExample.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { Fieldset, Text, Cutout } from 'react95-native';
+import { Fieldset, Text, Panel } from 'react95-native';
 
 import ExamplePanel from '../util/ExamplePanel';
 
@@ -17,7 +17,7 @@ const FieldsetExample = () => {
         <Text>No label here</Text>
       </Fieldset>
 
-      <Cutout>
+      <Panel variant='cutout' background='canvas'>
         <View style={{ padding: 20 }}>
           <Fieldset variant='flat' label='Name:'>
             <Text>Some text here</Text>
@@ -29,7 +29,7 @@ const FieldsetExample = () => {
             <Text>No label here</Text>
           </Fieldset>
         </View>
-      </Cutout>
+      </Panel>
     </ExamplePanel>
   );
 };

example/src/examples/FieldsetExample.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
 import { View } from 'react-native';
-import { List, Hourglass, Cutout, ScrollView } from 'react95-native';
+import { List, Hourglass, Panel, ScrollView } from 'react95-native';
 
 import ExamplePanel from '../util/ExamplePanel';
 
@@ -22,7 +22,11 @@ const HourglassExample = () => {
 
   return (
     <ExamplePanel style={{ padding: 8, paddingTop: 10 }}>
-      <Cutout style={[{ flex: 1, backgroundColor: 'white' }]}>
+      <Panel
+        variant='cutout'
+        background='canvas'
+        style={[{ flex: 1, backgroundColor: 'white' }]}
+      >
         <ScrollView>
           <View style={[{ paddingHorizontal: 16, marginTop: 16 }]}>
             <List.Accordion
@@ -62,7 +66,7 @@ const HourglassExample = () => {
             </List.Accordion>
           </View>
         </ScrollView>
-      </Cutout>
+      </Panel>
     </ExamplePanel>
   );
 };

example/src/examples/ListExample.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { StyleSheet } from 'react-native';
-import { NumberInput, Fieldset, Cutout } from 'react95-native';
+import { NumberInput, Fieldset, Panel } from 'react95-native';
 
 import ExamplePanel from '../util/ExamplePanel';
 
@@ -29,7 +29,7 @@ const NumberInputExample = () => {
         />
       </Fieldset>
 
-      <Cutout style={{ padding: 20 }}>
+      <Panel variant='cutout' background='canvas' style={{ padding: 20 }}>
         <Fieldset variant='flat' label='Flat' style={[styles.fieldset]}>
           <NumberInput
             variant='flat'
@@ -47,7 +47,7 @@ const NumberInputExample = () => {
             inputWidth={80}
           />
         </Fieldset>
-      </Cutout>
+      </Panel>
     </ExamplePanel>
   );
 };

example/src/examples/NumberInputExample.tsx

@@ -7,17 +7,21 @@ import Container from '../util/Container';
 const PanelExample = () => {
   return (
     <Container>
-      <Panel variant='outside' style={[styles.panel, { padding }]}>
+      <Panel variant='raised' style={[styles.panel, { padding }]}>
         <Text>
           Notice the subtle difference in borders. The lightest border is not on
           the edge of this panel.
         </Text>
         <Panel variant='default' style={{ padding, margin }}>
           <Text>
             This panel on the other hand has the lightest border on the edge.
-            Use this panel inside &apos;outside&apos; panels.
+            Use this panel inside &apos;raised&apos; panels.
           </Text>
-          <Panel variant='well' style={{ padding, marginTop: margin }}>
+          <Panel
+            variant='cutout'
+            background='canvas'
+            style={{ padding, marginTop: margin, height: 100 }}
+          >
             <Text>Put some content here</Text>
           </Panel>
         </Panel>
@@ -29,6 +33,8 @@ const PanelExample = () => {
   );
 };
 
+// TODO: fox paddings
+
 const defaultSpacing = 12;
 const margin = defaultSpacing;
 const padding = defaultSpacing;

example/src/examples/PanelExample.tsx

@@ -23,7 +23,7 @@ const DividerExample = () => {
   return (
     <ExamplePanel>
       <Fieldset label='Default' style={[{ padding: 20 }]}>
-        <Progress percent={percent} />
+        <Progress percent={percent} background='canvas' />
       </Fieldset>
       <Fieldset label='Tile' style={[{ padding: 20 }]}>
         <Progress variant='tile' percent={percent} />

example/src/examples/ProgressExample.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import { Radio, Fieldset, Cutout } from 'react95-native';
+import { Radio, Fieldset, Panel } from 'react95-native';
 
 import ExamplePanel from '../util/ExamplePanel';
 
@@ -37,7 +37,7 @@ const RadioExample = () => {
           disabled
         />
       </Fieldset>
-      <Cutout>
+      <Panel variant='cutout' background='canvas'>
         <View style={{ padding: 16 }}>
           <Fieldset variant='flat' label='Default'>
             <Radio
@@ -70,7 +70,7 @@ const RadioExample = () => {
             />
           </Fieldset>
         </View>
-      </Cutout>
+      </Panel>
     </ExamplePanel>
   );
 };