Merge pull request #74 from material-elements/theme/fix

[theme/fix]

Author: dheeraj1429

__test__/Accordion.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
-import { Accordion, AccordionDetails, AccordionDetailsProps, AccordionSummary, grey, Text } from '../src';
+import { Accordion, AccordionDetails, AccordionDetailsProps, AccordionSummary, gray, Text } from '../src';
 import { fireEvent, render, waitFor } from './test-utils';
 
 describe('Accordion Component', () => {
@@ -107,7 +107,7 @@ describe('AccordionSummary Component', () => {
     const flattenStyles = StyleSheet.flatten(element.props.style);
 
     expect(flattenStyles.borderTopWidth).toEqual(1);
-    expect(flattenStyles.borderTopColor).toEqual(grey[300]);
+    expect(flattenStyles.borderTopColor).toEqual(gray[300]);
   });
 
   it('should show the bottom border', () => {
@@ -119,7 +119,7 @@ describe('AccordionSummary Component', () => {
     const flattenStyles = StyleSheet.flatten(element.props.style);
 
     expect(flattenStyles.borderBottomWidth).toEqual(1);
-    expect(flattenStyles.borderBottomColor).toEqual(grey[300]);
+    expect(flattenStyles.borderBottomColor).toEqual(gray[300]);
   });
 
   it('should call the onPress function', () => {

__test__/Badge.test.tsx

@@ -30,8 +30,8 @@ describe('Badge', () => {
       success: { color: 'yellow' },
       error: { color: 'pink' },
       info: { color: 'blue' },
-      grey: { color: 'red' },
-      lightGrey: { color: 'green' },
+      gray: { color: 'red' },
+      lightGray: { color: 'green' },
       warning: { color: 'blue' },
     },
   };

__test__/Card.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render as testRenderer, waitFor } from '@testing-library/react-native';
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { Card, CardAction, CardContent, CardHeader, CardMedia, grey, Text, ThemeProvider } from '../src';
+import { Card, CardAction, CardContent, CardHeader, CardMedia, gray, Text, ThemeProvider } from '../src';
 import { render } from './test-utils';
 
 describe('Card Component', () => {
@@ -41,7 +41,7 @@ describe('Card Component', () => {
     const card = getByTestId(mockCardTestId);
     const flattenedStyle = StyleSheet.flatten(card.props.style);
     expect(flattenedStyle.borderWidth).toEqual(0.5);
-    expect(flattenedStyle.borderColor).toEqual(grey[500]);
+    expect(flattenedStyle.borderColor).toEqual(gray[500]);
   });
 
   it('should apply the root style', () => {

__test__/CheckBox.test.tsx

@@ -6,7 +6,7 @@ import {
   CHECKBOX_MEDIUM_SIZE,
   CHECKBOX_SMALL_SIZE,
   green,
-  grey,
+  gray,
   lightBlue,
   primary,
   red,
@@ -35,8 +35,8 @@ describe('CheckBox Component', () => {
       success: { color: 'yellow' },
       error: { color: 'pink' },
       info: { color: 'blue' },
-      grey: { color: 'red' },
-      lightGrey: { color: 'green' },
+      gray: { color: 'red' },
+      lightGray: { color: 'green' },
       warning: { color: 'blue' },
     },
   };
@@ -92,13 +92,13 @@ describe('CheckBox Component', () => {
     const { getByTestId } = render(<CheckBox checkBoxColor="red" checkBoxImageTestId={mockCheckBoxImageTestId} />);
     const checkBoxImage = getByTestId(mockCheckBoxImageTestId);
     expect(checkBoxImage.props.style).not.toEqual(expect.objectContaining({ tintColor: 'red' }));
-    expect(checkBoxImage.props.style).toEqual(expect.objectContaining({ tintColor: grey[600] }));
+    expect(checkBoxImage.props.style).toEqual(expect.objectContaining({ tintColor: gray[600] }));
   });
 
   it('should take the default color of the checkbox', () => {
     const { getByTestId } = render(<CheckBox checkBoxImageTestId={mockCheckBoxImageTestId} />);
     const checkBoxImage = getByTestId(mockCheckBoxImageTestId);
-    expect(checkBoxImage.props.style).toEqual(expect.objectContaining({ tintColor: grey[600] }));
+    expect(checkBoxImage.props.style).toEqual(expect.objectContaining({ tintColor: gray[600] }));
   });
 
   it('should call the onPress when clicked on the checkbox', () => {

__test__/List.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { fireEvent, render, waitFor } from './test-utils';
-import { grey, List, ListItem, ListItemText, Text, ThemeProvider } from '../src';
+import { gray, List, ListItem, ListItemText, Text, ThemeProvider } from '../src';
 import { StyleSheet, View } from 'react-native';
 import { BaseStyles } from '../src/libraries/style/styleTypes';
 import { BOTTOM_LARGE_SPACING, BOTTOM_MEDIUM_SPACING, BOTTOM_SMALL_SPACING } from '../src/components/List/constants';
@@ -148,7 +148,7 @@ describe('ListItem Component', () => {
 
     const listItem = getByTestId(mockListItemContainerTestId);
     const flattenedStyle = StyleSheet.flatten(listItem.props.style);
-    expect(flattenedStyle.backgroundColor).toEqual(grey[100]);
+    expect(flattenedStyle.backgroundColor).toEqual(gray[100]);
   });
 
   it('should apply the active custom color on the selected item when passed the selected and selectedColor props', () => {
@@ -198,7 +198,7 @@ describe('ListItem Component', () => {
 
     const listItem = getByTestId(mockListItemContainerTestId);
     const flattenedStyle = StyleSheet.flatten(listItem.props.style);
-    expect(flattenedStyle.borderColor).toEqual(grey[400]);
+    expect(flattenedStyle.borderColor).toEqual(gray[400]);
   });
 
   it('should apply the outline width when outlineWidth prop is passed', () => {
@@ -208,7 +208,7 @@ describe('ListItem Component', () => {
 
     const listItem = getByTestId(mockListItemContainerTestId);
     const flattenedStyle = StyleSheet.flatten(listItem.props.style);
-    expect(flattenedStyle.borderColor).toEqual(grey[400]);
+    expect(flattenedStyle.borderColor).toEqual(gray[400]);
     expect(flattenedStyle.borderWidth).toEqual(2);
   });
 
@@ -223,12 +223,12 @@ describe('ListItem Component', () => {
     expect(flattenedStyle.borderColor).toEqual('red');
   });
 
-  it('should apply the grey color when showDefaultBg prop is passed', () => {
+  it('should apply the gray color when showDefaultBg prop is passed', () => {
     const { getByTestId } = render(<ListItem showDefaultBg listItemContainerTestId={mockListItemContainerTestId} />);
 
     const listItem = getByTestId(mockListItemContainerTestId);
     const flattenedStyle = StyleSheet.flatten(listItem.props.style);
-    expect(flattenedStyle.backgroundColor).toEqual(grey[50]);
+    expect(flattenedStyle.backgroundColor).toEqual(gray[50]);
   });
 
   it('should apply the soft border radius when softRadius prop passed', () => {

__test__/TextField.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, View } from 'react-native';
-import { grey, lightBlue, red, TextField, ThemeProvider } from '../src';
+import { gray, lightBlue, red, TextField, ThemeProvider } from '../src';
 import { fireEvent, render } from './test-utils';
 import { render as testRenderer, waitFor } from '@testing-library/react-native';
 
@@ -250,7 +250,7 @@ describe('TextField Component', () => {
     const { getByTestId } = render(<TextField variant="filled" outlineContainerTestId={mockTextFieldOutlineTestId} />);
 
     const input = getByTestId(mockTextFieldOutlineTestId);
-    expect(input.props.style).toEqual(expect.objectContaining({ backgroundColor: grey[500] }));
+    expect(input.props.style).toEqual(expect.objectContaining({ backgroundColor: gray[500] }));
   });
 
   it('should render the error border color when input variant is (filled)', () => {

__test__/__snapshots__/Accordion.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Accordion Component should render correctly 1`] = `
 <View

__test__/__snapshots__/Alert.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Alert should render correctly with zero props 1`] = `
 <View

__test__/__snapshots__/AppBar.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AppBar should render correctly without any props 1`] = `
 <View

__test__/__snapshots__/Avatar.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Avatar Component should match the snapshot with  props 1`] = `
 <View>