feat(label): add label component

example/src/examples/LabelExample.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Label } from 'react95-native';
+
+import Container from '../util/Container';
+
+const PanelExample = () => {
+  return (
+    <Container>
+      <Label elevation={0}>No elevation</Label>
+      <Label elevation={6} style={{ marginTop: 16 }} onPress={() => {}}>
+        High elevation
+      </Label>
+    </Container>
+  );
+};
+
+export default PanelExample;

example/src/examples/index.tsx

@@ -8,6 +8,7 @@ import DividerExample from './DividerExample';
 import FABExample from './FABExample';
 import FieldsetExample from './FieldsetExample';
 import HourglassExample from './HourglassExample';
+import LabelExample from './LabelExample';
 import ListExample from './ListExample';
 import MenuExample from './MenuExample';
 import NumberInputExample from './NumberInputExample';
@@ -120,6 +121,11 @@ export default [
         component: HourglassExample,
         title: 'Hourglass',
       },
+      {
+        name: 'LabelExample',
+        component: LabelExample,
+        title: 'Label',
+      },
       {
         name: 'ProgressExample',
         component: ProgressExample,

src/components/Label/Label.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  Animated,
+  View,
+  ViewStyle,
+  TouchableWithoutFeedback,
+} from 'react-native';
+
+import { withTheme } from '../../core/theming';
+import shadow from '../../styles/shadow';
+import type { Theme } from '../../types';
+
+import { Text } from '../..';
+
+type Props = React.ComponentPropsWithRef<typeof View> & {
+  accessible?: boolean;
+  children?: React.ReactNode;
+  elevation?: number;
+  onLongPress?: () => void;
+  onPress?: () => void;
+  radius?: number;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+};
+
+const Label = ({
+  accessible,
+  children,
+  elevation = 0,
+  onLongPress,
+  onPress,
+  radius = 4,
+  style = {},
+  theme,
+  ...rest
+}: Props) => {
+  return (
+    // TODO: fix this TS error
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <Animated.View
+      {...rest}
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.tooltip,
+          borderRadius: radius,
+        },
+        shadow(elevation),
+        style,
+      ]}
+    >
+      <TouchableWithoutFeedback
+        delayPressIn={0}
+        disabled={!(onPress || onLongPress)}
+        onLongPress={onLongPress}
+        onPress={onPress}
+        accessible={accessible}
+      >
+        <Text>{children}</Text>
+      </TouchableWithoutFeedback>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    borderWidth: 2,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+});
+
+export default withTheme(Label);

src/components/Label/index.ts

@@ -0,0 +1 @@
+export { default } from './Label';

src/components/Slider/Slider.tsx

@@ -18,7 +18,7 @@ import { buildBorderStyles } from '../../styles/styles';
 import { Border } from '../../styles/styleElements';
 import { clamp, roundValueToStep, findClosest } from '../../utils';
 
-import { Panel, Text } from '../..';
+import { Panel, Text, Label } from '../..';
 
 function percentToValue(percent: number, min: number, max: number) {
   return (max - min) * percent + min;
@@ -181,17 +181,9 @@ const Slider = ({
               )}
               {isUsed && (
                 <View style={styles.tooltipWrapper}>
-                  <View
-                    style={[
-                      styles.tooltip,
-                      {
-                        borderColor: theme.borderDarkest,
-                        backgroundColor: theme.tooltip,
-                      },
-                    ]}
-                  >
-                    <Text style={styles.tooltipText}>{value}</Text>
-                  </View>
+                  <Label elevation={4} style={styles.tooltip}>
+                    {value}
+                  </Label>
                 </View>
               )}
             </Panel>
@@ -249,7 +241,6 @@ const thumbWidth = 18;
 const thumbHeight = 32;
 const tickSize = 6;
 
-const tooltipHeight = 30;
 const styles = StyleSheet.create({
   wrapper: {
     paddingVertical: 4,
@@ -279,21 +270,14 @@ const styles = StyleSheet.create({
   },
   tooltipWrapper: {
     position: 'absolute',
-    top: -(tooltipHeight + 18),
+    top: -44,
     left: thumbWidth / 2,
     alignItems: 'center',
   },
   tooltip: {
     position: 'absolute',
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: 4,
-    borderWidth: 2,
-    padding: 8,
-    backgroundColor: 'red',
-  },
-  tooltipText: {
-    fontSize: 16,
   },
   marksWrapper: {
     position: 'relative',

src/components/Snackbar/Snackbar.tsx

@@ -58,7 +58,7 @@ const DURATION_MEDIUM = 7000;
 const DURATION_LONG = 10000;
 
 const shadowOffset = 8;
-const radius = 5;
+const radius = 4;
 
 const Snackbar = ({
   visible,

src/index.ts

@@ -9,6 +9,7 @@ export { default as Divider } from './components/Divider';
 export { default as FAB } from './components/FAB';
 export { default as Fieldset } from './components/Fieldset';
 export { default as Hourglass } from './components/Hourglass';
+export { default as Label } from './components/Label';
 export { default as List } from './components/List';
 export { default as Menu } from './components/Menu';
 export { default as NumberInput } from './components/NumberInput';