Repository: kiwicom/mobile
Pull request #1441 (2019-01-17 12:08:19)

Shared: Add fontSize prop for our icons with custom fontSize
Some of our icons have a custom fontSize (not orbit sizes).

We need to override width, height and lineHeight also, better to do this in the Icon component than adding this style to very single component that overrides this style


Patch:
diff --git a/app/core/src/screens/hotelsStack/Homepage.js b/app/core/src/screens/hotelsStack/Homepage.js
index 32a609b0..4154ab5c 100644
--- a/app/core/src/screens/hotelsStack/Homepage.js
+++ b/app/core/src/screens/hotelsStack/Homepage.js
@@ -38,7 +38,7 @@ export default class Homepage extends React.Component<Props> {
       currency: 'EUR',
       checkin: DateFormatter(DateUtils().addDays(30)).formatForMachine(),
       checkout: DateFormatter(DateUtils().addDays(36)).formatForMachine(),
-      roomsConfiguration: [{ adultsCount: 3, children: [] }],
+      roomsConfiguration: [{ adultsCount: 1, children: [] }],
     });
 
   goToStay22HotelsPage = () =>
diff --git a/app/hotels/src/filter/hotelAmenities/HotelAmenities.js b/app/hotels/src/filter/hotelAmenities/HotelAmenities.js
new file mode 100644
index 00000000..0855f6d5
--- /dev/null
+++ b/app/hotels/src/filter/hotelAmenities/HotelAmenities.js
@@ -0,0 +1,59 @@
+// @flow strict
+
+import * as React from 'react';
+import { View } from 'react-native';
+import { type TranslationType } from '@kiwicom/mobile-localization';
+import { Icon, StyleSheet } from '@kiwicom/mobile-shared';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { SeparatorTrimmed } from '@kiwicom/mobile-navigation';
+
+import HotelAmenityCheckbox from './HotelAmenityCheckbox';
+
+type Amenity = {|
+  +text: TranslationType,
+  +icon: string,
+  +amenityName: string,
+|};
+
+type Props = {|
+  +amenities: $ReadOnlyArray<Amenity>,
+  +onPress: string => void,
+  +selectedAmenities: $ReadOnlyArray<string>,
+|};
+
+const SEPARATOR_HEIGHT = 0.5;
+
+export default function HotelAmenities(props: Props) {
+  return props.amenities.map<React.Node>(amenity => (
+    <View style={styles.wrapper} key={amenity.amenityName}>
+      <HotelAmenityCheckbox
+        isChecked={props.selectedAmenities.includes(amenity.amenityName)}
+        onPress={props.onPress}
+        icon={
+          <Icon name={amenity.icon} style={styles.amenityIcon} size="small" />
+        }
+        amenityName={amenity.amenityName}
+        text={amenity.text}
+      />
+      <View style={styles.separatorEnd}>
+        <SeparatorTrimmed
+          gapSizeStart={31}
+          color={defaultTokens.paletteInkLighter}
+          height={SEPARATOR_HEIGHT}
+        />
+      </View>
+    </View>
+  ));
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    marginBottom: -SEPARATOR_HEIGHT,
+  },
+  amenityIcon: {
+    marginEnd: 10,
+  },
+  separatorEnd: {
+    marginEnd: -15,
+  },
+});
diff --git a/app/hotels/src/filter/hotelAmenities/HotelAmenitiesPopup.js b/app/hotels/src/filter/hotelAmenities/HotelAmenitiesPopup.js
index 2e583349..460eb0a5 100644
--- a/app/hotels/src/filter/hotelAmenities/HotelAmenitiesPopup.js
+++ b/app/hotels/src/filter/hotelAmenities/HotelAmenitiesPopup.js
@@ -1,19 +1,13 @@
 // @flow
 
 import * as React from 'react';
-import { View } from 'react-native';
-import {
-  ButtonPopup,
-  Checkbox,
-  StyleSheet,
-  Text,
-  TextIcon,
-} from '@kiwicom/mobile-shared';
+import { ButtonPopup, StyleSheet, Text } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
-import { SeparatorTrimmed } from '@kiwicom/mobile-navigation';
 import { SafeAreaView } from 'react-navigation';
 
