feat: missing titleStyle and descriptionStyle for List.Accordion and …

…List.Section (callstack#997) This PR introduces missing style props: List.Accordion: - `titleStyle` - `descriptionStyle` List.Section - `titleStyle` Also improves `style` prop type and description in these components. Fixes callstack#973
pdcprod · Jun 27, 2019 · 4974b8c · 4974b8c
1 parent b5b8ed1
commit 4974b8c
Show file tree

Hide file tree

Showing 7 changed files with 575 additions and 5 deletions.
diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
@@ -1,6 +1,12 @@
 import color from 'color';
 import * as React from 'react';
-import { View, ViewStyle, StyleSheet, StyleProp } from 'react-native';
+import {
+ View,
+ ViewStyle,
+ StyleSheet,
+ StyleProp,
+ TextStyle,
+} from 'react-native';
 import TouchableRipple from '../TouchableRipple';
 import Icon from '../Icon';
 import Text from '../Typography/Text';
@@ -38,7 +44,18 @@ type Props = {
  * @optional
  */
  theme: Theme;
+ /**
+ * Style that is passed to the wrapping TouchableRipple element.
+ */
  style?: StyleProp<ViewStyle>;
+ /**
+ * Style that is passed to Title element.
+ */
+ titleStyle?: StyleProp<TextStyle>;
+ /**
+ * Style that is passed to Description element.
+ */
+ descriptionStyle?: StyleProp<TextStyle>;
 };
 
 type State = {
@@ -117,7 +134,16 @@ class ListAccordion extends React.Component<Props, State> {
  };
 
  render() {
- const { left, title, description, children, theme, style } = this.props;
+ const {
+ left,
+ title,
+ description,
+ children,
+ theme,
+ titleStyle,
+ descriptionStyle,
+ style,
+ } = this.props;
  const titleColor = color(theme.colors.text)
  .alpha(0.87)
  .rgb()
@@ -155,6 +181,7 @@ class ListAccordion extends React.Component<Props, State> {
  {
  color: expanded ? theme.colors.primary : titleColor,
  },
+ titleStyle,
  ]}
  >
  {title}
@@ -167,6 +194,7 @@ class ListAccordion extends React.Component<Props, State> {
  {
  color: descriptionColor,
  },
+ descriptionStyle,
  ]}
  >
  {description}

diff --git a/src/components/List/ListSection.tsx b/src/components/List/ListSection.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { View, ViewStyle, StyleSheet, StyleProp } from 'react-native';
+import {
+ View,
+ ViewStyle,
+ StyleSheet,
+ StyleProp,
+ TextStyle,
+} from 'react-native';
 import ListSubheader from './ListSubheader';
 import { withTheme } from '../../core/theming';
 import { Theme } from '../../types';
@@ -17,6 +23,10 @@ type Props = React.ComponentProps<typeof View> & {
  * @optional
  */
  theme: Theme;
+ /**
+ * Style that is passed to Title element.
+ */
+ titleStyle?: StyleProp<TextStyle>;
  style?: StyleProp<ViewStyle>;
 };
 
@@ -57,11 +67,11 @@ class ListSection extends React.Component<Props> {
  static displayName = 'List.Section';
 
  render() {
- const { children, title, style, ...rest } = this.props;
+ const { children, title, titleStyle, style, ...rest } = this.props;
 
  return (
  <View {...rest} style={[styles.container, style]}>
- {title && <ListSubheader>{title}</ListSubheader>}
+ {title && <ListSubheader style={titleStyle}>{title}</ListSubheader>}
  {children}
  </View>
  );

diff --git a/src/components/List/ListSubheader.tsx b/src/components/List/ListSubheader.tsx
@@ -10,6 +10,9 @@ type Props = React.ComponentProps<typeof Text> & {
  * @optional
  */
  theme: Theme;
+ /**
+ * Style that is passed to Text element.
+ */
  style?: StyleProp<TextStyle>;
 };
 

diff --git a/src/components/__tests__/ListAccordion.test.js b/src/components/__tests__/ListAccordion.test.js
@@ -63,3 +63,20 @@ it('renders expanded accordion', () => {
 
  expect(tree).toMatchSnapshot();
 });
+
+it('renders list accordion with custom title and description styles', () => {
+ const tree = renderer
+ .create(
+ <ListAccordion
+ title="Accordion item 1"
+ description="Describes the expandable list item"
+ titleStyle={{ color: 'red' }}
+ descriptionStyle={{ color: 'red' }}
+ >
+ <ListItem title="List item 1" />
+ </ListAccordion>
+ )
+ .toJSON();
+
+ expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/__tests__/ListSection.test.js b/src/components/__tests__/ListSection.test.js
@@ -43,3 +43,22 @@ it('renders list section with subheader', () => {
 
  expect(tree).toMatchSnapshot();
 });
+
+it('renders list section with custom title style', () => {
+ const tree = renderer
+ .create(
+ <ListSection title="Some title" titleStyle={{ color: 'red' }}>
+ <ListItem
+ title="First Item"
+ left={props => <ListIcon {...props} icon="folder" />}
+ />
+ <ListItem
+ title="Second Item"
+ left={props => <ListIcon {...props} icon="folder" />}
+ />
+ </ListSection>
+ )
+ .toJSON();
+
+ expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
@@ -64,6 +64,7 @@ exports[`renders expanded accordion 1`] = `
  Object {
  "color": "#6200ee",
  },
+ undefined,
  ],
  ]
  }
@@ -306,6 +307,7 @@ exports[`renders list accordion with children 1`] = `
  Object {
  "color": "rgba(0, 0, 0, 0.87)",
  },
+ undefined,
  ],
  ]
  }
@@ -363,6 +365,161 @@ exports[`renders list accordion with children 1`] = `
 </View>
 `;
 
+exports[`renders list accordion with custom title and description styles 1`] = `
+<View>
+ <View
+ accessibilityRole="button"
+ accessible={true}
+ isTVSelectable={true}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Array [
+ false,
+ Array [
+ Object {
+ "padding": 8,
+ },
+ undefined,
+ ],
+ ]
+ }
+ >
+ <View
+ pointerEvents="none"
+ style={
+ Object {
+ "alignItems": "center",
+ "flexDirection": "row",
+ }
+ }
+ >
+ <View
+ style={
+ Array [
+ Object {
+ "margin": 8,
+ },
+ Object {
+ "flex": 1,
+ "justifyContent": "center",
+ },
+ ]
+ }
+ >
+ <Text
+ numberOfLines={1}
+ style={
+ Array [
+ Object {
+ "color": "#000000",
+ "fontFamily": "System",
+ "fontWeight": "400",
+ "textAlign": "left",
+ "writingDirection": "ltr",
+ },
+ Array [
+ Object {
+ "fontSize": 16,
+ },
+ Object {
+ "color": "rgba(0, 0, 0, 0.87)",
+ },
+ Object {
+ "color": "red",
+ },
+ ],
+ ]
+ }
+ >
+ Accordion item 1
+ </Text>
+ <Text
+ numberOfLines={2}
+ style={
+ Array [
+ Object {
+ "color": "#000000",
+ "fontFamily": "System",
+ "fontWeight": "400",
+ "textAlign": "left",
+ "writingDirection": "ltr",
+ },
+ Array [
+ Object {
+ "fontSize": 14,
+ },
+ Object {
+ "color": "rgba(0, 0, 0, 0.54)",
+ },
+ Object {
+ "color": "red",
+ },
+ ],
+ ]
+ }
+ >
+ Describes the expandable list item
+ </Text>
+ </View>
+ <View
+ style={
+ Array [
+ Object {
+ "margin": 8,
+ },
+ Object {
+ "alignItems": "center",
+ "height": 40,
+ "justifyContent": "center",
+ },
+ ]
+ }
+ >
+ <Text
+ accessibilityElementsHidden={true}
+ allowFontScaling={false}
+ importantForAccessibility="no-hide-descendants"
+ pointerEvents="none"
+ style={
+ Array [
+ Object {
+ "color": "rgba(0, 0, 0, 0.87)",
+ "fontSize": 24,
+ },
+ Array [
+ Object {
+ "transform": Array [
+ Object {
+ "scaleX": 1,
+ },
+ ],
+ },
+ Object {
+ "backgroundColor": "transparent",
+ },
+ ],
+ Object {
+ "fontFamily": "Material Icons",
+ "fontStyle": "normal",
+ "fontWeight": "normal",
+ },
+ Object {},
+ ]
+ }
+ >
+ 
+ </Text>
+ </View>
+ </View>
+ </View>
+</View>
+`;
+
 exports[`renders list accordion with left items 1`] = `
 <View>
  <View
@@ -477,6 +634,7 @@ exports[`renders list accordion with left items 1`] = `
  Object {
  "color": "rgba(0, 0, 0, 0.87)",
  },
+ undefined,
  ],
  ]
  }
@@ -598,6 +756,7 @@ exports[`renders multiline list accordion 1`] = `
  Object {
  "color": "rgba(0, 0, 0, 0.87)",
  },
+ undefined,
  ],
  ]
  }
@@ -622,6 +781,7 @@ exports[`renders multiline list accordion 1`] = `
  Object {
  "color": "rgba(0, 0, 0, 0.54)",
  },
+ undefined,
  ],
  ]
  }