Rename Banner's dismissable prop to canDismiss (#786)

* Rename Banner's dismissable prop to `canDismiss`

Author: Luke Bowerman

CHANGELOG.md

@@ -5,32 +5,30 @@ 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.7.26] - 2020-04-14
 
 ### Added
 
-- Layout components
-  - `Grid` component
-  - `Space` & `SpaceVertical` components
-- `SelectMulti` component
+- `ActionListManager` component
 - `CodeBlock` component
+- `ComponentsProvider` component to provide a pre-packaged `ThemeProvider` + `theme`
+- `Grid` component
 - `InputTimeSelect` component
-- `Board`, `ShareAlt` Icon
-- `ActionListItemAction` accepts color prop when value is "danger"
-- `Prompt` component
-- `ActionListManager` component
 - `Pagination` component
-- `ComponentsProvider` component to provide a pre-packaged `ThemeProvider` + `theme`
-- New Icons `VisibilityOutline`, `SendEmail`, `SendSftp`, `SendWebhook`
+- `Prompt` component
+- `SelectMulti` component
+- `Space` & `SpaceVertical` components
+- Icons - `Board`, `ShareAlt`,`SendEmail`, `SendSftp`, `SendWebhook`, `VisibilityOutline`,
 
 ### Changed
 
-- `Share` Icon updated
+- `ActionListItemAction` accepts `color` prop (only takes `danger`)
+- Icons - `Share` updated
 
 ### Fixed
 
 - `usePopper` (used in `Popover` and `Tooltip`) positioning issue with `placement="top"` and offset parent is the window
-- `Select` runtime error with no options, defaultValue or placeholder
+- `Select` no longer throws a runtime error when no options, defaultValue or placeholder are specified
 
 ## [0.7.25] - 2020-03-23
 

packages/components/src/Banner/Banner.test.tsx

@@ -45,9 +45,9 @@ test('Confirmation banner', () => {
   assertSnapshot(<Banner intent="confirmation">Confirmation</Banner>)
 })
 
-test('Dismissable banner', () => {
+test('Banner can be dismissed', () => {
   assertSnapshot(
-    <Banner intent="info" dismissable>
+    <Banner intent="info" canDismiss>
       Info!
     </Banner>
   )

packages/components/src/Banner/Banner.tsx

@@ -31,9 +31,8 @@ import {
 } from '@looker/design-tokens'
 import React, { forwardRef, Ref } from 'react'
 import { IconButton } from '../Button'
-import { Box } from '../Layout/Box'
+import { Box, Flex } from '../Layout'
 import { Icon } from '../Icon'
-import { Flex } from '../Layout/Flex'
 import { VisuallyHidden } from '../VisuallyHidden'
 
 export type BannerIntent = 'warning' | 'info' | 'error' | 'confirmation'
@@ -46,7 +45,7 @@ export interface BannerProps
    * @default: 'info'
    */
   intent?: BannerIntent
-  dismissable?: boolean
+  canDismiss?: boolean
   onDismiss?: () => void
 }
 
@@ -99,7 +98,7 @@ export const Banner = forwardRef(
   (props: BannerProps, ref: Ref<HTMLDivElement>) => {
     const {
       children,
-      dismissable,
+      canDismiss,
       intent = 'warning',
       onDismiss,
       ...typeAndSpaceProps
@@ -127,7 +126,7 @@ export const Banner = forwardRef(
         {icon}
         <VisuallyHidden>{accessibilityLabel}</VisuallyHidden>
         <Box flex="auto">{children}</Box>
-        {dismissable && (
+        {canDismiss && (
           <IconButton
             ml="auto"
             style={{ padding: '1px' }}

packages/components/src/Banner/__snapshots__/Banner.test.tsx.snap

@@ -1,59 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Confirmation banner 1`] = `
-.c2 {
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-}
-
-.c0 {
-  border-radius: 0.25rem;
-  background-color: #e0ffe7;
-  margin: 0.75rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c1 {
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  -webkit-clip: rect(1px,1px,1px,1px);
-  clip: rect(1px,1px,1px,1px);
-}
-
-<div
-  aria-live="polite"
-  className="c0"
-  role="status"
->
-  <div
-    className="c1"
-  />
-  <div
-    className="c2"
-  >
-    Confirmation
-  </div>
-</div>
-`;
-
-exports[`Dismissable banner 1`] = `
+exports[`Banner can be dismissed 1`] = `
 .c1 {
   color: #49a9f2;
   margin-right: 0.75rem;
@@ -288,6 +235,59 @@ exports[`Dismissable banner 1`] = `
 </div>
 `;
 
+exports[`Confirmation banner 1`] = `
+.c2 {
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+}
+
+.c0 {
+  border-radius: 0.25rem;
+  background-color: #e0ffe7;
+  margin: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c1 {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+}
+
+<div
+  aria-live="polite"
+  className="c0"
+  role="status"
+>
+  <div
+    className="c1"
+  />
+  <div
+    className="c2"
+  >
+    Confirmation
+  </div>
+</div>
+`;
+
 exports[`Error banner 1`] = `
 .c1 {
   color: #B2121F;

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

@@ -13,15 +13,15 @@ The `<Banner />` component is used to alert the user with `warning`, `error`, `i
 <Banner intent="confirmation">Confirmation</Banner>
 ```
 
-## Dismissable
+## canDismiss
 
-Banners can also be set to be `dismissable`, giving them a close button, and allows for a dismiss handler to be passed to `onDismiss`.
+Banners can also be set to be `canDismiss`, giving them a close button, and allows for a dismiss handler to be passed to `onDismiss`.
 
 ```jsx
 ;() => {
   const { value, setOff, setOn } = useToggle(true)
   return value ? (
-    <Banner intent="warning" onDismiss={setOff} dismissable>
+    <Banner intent="warning" onDismiss={setOff} canDismiss>
       I can be closed
     </Banner>
   ) : (