chore: Release 1/5/22 (#2929)

Latest updates including fixes for #2928 and #2921

Author: mdodgelooker

CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 2.8.14
+
+## `@looker/components` 2.8.14
+
+### Bug Fixes
+
+- **Button:** Shrinking in flex layouts
+- **DataTable:** Header icon duplicate tooltip
+- **Tab/Tab2:** Text vertical alignment
+
+## `@looker/filter-components` 0.10.14
+
+### Features
+
+- **DateFilter:** Localize units
+
+### Bug Fixes
+
+- Input error styling
+
+## `@looker/visualizations` 0.2.7
+
+### Features
+
+- Row totals support
+
+### Bug Fixes
+
+- Hide y-axis label when query has multiple measures
+
+## `@looker/visualizations-table` 0.2.7
+
+### Features
+
+- **Table:** Zebra-style row background
+
+## `@looker/visualizations-visx` 0.2.6
+
+### Features
+
+- **Pie:** Labels mode for legend type
+
 # 2.8.13
 
 ## `@looker/components` 2.8.13

packages/components-providers/src/TrapStack/TrapStackProvider.tsx

@@ -29,7 +29,7 @@ import React, { useRef, useMemo } from 'react'
 import type { Trap, TrapStackContextProps, TrapMap } from './types'
 import { getActiveTrap } from './utils'
 
-export interface TrapStackProviderProps<O extends unknown = unknown> {
+export interface TrapStackProviderProps<O = unknown> {
   activate: (trap: Trap<O>) => () => void
   children?: ReactNode
   context: Context<TrapStackContextProps<O>>

packages/components-providers/src/TrapStack/types.ts

@@ -26,12 +26,12 @@
 
 import type { MutableRefObject } from 'react'
 
-export interface Trap<O extends unknown = unknown> {
+export interface Trap<O = unknown> {
   element: HTMLElement
   options?: O
 }
 
-export interface TrapStackContextProps<O extends unknown = unknown> {
+export interface TrapStackContextProps<O = unknown> {
   /**
    * Stores the element for the active trap (undefined if none are active)
    */
@@ -58,6 +58,6 @@ export interface TrapStackContextProps<O extends unknown = unknown> {
   removeTrap?: (id: string) => void
 }
 
-export interface TrapMap<O extends unknown = unknown> {
+export interface TrapMap<O = unknown> {
   [key: string]: Trap<O>
 }

packages/components-providers/src/TrapStack/utils.ts

@@ -25,9 +25,7 @@
  */
 import type { TrapMap } from './types'
 
-export const getActiveTrap = <O extends unknown = unknown>(
-  trapMap: TrapMap<O>
-) => {
+export const getActiveTrap = <O = unknown>(trapMap: TrapMap<O>) => {
   // Sort the traps according to their element's dom position and return the last
   // which we assume to be stacked on top since all components using Portal
   // share a single zIndexFloor and use dom order to determine stacking

packages/components-test-utils/package.json

@@ -26,5 +26,6 @@
       "@looker/eslint-config-oss"
     ]
   },
-  "gitHead": "734f77cda8050d9eea83a187113333dfad8650ca"
+  "gitHead": "734f77cda8050d9eea83a187113333dfad8650ca",
+  "dependencies": {}
 }

packages/components/src/Button/Button.stories.tsx

@@ -123,8 +123,21 @@ export const ShrinkingIconRepro = () => {
     </ThemeProvider>
   )
 }
-ShrinkingIconRepro.parameters = {
-  storyshots: { disable: true },
+
+export const ShrinkingButtonRepro = () => {
+  return (
+    <ThemeProvider
+      theme={theme => ({
+        ...theme,
+        defaults: { ...theme.defaults, brandAnimation: true },
+      })}
+    >
+      <Box2 display="flex" width={200}>
+        <Box2 width={250}>Some text</Box2>
+        <Button>Don't shrink me</Button>
+      </Box2>
+    </ThemeProvider>
+  )
 }
 
 export default {

packages/components/src/Button/ButtonBase.tsx

@@ -59,6 +59,7 @@ const buttonCSS = css<ButtonColorProps>`
   border-radius: ${({ theme }) => theme.radii.medium};
   cursor: pointer;
   display: inline-flex;
+  flex-shrink: 0;
   font-family: ${({ theme }) => theme.fonts.brand};
   font-weight: ${({ theme }) => theme.fontWeights.medium};
   justify-content: center;

packages/components/src/DataTable/Header/DataTableHeaderCell.tsx

@@ -34,6 +34,7 @@ import { Space } from '../../Layout/Space'
 import { Tooltip } from '../../Tooltip'
 import { Truncate } from '../../Truncate'
 import { useClickable } from '../../utils'
+import { VisuallyHidden } from '../../VisuallyHidden'
 import { columnSize, sizeInfersTruncate } from '../Column/columnSize'
 import type { DataTableColumn } from '../Column'
 import { FocusableCell } from '../Column/FocusableCell'
@@ -73,9 +74,12 @@ const DataTableHeaderCellLayout = forwardRef(
 
     if (titleIcon) {
       label = (
-        <Tooltip content={title}>
-          <Icon color="ui3" title={title} icon={titleIcon} size="small" />
-        </Tooltip>
+        <>
+          <VisuallyHidden>{title}</VisuallyHidden>
+          <Tooltip content={title}>
+            <Icon color="ui3" icon={titleIcon} size="small" />
+          </Tooltip>
+        </>
       )
     } else if (size && sizeInfersTruncate(size)) {
       label = <Truncate width="auto">{title}</Truncate>

packages/components/src/Dialog/Dialog.spec.tsx

@@ -54,20 +54,20 @@ describe('Dialog', () => {
     renderWithTheme(
       <Dialog isOpen placement="top" content={<SimpleContent />} />
     )
-    expect(screen.queryByText('Dialog content')).toBeInTheDocument()
+    expect(screen.getByText('Dialog content')).toBeInTheDocument()
   })
 
   test('defaultOpen', async () => {
     renderWithTheme(<Dialog defaultOpen content={<DialogMediumContent />} />)
-    expect(screen.queryByText(/We the People/)).toBeInTheDocument()
+    expect(screen.getByText(/We the People/)).toBeInTheDocument()
     expect(
-      screen.queryByLabelText(/The Constitution/, {
+      screen.getByLabelText(/The Constitution/, {
         selector: '[role="dialog"]',
       })
     ).toBeInTheDocument()
     const doneButton = screen.getByText('Done Reading')
     fireEvent.click(doneButton)
-    await waitForElementToBeRemoved(() => screen.getByText(/We the People/))
+    await waitForElementToBeRemoved(() => screen.queryByText(/We the People/))
   })
 
   test('Dialog can be opened & closed', async () => {
@@ -84,12 +84,12 @@ describe('Dialog', () => {
     const link = screen.getByText('Open Dialog')
     expect(link).toBeInTheDocument()
     fireEvent.click(link)
-    expect(screen.queryByText('Dialog content')).toBeInTheDocument()
+    expect(screen.getByText('Dialog content')).toBeInTheDocument()
 
     // Close the Dialog
     const doneButton = screen.getByText('Done')
     fireEvent.click(doneButton)
-    await waitForElementToBeRemoved(() => screen.getByText('Dialog content'))
+    await waitForElementToBeRemoved(() => screen.queryByText('Dialog content'))
   })
 
   test('Backdrop can be clicked to close', async () => {
@@ -100,13 +100,13 @@ describe('Dialog', () => {
     )
 
     // Confirm Dialog is open
-    expect(screen.queryByText('Dialog content')).toBeInTheDocument()
+    expect(screen.getByText('Dialog content')).toBeInTheDocument()
 
     // Find & click the backdrop
     fireEvent.click(screen.getByTestId('backdrop'))
 
     // Confirm Dialog closes
-    await waitForElementToBeRemoved(() => screen.getByText('Dialog content'))
+    await waitForElementToBeRemoved(() => screen.queryByText('Dialog content'))
   })
 
   test('Render props style', async () => {
@@ -119,12 +119,12 @@ describe('Dialog', () => {
     // Open Dialog
     const link = screen.getByText('Open Dialog')
     fireEvent.click(link)
-    expect(screen.queryByText('Dialog content')).toBeInTheDocument()
+    expect(screen.getByText('Dialog content')).toBeInTheDocument()
 
     // Close the Dialog
     const doneButton = screen.getByText('Done')
     fireEvent.click(doneButton)
-    await waitForElementToBeRemoved(() => screen.getByText('Dialog content'))
+    await waitForElementToBeRemoved(() => screen.queryByText('Dialog content'))
   })
 
   test('Controlled', async () => {
@@ -133,12 +133,12 @@ describe('Dialog', () => {
     // Open Dialog
     const link = screen.getByText('Open Dialog')
     fireEvent.click(link)
-    expect(screen.queryByText(/We the People/)).toBeInTheDocument()
+    expect(screen.getByText(/We the People/)).toBeInTheDocument()
 
     // Close the Dialog
     const doneButton = screen.getByText('Done Reading')
     fireEvent.click(doneButton)
-    await waitForElementToBeRemoved(() => screen.getByText(/We the People/))
+    await waitForElementToBeRemoved(() => screen.queryByText(/We the People/))
   })
 
   test('Controlled no callbacks', async () => {
@@ -158,7 +158,7 @@ describe('Dialog', () => {
     // Open Dialog
     const link = screen.getByText('Open Dialog')
     fireEvent.click(link)
-    expect(screen.queryByText(/We the People/)).toBeInTheDocument()
+    expect(screen.getByText(/We the People/)).toBeInTheDocument()
   })
 
   test('Controlled - no children', async () => {
@@ -167,12 +167,12 @@ describe('Dialog', () => {
     // Open Dialog
     const link = screen.getByText('Open Dialog')
     fireEvent.click(link)
-    expect(screen.queryByText(/We the People/)).toBeInTheDocument()
+    expect(screen.getByText(/We the People/)).toBeInTheDocument()
 
     // Close the Dialog
     const doneButton = screen.getByText('Done Reading')
     fireEvent.click(doneButton)
-    await waitForElementToBeRemoved(() => screen.getByText(/We the People/))
+    await waitForElementToBeRemoved(() => screen.queryByText(/We the People/))
   })
 
   test('Controlled - legacy', async () => {
@@ -181,12 +181,12 @@ describe('Dialog', () => {
     // Open Dialog
     const link = screen.getByText('Open Dialog')
     fireEvent.click(link)
-    expect(screen.queryByText(/We the People/)).toBeInTheDocument()
+    expect(screen.getByText(/We the People/)).toBeInTheDocument()
 
     // Close the Dialog
     const doneButton = screen.getByText('Done Reading')
     fireEvent.click(doneButton)
-    await waitForElementToBeRemoved(() => screen.getByText(/We the People/))
+    await waitForElementToBeRemoved(() => screen.queryByText(/We the People/))
   })
 
   describe('Animation behavior', () => {
@@ -220,7 +220,9 @@ describe('Dialog', () => {
       runTimers()
       expect(onAfterOpen).toBeCalled()
       fireEvent.click(screen.getByText('Done'))
-      await waitForElementToBeRemoved(() => screen.getByText('Dialog content'))
+      await waitForElementToBeRemoved(() =>
+        screen.queryByText('Dialog content')
+      )
       expect(onAfterClose).toBeCalled()
     })
 
@@ -240,7 +242,7 @@ describe('Dialog', () => {
       // Close button has tooltip on next focus
       fireEvent.blur(closeButton)
       fireEvent.focus(closeButton)
-      expect(screen.queryByRole('tooltip')).toBeInTheDocument()
+      expect(screen.getByRole('tooltip')).toBeInTheDocument()
       // Close the dialog to avoid act warning
       fireEvent.click(closeButton)
 

packages/components/src/Dialog/Layout/DialogLayout.spec.tsx

@@ -44,7 +44,7 @@ describe('DialogLayout', () => {
 
   test('Replaces the built-in `IconButton` with an arbitrary ReactNode', () => {
     renderWithTheme(<HeaderDetail />)
-    expect(screen.queryByText('Header text')).toBeInTheDocument()
+    expect(screen.getByText('Header text')).toBeInTheDocument()
     expect(screen.getByText('Cancel')).toBeInTheDocument()
   })