fix(checkbox): adds overflow

8base · Feb 28, 2019 · becce46 · becce46
1 parent 8ad0d6c
commit becce46
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/...ts__/__image_snapshots__/checkbox-test-js-components-checkbox-common-1-snap.png b/...ts__/__image_snapshots__/checkbox-test-js-components-checkbox-common-1-snap.png
diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
@@ -1,6 +1,11 @@
 // @flow
 
 import React, { Component } from 'react';
+import styled from 'react-emotion';
+
+const Container = styled('div')`
+  max-width: 100px;
+`;
 
 class CheckboxState extends Component<*, Object> {
   state = {
@@ -24,6 +29,9 @@ export default (asStory: *) => {
           <Checkbox label="With Check" checked />
           <Checkbox label="With error" checked hasError />
           <Checkbox label="With disabled" checked disabled />
+          <Container>
+            <Checkbox label="With overflow" checked />
+          </Container>
         </Column>
       ))
       .add('with state', () => (
@@ -33,5 +41,6 @@ export default (asStory: *) => {
           }
         </CheckboxState>
       ));
+
   });
 };
diff --git a/src/components/Checkbox/Checkbox.theme.js b/src/components/Checkbox/Checkbox.theme.js
@@ -11,6 +11,7 @@ const [CheckboxSquareTag, themeSquare] = createThemeTag(`${name}Square`, ({ COLO
     width: '24px',
     height: '24px',
     transition: 'all .15s ease-in-out',
+    flexShrink: 0,
 
     background: COLORS.WHITE,
     border: `1px solid ${COLORS.PRIMARY_BORDER_COLOR}`,
@@ -53,6 +54,9 @@ const [CheckboxTextTag, themeText] = createThemeTag(`${name}Text`, ({ COLORS }:
   root: {
     paddingLeft: '12px',
     cursor: 'pointer',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
 
     color: COLORS.SECONDARY_TEXT_COLOR,
     fontSize: COLORS.BODY_TEXT,
@@ -71,6 +75,7 @@ const [CheckboxWrapperTag, themeWrapper] = createThemeTag(`${name}Wrapper`, {
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
+    overflow: 'hidden',
   },
 });