update(RotateControls, ZoomControls): Add icon size prop (#381)

* update(RotateControls, ZoomControls): Add icon size prop * Change prop name from size to iconSize Co-authored-by: Alan Chen <alan.chen@airbnb.com>
airbnb · Jul 1, 2020 · 79d0866 · 79d0866
1 parent 49e7c66
commit 79d0866
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/packages/core/src/components/ImageViewer/RotateControls.tsx b/packages/core/src/components/ImageViewer/RotateControls.tsx
@@ -10,11 +10,13 @@ export type RotateControlsProps = {
   rotation?: number;
   /** Callback when rotation changes */
   onRotation: (rotation: number) => void;
+  /** Size of the icons. */
+  iconSize?: number | string;
 };
 
 /** Rotate controls that can be used with an image viewer component */
 export default function RotateControls(props: RotateControlsProps) {
-  const { onRotation, rotation = 0 } = props;
+  const { onRotation, rotation = 0, iconSize = '2em' } = props;
 
   const handleRotateLeft = useCallback(() => onRotation(rotation - 90 < 0 ? 270 : rotation - 90), [
     onRotation,
@@ -33,14 +35,14 @@ export default function RotateControls(props: RotateControlsProps) {
             'lunar.image.rotateCounterClockwise',
             'Rotate counter clockwise',
           )}
-          size="2em"
+          size={iconSize}
         />
       </IconButton>
 
       <IconButton onClick={handleRotateRight}>
         <IconRotateRight
           accessibilityLabel={T.phrase('lunar.image.rotateClockwise', 'Rotate clockwise')}
-          size="2em"
+          size={iconSize}
         />
       </IconButton>
     </ButtonGroup>

diff --git a/packages/core/src/components/ImageViewer/ZoomControls.tsx b/packages/core/src/components/ImageViewer/ZoomControls.tsx
@@ -42,6 +42,8 @@ export type ZoomControlsProps = {
   scale?: number;
   /** Callback when scale / zoom changes */
   onScale: (scale: number) => void;
+  /** Size of the icons. */
+  iconSize?: number | string;
   /** Custom style sheet. */
   styleSheet?: StyleSheet;
 };
@@ -50,7 +52,7 @@ export type ZoomControlsProps = {
 export default function ZoomControls({ styleSheet, ...props }: ZoomControlsProps) {
   const [styles, cx] = useStyles(styleSheet ?? styleSheetZoomControls);
   const [visible, setVisible] = useState(false);
-  const { onScale, scale = 1 } = props;
+  const { onScale, scale = 1, iconSize = '2em' } = props;
 
   const zoomOptions = ZOOM_OPTIONS.map((zoom: { label: string; scale: number }) => ({
     ...zoom,
@@ -71,15 +73,18 @@ export default function ZoomControls({ styleSheet, ...props }: ZoomControlsProps
     <div className={cx(styles.controls)}>
       <ButtonGroup>
         <IconButton disabled={scale === 1} onClick={handleZoomOut}>
-          <IconRemove accessibilityLabel={T.phrase('lunar.image.zoomOut', 'Zoom out')} size="2em" />
+          <IconRemove
+            accessibilityLabel={T.phrase('lunar.image.zoomOut', 'Zoom out')}
+            size={iconSize}
+          />
         </IconButton>
 
         <Button borderless onClick={toggleZoomMenu}>
           {scale * 100}%
         </Button>
 
         <IconButton onClick={handleZoomIn}>
-          <IconAdd accessibilityLabel={T.phrase('lunar.image.zoomIn', 'Zoom in')} size="2em" />
+          <IconAdd accessibilityLabel={T.phrase('lunar.image.zoomIn', 'Zoom in')} size={iconSize} />
         </IconButton>
       </ButtonGroup>
 

diff --git a/packages/core/test/components/ImageViewer/RotateControls.test.tsx b/packages/core/test/components/ImageViewer/RotateControls.test.tsx
@@ -9,6 +9,7 @@ describe('<RotateControls />', () => {
   const rotateSpy = jest.fn();
   const props = {
     onRotation: rotateSpy,
+    iconSize: '1em',
   };
   let wrapper: Enzyme.ShallowWrapper<RotateControlsProps>;
 

diff --git a/packages/core/test/components/ImageViewer/ZoomControls.test.tsx b/packages/core/test/components/ImageViewer/ZoomControls.test.tsx
@@ -13,6 +13,7 @@ describe('<ZoomControls />', () => {
   const props = {
     onScale: setScaleSpy,
     scale: 1,
+    iconSize: '1em',
   };
 
   describe('zoom buttons', () => {