+import HotelAmenities from './HotelAmenities';
+
 type Props = {|
   +amenities: string[],
   +onClose: () => void,
@@ -22,134 +16,112 @@ type Props = {|
 |};
 
 type State = {|
-  facilities: string[],
+  amenities: string[],
 |};
 
-const amenitiesList = {
-  airportShuttle: {
+const amenitiesList = [
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.airport_shuttle" />
     ),
-    icon: '<',
+    icon: 'bus',
+    amenityName: 'airportShuttle',
   },
-  familyRooms: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.family_rooms" />
     ),
-    icon: '\ue05d',
+    icon: 'child-friendly',
+    amenityName: 'familyRooms',
   },
-  facilitiesForDisabled: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.facilities_for_disabled" />
     ),
-    icon: '\uE088',
+    icon: 'wheelchair',
+    amenityName: 'facilitiesForDisabled',
   },
-  fitnessCenter: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.fitness_center" />
     ),
-    icon: '\uE089',
+    icon: 'gym',
+    amenityName: 'fitnessCenter',
   },
-  parking: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.parking" />
     ),
-    icon: '\uE03E',
+    icon: 'parking',
+    amenityName: 'parking',
   },
-  freeParking: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.free_parking" />
     ),
-    icon: '\uE03E',
+    icon: 'parking',
+    amenityName: 'freeParking',
   },
-  valetParking: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.valet_parking" />
     ),
-    icon: '\uE03E',
+    icon: 'parking',
+    amenityName: 'valetParking',
   },
-  indoorPool: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.indoor_pool" />
     ),
-    icon: '\uE123',
+    icon: 'pool',
+    amenityName: 'indoorPool',
   },
-  petsAllowed: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.pets_allowed" />
     ),
-    icon: '\uE043',
+    icon: 'pet',
+    amenityName: 'petsAllowed',
   },
-  spa: {
+  {
     text: <Translation id="hotels_search.filter.hotel_facilities_filter.spa" />,
-    icon: '\uE04A',
+    icon: 'spa',
+    amenityName: 'spa',
   },
-  wifi: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.wifi" />
     ),
-    icon: '\uE062',
+    icon: 'wifi',
+    amenityName: 'wifi',
   },
