feat: Improve styling in the addons panel

MIGRATION.md

@@ -1,6 +1,8 @@
 # Migration
 
 - [Migration](#migration)
+  - [From version 5.3.x to 6.5.x](#from-version-53x-to-65x) 
+    - [Theming](#theming)
   - [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
     - [To main.js configuration](#to-mainjs-configuration)
     - [Create React App preset](#create-react-app-preset)
@@ -76,6 +78,36 @@
     - [Packages renaming](#packages-renaming)
     - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 5.3.x to 6.5.x
+
+### Theming
+
+The theme structure in Storybook 6.5 provides much more granular control over
+more of the Storybook UI, including addons, this unfortunately makes it
+difficult to provide backwards compatibility. If you were previously using a
+custom theme you will now need to migrate it to the new theme.
+
+The themeable values are comprehensively listed in the `Theme` type in
+[theme.ts](https://github.com/storybookjs/react-native/blob/next-6.0/app/react-native/src/preview/components/Shared/theme.ts).
+
+Below the old theme keys are listed against a comparable key in the new theme,
+although bear in mind that there are many more aspects of the UI that can be
+themed now, this is just to help get you started:
+
+- `backgroundColor`: `backgroundColor`
+- `storyListBackgroundColor`: `panel.backgroundColor`
+- `listItemTextColor`: `storyList.storyTextColor`
+- `listItemActiveColor`: `storyList.storySelectedBackgroundColor`
+- `listItemActiveTextColor`: `storyList.storySelectedTextColor`
+- `headerTextColor`: `storyList.headerTextColor`
+- `labelColor`: `inputs.labelTextColor`
+- `borderColor`: `panel.borderColor`, `navigation.borderColor`, `inputs.text.borderColor`, `inputs.radio.borderColor`, `inputs.swatch.borderColor`
+- `previewBorderColor`: The preview no longer has a border and uses an elevation shadow instead
+- `buttonTextColor`: `tabs.inactiveTextColor`, `button.primary.textColor`, `button.secondary.textColor`
+- `buttonActiveTextColor`: `tabs.activeTextColor`
+- `secondaryLabelColor`: `inputs.slider.valueTextColor`
+
+
 ## From version 5.2.x to 5.3.x
 
 ### To main.js configuration

addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx

@@ -1,9 +1,7 @@
 import React, { useState } from 'react';
-import { Button, View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 
 const theme = {
-  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
-  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
   OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
   OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
   OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
@@ -14,10 +12,7 @@ const theme = {
   OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
   OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
 
-  ARROW_COLOR: '#6e6e6e',
-  ARROW_MARGIN_RIGHT: 3,
-  ARROW_FONT_SIZE: 12,
-  ARROW_ANIMATION_DURATION: '0',
+  ARROW_COLOR: '#859499',
 };
 
 interface InspectProps {
@@ -27,20 +22,20 @@ interface InspectProps {
 
 const Inspect = ({ name, value }: InspectProps) => {
   const [expanded, setExpanded] = useState(false);
+  const canExpand =
+    name &&
+    ((Array.isArray(value) && value.length) ||
+      (value && typeof value === 'object' && Object.keys(value).length));
+  const toggleExpanded = React.useCallback(() => {
+    if (canExpand) {
+      setExpanded((currentValue) => !currentValue);
+    }
+  }, [canExpand]);
+
   const toggle = (
-    <View style={styles.container}>
-      {name &&
-      ((Array.isArray(value) && value.length) ||
-        (value &&
-          typeof value === 'object' &&
-          !Array.isArray(value) &&
-          Object.keys(value).length)) ? (
-        <Button
-          onPress={() => setExpanded((wasExpanded) => !wasExpanded)}
-          title={!expanded ? '▶' : '▼'}
-        />
-      ) : null}
-    </View>
+    <Text style={{ color: canExpand ? theme.ARROW_COLOR : 'transparent', paddingRight: 8 }}>
+      {expanded ? '▼' : '▶'}
+    </Text>
   );
 
   const nameComponent = name ? (
@@ -51,11 +46,11 @@ const Inspect = ({ name, value }: InspectProps) => {
     if (name) {
       return (
         <>
-          <View style={styles.row}>
+          <TouchableOpacity onPress={toggleExpanded} style={styles.row}>
             {toggle}
             {nameComponent}
             <Text>{`: ${value.length === 0 ? '[]' : expanded ? '[' : '[...]'}`}</Text>
-          </View>
+          </TouchableOpacity>
           {expanded ? (
             <View style={styles.expanded}>
               {value.map((v, i) => (
@@ -72,26 +67,26 @@ const Inspect = ({ name, value }: InspectProps) => {
       );
     }
     return (
-      <View>
+      <>
         <Text>[</Text>
         {value.map((v, i) => (
           <View key={i} style={styles.spacingLeft}>
             <Inspect value={v} />
           </View>
         ))}
         <Text>]</Text>
-      </View>
+      </>
     );
   }
   if (value && typeof value === 'object' && !(value instanceof RegExp)) {
     if (name) {
       return (
         <>
-          <View style={styles.row}>
+          <TouchableOpacity style={styles.row} onPress={toggleExpanded}>
             {toggle}
             {nameComponent}
             <Text>{`: ${Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}'}`}</Text>
-          </View>
+          </TouchableOpacity>
           {expanded ? (
             <View style={styles.expanded}>
               {Object.entries(value).map(([key, v]) => (
@@ -108,15 +103,15 @@ const Inspect = ({ name, value }: InspectProps) => {
       );
     }
     return (
-      <View>
+      <>
         <Text>{'{'}</Text>
         {Object.entries(value).map(([key, v]) => (
           <View key={key}>
             <Inspect name={key} value={v} />
           </View>
         ))}
         <Text>{'}'}</Text>
-      </View>
+      </>
     );
   }
   if (name) {
@@ -129,11 +124,7 @@ const Inspect = ({ name, value }: InspectProps) => {
       </View>
     );
   }
-  return (
-    <View>
-      <Value value={value} />
-    </View>
-  );
+  return <Value value={value} />;
 };
 
 function Value({ value }: { value: any }) {
@@ -174,7 +165,6 @@ export default Inspect;
 
 const styles = StyleSheet.create({
   spacingLeft: { marginLeft: 20 },
-  expanded: { marginLeft: 40 },
-  row: { flexDirection: 'row', alignItems: 'center' },
-  container: { width: 40, height: 40 },
+  expanded: { marginLeft: 20 },
+  row: { paddingBottom: 8, flexDirection: 'row', alignItems: 'center' },
 });

addons/ondevice-backgrounds/src/Swatch.tsx

@@ -1,21 +1,53 @@
+// @ts-ignore
+import styled from '@emotion/native';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 interface SwatchProps {
   name: string;
   value: string;
   setBackground: (background: string) => void;
 }
 
+const PressableSwatch = styled.TouchableOpacity(({ theme }: any) => ({
+  marginBottom: theme.tokens.spacing3,
+  borderWidth: theme.inputs.swatch.borderWidth,
+  borderColor: theme.inputs.swatch.borderColor,
+  borderRadius: theme.inputs.swatch.outerBorderRadius,
+  backgroundColor: theme.inputs.swatch.backgroundColor,
+  paddingVertical: theme.inputs.swatch.paddingVertical,
+  paddingHorizontal: theme.inputs.swatch.paddingHorizontal,
+}));
+
+const ColorSwatch = styled.View(({ theme, color }: any) => ({
+  flex: 1,
+  height: theme.inputs.swatch.height,
+  borderRadius: theme.inputs.swatch.innerBorderRadius,
+  backgroundColor: color,
+}));
+
+const ValueContainer = styled.View(({ theme }: any) => ({
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  padding: theme.tokens.spacing1,
+  paddingBottom: 0,
+}));
+const NameText = styled.Text(({ theme }: any) => ({
+  fontSize: theme.inputs.swatch.fontSize,
+  fontWeight: theme.inputs.swatch.nameTextWeight,
+}));
+const ValueText = styled.Text(({ theme }: any) => ({
+  fontSize: theme.inputs.swatch.fontSize,
+}));
+
 const Swatch = ({ name, value, setBackground }: SwatchProps) => (
-  <TouchableOpacity style={styles.container} onPress={() => setBackground(value)}>
-    <View style={[styles.color, { backgroundColor: value }]} />
-    <View style={styles.valueContainer}>
-      <Text>{name}:</Text>
-      <Text>{value}</Text>
-    </View>
-  </TouchableOpacity>
+  <PressableSwatch onPress={() => setBackground(value)}>
+    <ColorSwatch color={value} />
+    <ValueContainer>
+      <NameText>{name}</NameText>
+      <ValueText>{value}</ValueText>
+    </ValueContainer>
+  </PressableSwatch>
 );
 
 Swatch.propTypes = {
@@ -25,20 +57,3 @@ Swatch.propTypes = {
 };
 
 export default Swatch;
-
-const styles = StyleSheet.create({
-  valueContainer: {
-    padding: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  color: { flex: 1, height: 40 },
-  container: {
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: 'rgba(0,0,0,0.2)',
-    marginTop: 10,
-    marginBottom: 20,
-    marginHorizontal: 10,
-  },
-});

addons/ondevice-controls/src/ControlsPanel.tsx

@@ -7,18 +7,21 @@ import { useArgs } from './hooks';
 import NoControlsWarning from './NoControlsWarning';
 import PropForm from './PropForm';
 
-const Touchable = styled.TouchableOpacity(({ theme }) => ({
-  borderRadius: 2,
-  borderWidth: 1,
-  borderColor: theme.borderColor || '#e6e6e6',
-  padding: 4,
-  margin: 10,
+const ButtonTouchable = styled.TouchableOpacity(({ theme }) => ({
+  backgroundColor: theme.button.secondary.backgroundColor,
+  borderRadius: theme.button.secondary.borderRadius,
+  borderWidth: theme.button.secondary.borderWidth,
+  borderColor: theme.button.secondary.borderColor,
+  paddingVertical: theme.button.paddingVertical,
+  paddingHorizontal: theme.button.paddingHorizontal,
   justifyContent: 'center',
   alignItems: 'center',
 }));
 
-const ResetButton = styled.Text(({ theme }) => ({
-  color: theme.buttonTextColor || '#999999',
+const ButtonText = styled.Text(({ theme }) => ({
+  color: theme.button.secondary.textColor,
+  fontSize: theme.button.fontSize,
+  fontWeight: theme.button.fontWeight,
 }));
 
 export declare type SortType = 'alpha' | 'requiredFirst' | 'none';
@@ -86,9 +89,9 @@ const ControlsPanel = ({ api }: { api: API }) => {
   return (
     <>
       <PropForm args={argsObject} isPristine={isPristine} onFieldChange={updateArgsOnFieldChange} />
-      <Touchable onPress={handleReset}>
-        <ResetButton>RESET</ResetButton>
-      </Touchable>
+      <ButtonTouchable onPress={handleReset}>
+        <ButtonText>RESET</ButtonText>
+      </ButtonTouchable>
     </>
   );
 };