feat(icon): Add name convention for size prop

telus · Sep 21, 2017 · c3f796e · c3f796e
1 parent 561c0d5
commit c3f796e
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/src/components/Icon/Icon.jsx b/src/components/Icon/Icon.jsx
@@ -28,7 +28,7 @@ const Icon = ({ glyph, variant, fixedWidth, size, className, children, ...rest }
     `${styles[`iconCore${capitalize(glyph)}`]}`,
     `${variant ? styles[variant] : ''}`,
     `${fixedWidth ? `${styles.fw}` : ''}`,
-    `${size ? `${styles[size]}` : ''}`,
+    `${size ? `${styles[`size${size}`]}` : ''}`,
     `${className ? `${className}` : ''}`
   ].join(' ')
 
@@ -85,7 +85,7 @@ Icon.propTypes = {
   /**
    *
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.oneOf(['16px', '24px', '48px']),
   /**
    * One or more CSS class names separated by spaces to append onto the icon.
    * Don't advertise as we plan on removing this feature soon.
@@ -101,7 +101,7 @@ Icon.propTypes = {
 Icon.defaultProps = {
   variant: 'inherit',
   fixedWidth: false,
-  size: 'medium',
+  size: '24px',
   className: '',
   children: null
 }

diff --git a/src/components/Icon/Icon.modules.scss b/src/components/Icon/Icon.modules.scss
@@ -56,15 +56,15 @@ $core-icon-codepoints: (
   text-align: center;
 }
 
-.small {
+.size16px {
   font-size: 1 rem;
 }
 
-.medium {
+.size24px {
   font-size: 1.5rem;
 }
 
-.large {
+.size48px {
   font-size: 3rem;
 }
 

diff --git a/src/components/Icon/__tests__/Icon.spec.jsx b/src/components/Icon/__tests__/Icon.spec.jsx
@@ -41,9 +41,9 @@ describe('<Icon />', () => {
   })
 
   it('can be sized', () => {
-    const icon = doShallow({ size: 'small' })
+    const icon = doShallow({ size: '16px' })
 
-    expect(icon).toHaveClassName('small')
+    expect(icon).toHaveClassName('size16px')
   })
 
   it('supports custom CSS classes', () => {

diff --git a/src/components/Icon/__tests__/__snapshots__/Icon.spec.jsx.snap b/src/components/Icon/__tests__/__snapshots__/Icon.spec.jsx.snap
@@ -3,6 +3,6 @@
 exports[`<Icon /> renders 1`] = `
 <i
   aria-hidden="true"
-  className="icon iconCoreCheckmark inherit  medium "
+  className="icon iconCoreCheckmark inherit  size24px "
 />
 `;