0.8.5 (#1036)

Minor fix to Icon sizing logic
Fix documentation sidebar header

Author: Luke Bowerman

CHANGELOG.md

@@ -5,21 +5,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## UNRELEASED
+## [0.8.5]
 
 ### Added
 
 - `CheckboxGroup` and `RadioGroup` now support wrapping when `inline` is used, and they use the same height as other inputs
+- Storybook replaces Playground as preferred development location for components `yarn storybook`
 
 ### Changed
 
 - `Icon` now supports "t-shirt" sizing. (i.e.: `size="small"`)
-
 - Jest no longer requires artifact build before being run
 
 ### Fixed
 
 - `Tooltip` appends `hover` class if tooltip is open rather and doesn't replace given `className` prop value
+- Fixed documentation header
+- Fixed a bug in Slider documentation that cause Gatsby to fall over on documentation deployment
 
 ## [0.8.4]
 

packages/components/src/Icon/Icon.tsx

@@ -26,12 +26,12 @@
 
 import {
   color,
-  CompatibleHTMLProps,
   SizeXXSmall,
   SizeXSmall,
   SizeSmall,
   SizeMedium,
   SizeLarge,
+  CompatibleHTMLProps,
 } from '@looker/design-tokens'
 import React, { forwardRef, Ref } from 'react'
 import styled from 'styled-components'
@@ -48,7 +48,7 @@ export type IconSize =
 
 export interface IconProps
   extends Omit<CompatibleHTMLProps<HTMLDivElement>, 'onClick'>,
-    Omit<SimpleLayoutProps, 'height' | 'width'> {
+    SimpleLayoutProps {
   color?: string
   name: IconNames
 }
@@ -69,12 +69,16 @@ const IconFactory = forwardRef(
 
 IconFactory.displayName = 'IconFactory'
 
-export const Icon = styled(IconFactory)`
+export const Icon = styled(IconFactory).attrs(({ size, height, width }) => ({
+  size: !height && !width ? size || 'medium' : undefined,
+}))`
   ${simpleLayoutCSS}
   ${color}
 
   align-items: center;
   display: inline-flex;
+  height: ${({ height }) => height};
+  width: ${({ width }) => width};
 `
 
-Icon.defaultProps = { size: 'medium' }
+// Icon.defaultProps = { size: 'medium' }

packages/www/src/Layout/Navigation/Header.tsx

@@ -37,7 +37,7 @@ interface HeaderProps {
 
 export const HeaderJsx: FC<HeaderProps> = ({ className }) => (
   <a href="/" className={className}>
-    <Flex alignItems="flex-end">
+    <Flex alignItems="center">
       <Icon
         name="LookerLogo"
         alt="Looker"
@@ -61,14 +61,11 @@ export const HeaderJsx: FC<HeaderProps> = ({ className }) => (
 )
 
 const Header = styled(HeaderJsx)`
-  display: flex;
   align-items: center;
-  height: ${({ height }) => height};
-
-  padding: 0 ${({ theme }) => theme.space.large}
-    ${({ theme }) => theme.space.xxsmall};
-
+  display: flex;
   border-bottom: 1px solid ${({ theme }) => theme.colors.keyAccent};
+  height: ${({ height }) => height};
+  padding: 0 ${({ theme: { space } }) => `${space.large} ${space.xxsmall}`};
 `
 
 const DividerVertical = styled.div<SpaceProps>`

packages/www/src/documentation/components/content/icon.mdx

@@ -10,11 +10,11 @@ import { IconList } from './demos'
 `<Icon />` component uses the property `name` to display the correct icon.
 
 ```jsx
-<Flex justifyContent="space-around">
+<Space around>
   <Icon name="Check" />
-  <Icon name="Favorite" />
-  <Icon name="GearOutline" />
-</Flex>
+  <Icon name="Favorite" size="large" />
+  <Icon name="GearOutline" size="small" />
+</Space>
 ```
 
 ## Icon Attributes
@@ -24,7 +24,7 @@ import { IconList } from './demos'
 `color` by default, icons inherit the text color of the component they are embedded within. But it can also have it specify as a prop.
 
 ```jsx
-<Flex justifyContent="space-around">
+<Space around>
   <Icon name="Trash" color="inform" />
   <Box
     color="critical"
@@ -38,21 +38,21 @@ import { IconList } from './demos'
     The text in this Box is red and so is the icon.
     <Icon name="Trash" size="large" mx="auto" />
   </Box>
-</Flex>
+</Space>
 ```
 
 ### size
 
 `size` can be specified by using the size prop. By default the size will be medium.
 
 ```jsx
-<Flex justifyContent="space-around" alignItems="flex-end">
+<Space around>
   <Icon name="Beaker" color="inform" size="xxsmall" />
   <Icon name="Beaker" color="inform" size="xsmall" />
   <Icon name="Beaker" color="inform" size="small" />
   <Icon name="Beaker" color="inform" size="medium" />
   <Icon name="Beaker" color="inform" size="large" />
-</Flex>
+</Space>
 ```
 
 ## Icon Library