0.9.8

Author: Luke Bowerman

CHANGELOG.md

@@ -5,6 +5,13 @@ 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).
 
+## [0.9.8] - 2020-08-02
+
+### Fixed
+
+- `DialogContent` patch for IE11 display bug
+- `MenuItem` patch for IE11 display bug
+
 ## [0.9.7] - 2020-07-27
 
 ### Added

packages/components/src/Dialog/Layout/DialogContent.tsx

@@ -119,7 +119,7 @@ const Outer = styled.div<{ borderBottom?: boolean }>`
   ${({ borderBottom, theme: { colors } }) =>
     borderBottom && `border-bottom: 1px solid ${colors.ui2};`}
 
-  flex: 8;
+  flex: 1 1 auto;
   overflow: auto;
 
   &.overflow {

packages/components/src/Dialog/Layout/__snapshots__/DialogContent.test.tsx.snap

@@ -2,9 +2,9 @@
 
 exports[`DialogContent Snapshot - No overflow 1`] = `
 .c0 {
-  -webkit-flex: 8;
-  -ms-flex: 8;
-  flex: 8;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   overflow: auto;
 }
 
@@ -42,9 +42,9 @@ exports[`DialogContent Snapshot - No overflow 1`] = `
 
 exports[`DialogContent Snapshot 1`] = `
 .c0 {
-  -webkit-flex: 8;
-  -ms-flex: 8;
-  flex: 8;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   overflow: auto;
 }
 

packages/components/src/Menu/MenuItem.tsx

@@ -24,14 +24,20 @@
 
  */
 
-import { CompatibleHTMLProps } from '@looker/design-tokens'
+import {
+  CompatibleHTMLProps,
+  size,
+  space,
+  SizeProps,
+  SpaceProps,
+} from '@looker/design-tokens'
 import { IconNames } from '@looker/icons'
 import styled from 'styled-components'
 import React, { FC, ReactNode, useContext, useState, useEffect } from 'react'
 import { useID } from '../utils/useID'
 import { Icon } from '../Icon'
 import { MenuContext, MenuItemContext } from './MenuContext'
-import { MenuItemLayout, MenuItemLayoutGrid } from './MenuItemLayout'
+import { MenuItemLayout } from './MenuItemLayout'
 
 export interface MenuItemProps extends CompatibleHTMLProps<HTMLElement> {
   iconArtwork?: ReactNode
@@ -85,6 +91,7 @@ const MenuItemInternal: FC<MenuItemProps> = (props) => {
   }
 
   const { setOpen } = useContext(MenuContext)
+
   const handleOnClick = (event: React.MouseEvent<HTMLLIElement>) => {
     setFocusVisible(false)
     onClick && onClick(event)
@@ -115,7 +122,11 @@ const MenuItemInternal: FC<MenuItemProps> = (props) => {
       />
     ) : (
       renderIconPlaceholder && (
-        <div data-testid={`menu-item-${renderedIconID}-icon-placeholder`} />
+        <IconPlaceholder
+          size={24 / (compact ? 1.25 : 1)}
+          mr="xsmall"
+          data-testid={`menu-item-${renderedIconID}-icon-placeholder`}
+        />
       )
     )
 
@@ -127,19 +138,16 @@ const MenuItemInternal: FC<MenuItemProps> = (props) => {
       compact={compact}
       disabled={disabled}
       focusVisible={isFocusVisible}
-      hasIcon={Boolean(renderedIcon)}
       onBlur={handleOnBlur}
       onClick={handleOnClick}
       onKeyUp={handleOnKeyUp}
       className={className}
     >
       <Component href={href} role="menuitem" target={target}>
-        <MenuItemLayoutGrid>
-          {renderedIcon}
-          {children}
-        </MenuItemLayoutGrid>
+        {renderedIcon}
+        <span>{children}</span>
+        {detail && <Detail>{detail}</Detail>}
       </Component>
-      {detail && <Detail>{detail}</Detail>}
     </MenuItemLayout>
   )
 }
@@ -152,3 +160,10 @@ const Detail = styled.div`
   margin-right: ${({ theme: { space } }) => space.medium};
   padding-left: ${({ theme: { space } }) => space.large};
 `
+
+interface IconPlaceholderProps extends SizeProps, SpaceProps {}
+
+const IconPlaceholder = styled.div<IconPlaceholderProps>`
+  ${size}
+  ${space}
+`

packages/components/src/Menu/MenuItemLayout.tsx

@@ -33,7 +33,6 @@ import { Icon } from '../Icon'
 export interface MenuListItemProps extends CompatibleHTMLProps<HTMLLIElement> {
   compact?: boolean
   focusVisible?: boolean
-  hasIcon?: boolean
 }
 
 /**
@@ -42,9 +41,7 @@ export interface MenuListItemProps extends CompatibleHTMLProps<HTMLLIElement> {
  */
 const MenuItemWrapper = forwardRef(
   (props: MenuListItemProps, ref: Ref<HTMLLIElement>) => {
-    return (
-      <li {...omit(props, 'compact', 'focusVisible', 'hasIcon')} ref={ref} />
-    )
+    return <li {...omit(props, 'compact', 'focusVisible')} ref={ref} />
   }
 )
 
@@ -59,8 +56,6 @@ export const MenuItemLayoutGrid = styled.div``
 export const MenuItemLayout = styled(MenuItemWrapper)`
   align-items: center;
   color: ${({ theme: { colors } }) => colors.text5};
-  display: flex;
-  flex-wrap: wrap;
   font-size: ${({ theme: { fontSizes } }) => fontSizes.small};
   font-weight: ${({ theme: { fontWeights } }) => fontWeights.normal};
   outline: none;
@@ -77,6 +72,7 @@ export const MenuItemLayout = styled(MenuItemWrapper)`
     border: none;
     color: inherit;
     cursor: pointer;
+    display: flex;
     flex: 1;
     font-size: inherit;
     font-weight: inherit;
@@ -91,21 +87,13 @@ export const MenuItemLayout = styled(MenuItemWrapper)`
     position: relative;
     text-align: left;
     text-decoration: none;
+    width: 100%;
 
     &:hover,
     &:focus {
       color: inherit;
       text-decoration: none;
     }
-
-    ${MenuItemLayoutGrid} {
-      align-items: center;
-      display: grid;
-      grid-gap: ${({ compact, theme: { space } }) =>
-        compact ? space.xsmall : space.small};
-      grid-template-columns: ${({ hasIcon }) =>
-        hasIcon ? '24px 1fr' : ' 1fr'};
-    }
   }
 
   ${({ focusVisible, theme: { colors } }) =>