-};
+];
 
 export default class HotelAmenitiesPopup extends React.Component<Props, State> {
   state = {
-    facilities: this.props.amenities,
+    amenities: this.props.amenities,
   };
 
   static getDerivedStateFromProps = ({ amenities, isVisible }: Props) => {
     return isVisible ? null : amenities;
   };
 
-  handleCheckboxOnPress = (option: string) => () =>
+  handleCheckboxOnPress = (option: string) => {
     this.setState(state => {
-      let facilities = [...state.facilities];
-      if (facilities.includes(option)) {
-        facilities = facilities.filter(facility => facility !== option);
-      } else {
-        facilities.push(option);
+      if (state.amenities.includes(option)) {
+        return {
+          amenities: state.amenities.filter(amenity => amenity !== option),
+        };
       }
-      return { facilities };
-    });
-
-  onSave = () => this.props.onSave(this.state.facilities);
-
-  renderCheckboxes = (facilities: string[]) => {
-    const checkboxes = [];
-    const facilitiesListKeys = Object.keys(amenitiesList);
-    const facilitiesListLength = facilitiesListKeys.length;
-    facilitiesListKeys.forEach((key, i) => {
-      const facility = amenitiesList[key];
-      const isFacilityChecked = facilities.includes(key);
-      const isNotLastRow = i < facilitiesListLength - 1;
-      checkboxes.push(
-        <React.Fragment key={i}>
-          <Checkbox
-            isChecked={isFacilityChecked}
-            onPress={this.handleCheckboxOnPress(key)}
-          >
-            <View style={styles.checkbox}>
-              <TextIcon code={facility.icon} style={styles.facilityIcon} />
-              {facility.text}
-            </View>
-          </Checkbox>
-          {isNotLastRow && (
-            <View style={styles.separatorEnd}>
-              <SeparatorTrimmed
-                gapSizeStart={31}
-                color={defaultTokens.paletteInkLighter}
-                height={0.5}
-              />
-            </View>
-          )}
-        </React.Fragment>,
-      );
+      return {
+        amenities: [...state.amenities, option],
+      };
     });
-    return checkboxes;
   };
 
+  onSave = () => this.props.onSave(this.state.amenities);
+
   render() {
-    const { facilities } = this.state;
     return (
       <SafeAreaView>
         <ButtonPopup
@@ -166,7 +138,11 @@ export default class HotelAmenitiesPopup extends React.Component<Props, State> {
           <Text style={styles.title}>
             <Translation id="hotels_search.filter.hotel_facilities_popup.title" />
           </Text>
-          {this.renderCheckboxes(facilities)}
+          <HotelAmenities
+            onPress={this.handleCheckboxOnPress}
+            amenities={amenitiesList}
+            selectedAmenities={this.state.amenities}
+          />
         </ButtonPopup>
       </SafeAreaView>
     );
@@ -181,14 +157,4 @@ const styles = StyleSheet.create({
     paddingTop: 15,
     paddingBottom: 10,
   },
-  checkbox: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  facilityIcon: {
-    marginEnd: 10,
-  },
-  separatorEnd: {
-    marginEnd: -15,
-  },
 });
diff --git a/app/hotels/src/filter/hotelAmenities/HotelAmenityCheckbox.js b/app/hotels/src/filter/hotelAmenities/HotelAmenityCheckbox.js
new file mode 100644
index 00000000..b4d51177
--- /dev/null
+++ b/app/hotels/src/filter/hotelAmenities/HotelAmenityCheckbox.js
@@ -0,0 +1,38 @@
+// @flow strict
+
+import * as React from 'react';
+import { View } from 'react-native';
+import { Checkbox, Icon, StyleSheet } from '@kiwicom/mobile-shared';
+import { type TranslationType } from '@kiwicom/mobile-localization';
+
+type Props = {|
+  +isChecked: boolean,
+  +icon: React.Element<typeof Icon>,
+  +onPress: string => void,
+  +amenityName: string,
+  +text: TranslationType,
+|};
+
+export default class HotelAmenityCheckbox extends React.Component<Props> {
+  onPress = () => {
+    this.props.onPress(this.props.amenityName);
+  };
+
+  render() {
+    return (
+      <Checkbox isChecked={this.props.isChecked} onPress={this.onPress}>
+        <View style={styles.checkbox}>
+          {this.props.icon}
+          {this.props.text}
+        </View>
+      </Checkbox>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  checkbox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
diff --git a/app/hotels/src/map/Address.js b/app/hotels/src/map/Address.js
index 9943b8fe..965b5483 100644
--- a/app/hotels/src/map/Address.js
+++ b/app/hotels/src/map/Address.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
-import { TextIcon, StyleSheet, Text } from '@kiwicom/mobile-shared';
+import { Icon, StyleSheet, Text } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
@@ -27,7 +27,7 @@ class Address extends React.Component<Props> {
     return (
       <View style={styles.container}>
         <View style={styles.mapIcon}>
-          <TextIcon code="&#xe001;" style={styles.icon} />
+          <Icon name="map" color={defaultTokens.paletteProductNormal} />
         </View>
         <View style={styles.content}>
           <Text style={styles.header}>
@@ -70,8 +70,4 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
-  icon: {
-    fontSize: 24,
-    color: defaultTokens.paletteProductNormal,
-  },
 });
diff --git a/app/hotels/src/singleHotel/galleryButton/GalleryButton.js b/app/hotels/src/singleHotel/galleryButton/GalleryButton.js
index 4ccb6eb2..3a131684 100644
--- a/app/hotels/src/singleHotel/galleryButton/GalleryButton.js
+++ b/app/hotels/src/singleHotel/galleryButton/GalleryButton.js
@@ -7,7 +7,7 @@ import {
   Text,
   Color,
   type StylePropType,
-  TextIcon,
+  Icon,
 } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
@@ -16,18 +16,17 @@ type Props = {|
   +count: number | null,
   +style?: {
     +container?: StylePropType,
-    +icon?: StylePropType,
     +text?: StylePropType,
   },
+  +iconSize?: 'small' | 'medium' | 'large',
 |};
 
-export default function GalleryButton({ count, style }: Props) {
+export default function GalleryButton({ count, style, iconSize }: Props) {
   const containerStyle = style?.container ?? null;
-  const iconStyle = style?.icon ?? null;
   const textStyle = style?.text ?? null;
   return (
     <View style={[styles.container, containerStyle]}>
-      <TextIcon code="&#xe064;" style={[styles.icon, iconStyle]} />
+      <Icon name="gallery" color={defaultTokens.paletteWhite} size={iconSize} />
       {count !== null && (
         <Text style={[styles.count, textStyle]}>
           <Translation passThrough={count} />
@@ -37,6 +36,10 @@ export default function GalleryButton({ count, style }: Props) {
   );
 }
 
+GalleryButton.defaultProps = {
+  iconSize: 'medium',
+};
+
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
@@ -45,9 +48,6 @@ const styles = StyleSheet.create({
     padding: 4,
     alignItems: 'center',
   },
-  icon: {
-    color: defaultTokens.paletteWhite,
-  },
   count: {
     backgroundColor: 'transparent',
     fontSize: 12,
diff --git a/app/hotels/src/singleHotel/roomList/BeddingInfo.js b/app/hotels/src/singleHotel/roomList/BeddingInfo.js
index fd3cda8d..17aa210b 100644
--- a/app/hotels/src/singleHotel/roomList/BeddingInfo.js
+++ b/app/hotels/src/singleHotel/roomList/BeddingInfo.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
-import { StyleSheet, Text, TextIcon } from '@kiwicom/mobile-shared';
+import { StyleSheet, Text, Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
@@ -51,11 +51,19 @@ export class BeddingInfo extends React.Component<Props> {
     return (
       <View>
         <View style={styles.row}>
-          <TextIcon code="&#xe085;" style={styles.icon} />
+          <Icon
+            name="accommodation"
+            style={styles.icon}
+            color={defaultTokens.colorTextSecondary}
+          />
           <Text style={styles.text}>{this.formatBeddingInfo()}</Text>
         </View>
         <View style={styles.row}>
-          <TextIcon code="(" style={styles.icon} />
+          <Icon
+            name="passengers"
+            style={styles.icon}
+            color={defaultTokens.colorTextSecondary}
+          />
           <Text style={styles.text}>
             <Translation passThrough={' '} />
             <Translation
@@ -93,9 +101,11 @@ const styles = StyleSheet.create({
     color: defaultTokens.colorTextSecondary,
   },
   icon: {
-    color: defaultTokens.colorTextSecondary,
     fontSize: 14,
     marginEnd: 2,
     alignSelf: 'center',
+    width: 14,
+    height: 14,
+    lineHeight: 14,
   },
 });
diff --git a/app/hotels/src/singleHotel/roomList/RoomBadges.js b/app/hotels/src/singleHotel/roomList/RoomBadges.js
index a72c12d1..f1d89514 100644
--- a/app/hotels/src/singleHotel/roomList/RoomBadges.js
+++ b/app/hotels/src/singleHotel/roomList/RoomBadges.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
-import { AdaptableBadge, StyleSheet, TextIcon } from '@kiwicom/mobile-shared';
+import { AdaptableBadge, StyleSheet, Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
@@ -25,7 +25,13 @@ export const RoomBadges = (props: Props) => {
     <React.Fragment>
       {isBreakfastIncluded && (
         <AdaptableBadge
-          icon={<TextIcon code="&#xe02F;" style={styles.iconStyle} />}
+          icon={
+            <Icon
+              name="coffee"
+              color={defaultTokens.paletteBlueNormal}
+              style={styles.iconStyle}
+            />
+          }
           translation={
             <Translation id="single_hotel.room_badges.breakfast_included" />
           }
@@ -35,7 +41,13 @@ export const RoomBadges = (props: Props) => {
       )}
       {isRefundable && (
         <AdaptableBadge
-          icon={<TextIcon code="r" style={styles.iconStyle} />}
+          icon={
+            <Icon
+              name="information-circle"
+              color={defaultTokens.paletteBlueNormal}
+              style={styles.iconStyle}
+            />
+          }
           translation={
             <Translation id="single_hotel.room_badges.free_cancellation" />
           }
@@ -67,8 +79,10 @@ const styles = StyleSheet.create({
     fontSize: 12,
   },
   iconStyle: {
-    color: defaultTokens.paletteBlueNormal,
     fontSize: 12,
+    width: 12,
+    height: 12,
+    lineHeight: 12,
     alignSelf: 'center',
     marginEnd: 5,
   },
diff --git a/app/hotels/src/singleHotel/roomList/RoomImage.js b/app/hotels/src/singleHotel/roomList/RoomImage.js
index bfcf4ce9..17c3783e 100644
--- a/app/hotels/src/singleHotel/roomList/RoomImage.js
+++ b/app/hotels/src/singleHotel/roomList/RoomImage.js
@@ -25,8 +25,8 @@ export default function RoomImage({ thumbnailUrl, openGallery }: Props) {
             count={null}
             style={{
               container: styles.galleryButtonContainer,
-              icon: styles.icon,
             }}
+            iconSize="small"
           />
         </View>
       </View>
@@ -51,7 +51,4 @@ const styles = StyleSheet.create({
     height: 80,
     borderRadius: 3,
   },
-  icon: {
-    fontSize: 16,
-  },
 });
diff --git a/package.json b/package.json
index d84430c0..d35737f0 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "react": "16.6.3",
     "react-native": "^0.57.8",
     "react-native-app-registry-components-to-constants": "0.0.1",
-    "detox": "^9.0.5",
+    "detox": "^10.0.2",
     "react-native-code-push": "^5.5.1"
   },
   "peerDependencies": {
diff --git a/packages/shared/src/icons/Icon.js b/packages/shared/src/icons/Icon.js
index 47caf071..796c90e8 100644
--- a/packages/shared/src/icons/Icon.js
+++ b/packages/shared/src/icons/Icon.js
@@ -12,6 +12,7 @@ type Props = {|
   +size?: 'small' | 'medium' | 'large',
   +color?: string,
   +style?: StylePropType,
+  +fontSize?: number,
 |};
 
 export default class Icon extends React.Component<Props> {
@@ -19,7 +20,27 @@ export default class Icon extends React.Component<Props> {
     color: defaultTokens.colorIconSecondary,
   };
 
+  getCustomFontSizeStyle = () => {
+    // Universal-components adds these values based on size. We have some custom sizes in mobile
+    // So we have to override these values
+    const { fontSize } = this.props;
+
+    if (fontSize == null) {
+      return null;
+    }
+
+    return {
+      fontSize,
+      height: fontSize,
+      width: fontSize,
+      lineHeight: fontSize,
+    };
+  };
+
   render() {
-    return <UniversalIcon {...this.props} />;
+    const { style, ...rest } = this.props;
+    return (
+      <UniversalIcon {...rest} style={[style, this.getCustomFontSizeStyle()]} />
+    );
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 30010755..1edd7c83 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2634,10 +2634,10 @@ detect-newline@^2.1.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
   integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
 
-detox@^9.0.5:
-  version "9.0.5"
-  resolved "https://registry.yarnpkg.com/detox/-/detox-9.0.5.tgz#69e74f189df8fcf693c620b35d95a7631d5153c3"
-  integrity sha512-GXRrZ8OVKXtDbvbcxbryhsnyba+7CK6curwZzkFp2AHnpI1hw5qwf//hwGrrlnNeBVJAVqXjcaFGTFl7FAcIPA==
+detox@^10.0.2:
+  version "10.0.2"
+  resolved "https://registry.yarnpkg.com/detox/-/detox-10.0.2.tgz#a14f931f723a6482a04d0b7dda658cf6ecf64979"
+  integrity sha512-F3CYajiLVwxcvOhrgLUgh4ML7rS+3Je/4N2tZnpGFkMj8IyATVArUkTUEnfIXvVhJLE1LByu7XawfMxVh6MjEg==
   dependencies:
     bunyan "^1.8.12"
     bunyan-debug-stream "^1.1.0"


Test patch:
diff --git a/app/MMB/src/scenes/tickets/__tests__/__snapshots__/TicketDeleteButton.test.js.snap b/app/MMB/src/scenes/tickets/__tests__/__snapshots__/TicketDeleteButton.test.js.snap
index 883b2b9d..daf22e1d 100644
--- a/app/MMB/src/scenes/tickets/__tests__/__snapshots__/TicketDeleteButton.test.js.snap
+++ b/app/MMB/src/scenes/tickets/__tests__/__snapshots__/TicketDeleteButton.test.js.snap
@@ -59,9 +59,12 @@ exports[`TicketDeleteButton renders correctly when booking has local files 1`] =
             Object {
               "color": "#00a991",
             },
-            Object {
-              "alignSelf": "flex-start",
-            },
+            Array [
+              Object {
+                "alignSelf": "flex-start",
+              },
+              null,
+            ],
           ]
         }
       >
diff --git a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap
index 9f0ada7e..e0058e93 100644
--- a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap
+++ b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap
@@ -4,14 +4,17 @@ exports[`RoomBadges renders 1`] = `
 <React.Fragment>
   <AdaptableBadge
     icon={
-      <TextIcon
-        code=""
+      <Icon
+        color="#0176D2"
+        name="coffee"
         style={
           Object {
             "alignSelf": "center",
-            "color": "#0176D2",
             "fontSize": 12,
+            "height": 12,
+            "lineHeight": 12,
             "marginEnd": 5,
+            "width": 12,
           }
         }
       />
@@ -36,14 +39,17 @@ exports[`RoomBadges renders 1`] = `
   />
   <AdaptableBadge
     icon={
-      <TextIcon
-        code="r"
+      <Icon
+        color="#0176D2"
+        name="information-circle"
         style={
           Object {
             "alignSelf": "center",
-            "color": "#0176D2",
             "fontSize": 12,
+            "height": 12,
+            "lineHeight": 12,
             "marginEnd": 5,
+            "width": 12,
           }
         }
       />
diff --git a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomImage.test.js.snap b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomImage.test.js.snap
index 9b4bc5b6..094a573b 100644
--- a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomImage.test.js.snap
+++ b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomImage.test.js.snap
@@ -37,6 +37,7 @@ exports[`RoomImage renders 1`] = `
     >
       <GalleryButton
         count={null}
+        iconSize="small"
         style={
           Object {
             "container": Object {
@@ -44,9 +45,6 @@ exports[`RoomImage renders 1`] = `
               "borderRadius": 0,
               "justifyContent": "center",
             },
-            "icon": Object {
-              "fontSize": 16,
-            },
           }
         }
       />
diff --git a/packages/shared/src/icons/__tests__/Icon.test.js b/packages/shared/src/icons/__tests__/Icon.test.js
index 9c95529d..bd152f29 100644
--- a/packages/shared/src/icons/__tests__/Icon.test.js
+++ b/packages/shared/src/icons/__tests__/Icon.test.js
@@ -13,3 +13,7 @@ it('renders for small and large', () => {
   expect(renderer.create(<Icon name="map" size="small" />)).toMatchSnapshot();
   expect(renderer.create(<Icon name="map" size="large" />)).toMatchSnapshot();
 });
+
+it('genereates correct styles for custom fontSize', () => {
+  expect(renderer.create(<Icon name="map" fontSize={12} />)).toMatchSnapshot();
+});
diff --git a/packages/shared/src/icons/__tests__/__snapshots__/Icon.test.js.snap b/packages/shared/src/icons/__tests__/__snapshots__/Icon.test.js.snap
index 5f590809..6b81a16b 100644
--- a/packages/shared/src/icons/__tests__/__snapshots__/Icon.test.js.snap
+++ b/packages/shared/src/icons/__tests__/__snapshots__/Icon.test.js.snap
@@ -1,5 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`genereates correct styles for custom fontSize 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "fontFamily": "orbit-icons",
+      },
+      Object {
+        "fontSize": 24,
+        "height": 24,
+        "lineHeight": 24,
+        "width": 24,
+      },
+      Object {
+        "color": "#7f91a8",
+      },
+      Array [
+        undefined,
+        Object {
+          "fontSize": 12,
+          "height": 12,
+          "lineHeight": 12,
+          "width": 12,
+        },
+      ],
+    ]
+  }
+>
+  
+</Text>
+`;
+
 exports[`renders 1`] = `
 <Text
   style={
@@ -16,7 +48,10 @@ exports[`renders 1`] = `
       Object {
         "color": "#7f91a8",
       },
-      undefined,
+      Array [
+        undefined,
+        null,
+      ],
     ]
   }
 >
@@ -40,7 +75,10 @@ exports[`renders for small and large 1`] = `
       Object {
         "color": "#7f91a8",
       },
-      undefined,
+      Array [
+        undefined,
+        null,
+      ],
     ]
   }
 >
@@ -64,7 +102,10 @@ exports[`renders for small and large 2`] = `
       Object {
         "color": "#7f91a8",
       },
-      undefined,
+      Array [
+        undefined,
+        null,
+      ],
     ]
   }
 >