baseui 10.9.2 → 10.11.1

package/block/block.js.flow

@@ -8,9 +8,9 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import type {BlockPropsT} from './types.js';
-import {StyledBlock} from './styled-components.js';
-import {getOverrides} from '../helpers/overrides.js';
+import type { BlockPropsT } from './types.js';
+import { StyledBlock } from './styled-components.js';
+import { getOverrides } from '../helpers/overrides.js';
 
 function Block({
   forwardedRef,
@@ -84,16 +84,13 @@ function Block({
   whiteSpace,
   ...restProps
 }) {
-  const [BaseBlock, baseBlockProps] = getOverrides(
-    overrides.Block,
-    StyledBlock,
-  );
+  const [BaseBlock, baseBlockProps] = getOverrides(overrides.Block, StyledBlock);
 
   return (
     <BaseBlock
       // coerced to any because because of how react components are typed.
       // cannot guarantee an html element
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
       ref={(forwardedRef: any)}
       $as={as}
       $color={color}
@@ -170,9 +167,9 @@ function Block({
   );
 }
 
-const BlockComponent = React.forwardRef<BlockPropsT, HTMLElement>(
-  (props: BlockPropsT, ref) => <Block {...props} forwardedRef={ref} />,
-);
+const BlockComponent = React.forwardRef<BlockPropsT, HTMLElement>((props: BlockPropsT, ref) => (
+  <Block {...props} forwardedRef={ref} />
+));
 BlockComponent.displayName = 'Block';
 export default BlockComponent;
 

package/block/index.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-export {default as Block} from './block.js';
+export { default as Block } from './block.js';
 export type * from './types.js';
 
 declare var __DEV__: boolean;

package/block/styled-components.js.flow

@@ -7,10 +7,10 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import {getMediaQueries} from '../helpers/responsive-helpers.js';
-import {styled} from '../styles/index.js';
-import type {BreakpointsT} from '../styles/types.js';
-import type {StyledBlockPropsT} from './types.js';
+import { getMediaQueries } from '../helpers/responsive-helpers.js';
+import { styled } from '../styles/index.js';
+import type { BreakpointsT } from '../styles/types.js';
+import type { StyledBlockPropsT } from './types.js';
 
 // styletron will throw when value is undefined. if so, replace with null
 function constrainToNull(value) {
@@ -22,8 +22,9 @@ function constrainToNull(value) {
 
 type ApplyParams = {
   property: string,
-  value?: * | Array<*>,
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
+  value?: any | Array<any>,
+  // flowlint-next-line unclear-type:off
   transform?: Function,
 };
 
@@ -32,7 +33,7 @@ function build(breakpoints: BreakpointsT) {
   const mediaQueries = getMediaQueries(breakpoints);
 
   return {
-    apply: ({property, transform = x => x, value}: ApplyParams) => {
+    apply: ({ property, transform = (x) => x, value }: ApplyParams) => {
       if (value === null || value === undefined) {
         return;
       }
@@ -65,17 +66,17 @@ function getFontValue(obj, key) {
   return obj[key];
 }
 
-export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
-  const {breakpoints, colors, typography, sizing} = props.$theme;
+export const StyledBlock = styled<StyledBlockPropsT>('div', (props) => {
+  const { breakpoints, colors, typography, sizing } = props.$theme;
 
   const get = (obj, key) => obj[key];
-  const getScale = size => sizing[size] || size;
+  const getScale = (size) => sizing[size] || size;
 
   const styles = build(breakpoints);
   styles.apply({
     property: 'color',
     value: get(props, '$color'),
-    transform: color => colors[color] || color,
+    transform: (color) => colors[color] || color,
   });
   styles.apply({
     property: 'backgroundAttachment',
@@ -88,7 +89,7 @@ export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
   styles.apply({
     property: 'backgroundColor',
     value: get(props, '$backgroundColor'),
-    transform: backgroundColor => colors[backgroundColor] || backgroundColor,
+    transform: (backgroundColor) => colors[backgroundColor] || backgroundColor,
   });
   styles.apply({
     property: 'backgroundImage',
@@ -113,38 +114,38 @@ export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
   styles.apply({
     property: 'fontFamily',
     value: get(props, '$font'),
-    transform: font => getFontValue(typography[font], 'fontFamily'),
+    transform: (font) => getFontValue(typography[font], 'fontFamily'),
   });
   styles.apply({
     property: 'fontWeight',
     value: get(props, '$font'),
-    transform: font => getFontValue(typography[font], 'fontWeight'),
+    transform: (font) => getFontValue(typography[font], 'fontWeight'),
   });
   styles.apply({
     property: 'fontSize',
     value: get(props, '$font'),
-    transform: font => getFontValue(typography[font], 'fontSize'),
+    transform: (font) => getFontValue(typography[font], 'fontSize'),
   });
   styles.apply({
     property: 'lineHeight',
     value: get(props, '$font'),
-    transform: font => getFontValue(typography[font], 'lineHeight'),
+    transform: (font) => getFontValue(typography[font], 'lineHeight'),
   });
 
   styles.apply({
     property: 'alignContent',
     value: get(props, '$alignContent'),
   });
-  styles.apply({property: 'alignItems', value: get(props, '$alignItems')});
-  styles.apply({property: 'alignSelf', value: get(props, '$alignSelf')});
-  styles.apply({property: 'display', value: get(props, '$display')});
-  styles.apply({property: 'flex', value: get(props, '$flex')});
+  styles.apply({ property: 'alignItems', value: get(props, '$alignItems') });
+  styles.apply({ property: 'alignSelf', value: get(props, '$alignSelf') });
+  styles.apply({ property: 'display', value: get(props, '$display') });
+  styles.apply({ property: 'flex', value: get(props, '$flex') });
   styles.apply({
     property: 'flexDirection',
     value: get(props, '$flexDirection'),
   });
-  styles.apply({property: 'grid', value: get(props, '$grid')});
-  styles.apply({property: 'gridArea', value: get(props, '$gridArea')});
+  styles.apply({ property: 'grid', value: get(props, '$grid') });
+  styles.apply({ property: 'gridArea', value: get(props, '$gridArea') });
   styles.apply({
     property: 'gridAutoColumns',
     value: get(props, '$gridAutoColumns'),
@@ -157,7 +158,7 @@ export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
     property: 'gridAutoRows',
     value: get(props, '$gridAutoRows'),
   });
-  styles.apply({property: 'gridColumn', value: get(props, '$gridColumn')});
+  styles.apply({ property: 'gridColumn', value: get(props, '$gridColumn') });
   styles.apply({
     property: 'gridColumnEnd',
     value: get(props, '$gridColumnEnd'),
@@ -176,15 +177,15 @@ export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
     value: get(props, '$gridGap'),
     transform: getScale,
   });
-  styles.apply({property: 'gridRow', value: get(props, '$gridRow')});
-  styles.apply({property: 'gridRowEnd', value: get(props, '$gridRowEnd')});
+  styles.apply({ property: 'gridRow', value: get(props, '$gridRow') });
+  styles.apply({ property: 'gridRowEnd', value: get(props, '$gridRowEnd') });
   styles.apply({
     property: 'gridRowGap',
     value: get(props, '$gridRowGap'),
     transform: getScale,
   });
-  styles.apply({property: 'gridRowStart', value: get(props, '$gridRowStart')});
-  styles.apply({property: 'gridTemplate', value: get(props, '$gridTemplate')});
+  styles.apply({ property: 'gridRowStart', value: get(props, '$gridRowStart') });
+  styles.apply({ property: 'gridTemplate', value: get(props, '$gridTemplate') });
   styles.apply({
     property: 'gridTemplateAreas',
     value: get(props, '$gridTemplateAreas'),
@@ -205,8 +206,8 @@ export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
     property: 'justifyItems',
     value: get(props, '$justifyItems'),
   });
-  styles.apply({property: 'justifySelf', value: get(props, '$justifySelf')});
-  styles.apply({property: 'position', value: get(props, '$position')});
+  styles.apply({ property: 'justifySelf', value: get(props, '$justifySelf') });
+  styles.apply({ property: 'position', value: get(props, '$position') });
   styles.apply({
     property: 'width',
     value: get(props, '$width'),
@@ -240,7 +241,7 @@ export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
   styles.apply({
     property: 'overflowX',
     value: get(props, '$overflow'),
-    transform: overflow => {
+    transform: (overflow) => {
       if (overflow === 'scrollX') {
         return 'scroll';
       }
@@ -250,7 +251,7 @@ export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
   styles.apply({
     property: 'overflowY',
     value: get(props, '$overflow'),
-    transform: overflow => {
+    transform: (overflow) => {
       if (overflow === 'scrollY') {
         return 'scroll';
       }
@@ -260,7 +261,7 @@ export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
   styles.apply({
     property: 'overflow',
     value: get(props, '$overflow'),
-    transform: overflow => {
+    transform: (overflow) => {
       if (overflow !== 'scrollX' && overflow !== 'scrollY') {
         return overflow;
       }
@@ -324,8 +325,8 @@ export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
     property: 'placeContent',
     value: get(props, '$placeContent'),
   });
-  styles.apply({property: 'placeItems', value: get(props, '$placeItems')});
-  styles.apply({property: 'placeSelf', value: get(props, '$placeSelf')});
+  styles.apply({ property: 'placeItems', value: get(props, '$placeItems') });
+  styles.apply({ property: 'placeSelf', value: get(props, '$placeSelf') });
   styles.apply({
     property: 'flexWrap',
     value: get(props, '$flexWrap'),
@@ -353,8 +354,8 @@ export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
     transform: getScale,
   });
 
-  styles.apply({property: 'textOverflow', value: get(props, '$textOverflow')});
-  styles.apply({property: 'whiteSpace', value: get(props, '$whiteSpace')});
+  styles.apply({ property: 'textOverflow', value: get(props, '$textOverflow') });
+  styles.apply({ property: 'whiteSpace', value: get(props, '$whiteSpace') });
 
   return styles.value();
 });

package/block/types.js.flow

@@ -7,8 +7,8 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import type {Node, ElementType} from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
+import type { Node, ElementType } from 'react';
+import type { OverrideT } from '../helpers/overrides.js';
 
 export type OverridesT = {
   Block?: OverrideT,
@@ -343,6 +343,7 @@ export type BlockPropsT = {
   textOverflow?: ResponsiveT<string>,
   /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space */
   whiteSpace?: ResponsiveT<WhiteSpaceT>,
+  src?: string,
 };
 
 export type StyledBlockPropsT = {

package/breadcrumbs/breadcrumbs.js

@@ -81,16 +81,13 @@ function Breadcrumbs(props) {
       Separator = _getOverrides12[0],
       baseSeparatorProps = _getOverrides12[1];
 
-  var iconOverrides = (0, _overrides.mergeOverrides)({
+  baseIconProps.overrides = (0, _overrides.mergeOverrides)({
     Svg: {
       style: {
         verticalAlign: 'text-bottom'
       }
     }
-  }, // $FlowFixMe
-  baseIconProps && baseIconProps.overrides); // $FlowFixMe
-
-  baseIconProps.overrides = iconOverrides;
+  }, baseIconProps && baseIconProps.overrides);
   childrenArray.forEach(function (child, index) {
     childrenWithSeparators.push( /*#__PURE__*/_react.default.createElement(ListItem, _extends({
       key: "breadcrumb-item-".concat(index),
@@ -103,7 +100,7 @@ function Breadcrumbs(props) {
   });
   return /*#__PURE__*/_react.default.createElement(_index.LocaleContext.Consumer, null, function (locale) {
     return /*#__PURE__*/_react.default.createElement(Root, _extends({
-      "aria-label": props.ariaLabel || locale.breadcrumbs.ariaLabel,
+      "aria-label": props['aria-label'] || props.ariaLabel || locale.breadcrumbs.ariaLabel,
       "data-baseweb": "breadcrumbs"
     }, baseRootProps), /*#__PURE__*/_react.default.createElement(List, baseListProps, childrenWithSeparators));
   });

package/breadcrumbs/breadcrumbs.js.flow

@@ -7,23 +7,18 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import React, {Children} from 'react';
+import React, { Children } from 'react';
 
-import {LocaleContext} from '../locale/index.js';
-import {ThemeContext} from '../styles/theme-provider.js';
+import { LocaleContext } from '../locale/index.js';
+import { ThemeContext } from '../styles/theme-provider.js';
 import ChevronRight from '../icon/chevron-right.js';
 import ChevronLeft from '../icon/chevron-left.js';
-import type {BreadcrumbsPropsT} from './types.js';
-import {
-  StyledRoot,
-  StyledSeparator,
-  StyledList,
-  StyledListItem,
-} from './styled-components.js';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
+import type { BreadcrumbsPropsT } from './types.js';
+import { StyledList, StyledListItem, StyledRoot, StyledSeparator } from './styled-components.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 
 export function Breadcrumbs(props: BreadcrumbsPropsT) {
-  const {overrides = {}, showTrailingSeparator = false} = props;
+  const { overrides = {}, showTrailingSeparator = false } = props;
   const childrenArray = Children.toArray(props.children);
   const childrenWithSeparators = [];
 
@@ -31,35 +26,22 @@ export function Breadcrumbs(props: BreadcrumbsPropsT) {
   const [Right, baseIconProps] = getOverrides(overrides.Icon, ChevronRight);
   const [Left] = getOverrides(overrides.Icon, ChevronLeft);
   const [List, baseListProps] = getOverrides(overrides.List, StyledList);
-  const [ListItem, baseListItemProps] = getOverrides(
-    overrides.ListItem,
-    StyledListItem,
-  );
-  const [Separator, baseSeparatorProps] = getOverrides(
-    overrides.Separator,
-    StyledSeparator,
-  );
+  const [ListItem, baseListItemProps] = getOverrides(overrides.ListItem, StyledListItem);
+  const [Separator, baseSeparatorProps] = getOverrides(overrides.Separator, StyledSeparator);
 
-  const iconOverrides = mergeOverrides(
-    {Svg: {style: {verticalAlign: 'text-bottom'}}},
-    // $FlowFixMe
-    baseIconProps && baseIconProps.overrides,
+  baseIconProps.overrides = mergeOverrides(
+    { Svg: { style: { verticalAlign: 'text-bottom' } } },
+    baseIconProps && baseIconProps.overrides
   );
-  // $FlowFixMe
-  baseIconProps.overrides = iconOverrides;
 
   childrenArray.forEach((child, index) => {
     childrenWithSeparators.push(
-      <ListItem
-        key={`breadcrumb-item-${index}`}
-        $itemIndex={index}
-        {...baseListItemProps}
-      >
+      <ListItem key={`breadcrumb-item-${index}`} $itemIndex={index} {...baseListItemProps}>
         {child}
         {(showTrailingSeparator || index !== childrenArray.length - 1) && (
           <Separator {...baseSeparatorProps} key={`separator-${index}`}>
             <ThemeContext.Consumer>
-              {theme =>
+              {(theme) =>
                 theme.direction === 'rtl' ? (
                   <Left {...baseIconProps} />
                 ) : (
@@ -69,15 +51,15 @@ export function Breadcrumbs(props: BreadcrumbsPropsT) {
             </ThemeContext.Consumer>
           </Separator>
         )}
-      </ListItem>,
+      </ListItem>
     );
   });
 
   return (
     <LocaleContext.Consumer>
-      {locale => (
+      {(locale) => (
         <Root
-          aria-label={props.ariaLabel || locale.breadcrumbs.ariaLabel}
+          aria-label={props['aria-label'] || props.ariaLabel || locale.breadcrumbs.ariaLabel}
           data-baseweb="breadcrumbs"
           {...baseRootProps}
         >

package/breadcrumbs/index.d.ts

@@ -14,6 +14,7 @@ export interface BreadcrumbsProps {
   children?: React.ReactNode;
   overrides?: BreadcrumbsOverrides;
   ariaLabel?: string;
+  'aria-label'?: string;
   showTrailingSeparator?: boolean;
 }
 

package/breadcrumbs/index.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-export {default as Breadcrumbs} from './breadcrumbs.js';
+export { default as Breadcrumbs } from './breadcrumbs.js';
 export * from './styled-components.js';
 export type * from './types.js';
 

package/breadcrumbs/styled-components.js.flow

@@ -7,16 +7,16 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import {styled} from '../styles/index.js';
+import { styled } from '../styles/index.js';
 
-export const StyledRoot = styled<{}>('nav', ({$theme}) => {
+export const StyledRoot = styled<{}>('nav', ({ $theme }) => {
   return {
     color: $theme.colors.breadcrumbsText,
     ...$theme.typography.font350,
   };
 });
 
-export const StyledList = styled<{}>('ol', ({$theme}) => {
+export const StyledList = styled<{}>('ol', ({ $theme }) => {
   return {
     listStyleType: 'none',
     margin: 0,
@@ -25,14 +25,14 @@ export const StyledList = styled<{}>('ol', ({$theme}) => {
   };
 });
 
-export const StyledListItem = styled<{}>('li', ({$theme}) => {
+export const StyledListItem = styled<{}>('li', ({ $theme }) => {
   return {
     display: 'inline-block',
     ...$theme.typography.font350,
   };
 });
 
-export const StyledSeparator = styled<{}>('div', ({$theme}) => {
+export const StyledSeparator = styled<{}>('div', ({ $theme }) => {
   return {
     display: 'inline-block',
     color: $theme.colors.breadcrumbsSeparatorFill,

package/breadcrumbs/types.js.flow

@@ -7,9 +7,9 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import type {Node} from 'react';
+import type { Node } from 'react';
 
-import type {OverrideT} from '../helpers/overrides.js';
+import type { OverrideT } from '../helpers/overrides.js';
 
 export type OverridesT = {
   Root?: OverrideT,
@@ -23,6 +23,7 @@ export type BreadcrumbsPropsT = {|
   children?: Node,
   overrides?: OverridesT,
   ariaLabel?: string,
+  'aria-label'?: string,
   /** Whether to show a trailing separator after the last breadcrumb. */
   showTrailingSeparator?: boolean,
 |};

package/button/button-internals.js.flow

@@ -11,13 +11,13 @@ import {
   StartEnhancer as StyledStartEnhancer,
   EndEnhancer as StyledEndEnhancer,
 } from './styled-components.js';
-import {getSharedProps} from './utils.js';
-import {getOverrides} from '../helpers/overrides.js';
+import { getSharedProps } from './utils.js';
+import { getOverrides } from '../helpers/overrides.js';
 
-import type {ButtonPropsT} from './types.js';
+import type { ButtonPropsT } from './types.js';
 
 function RenderEnhancer(props) {
-  const {Enhancer, ...restProps} = props;
+  const { Enhancer, ...restProps } = props;
   if (typeof Enhancer === 'string') {
     return Enhancer;
   }
@@ -30,15 +30,12 @@ function RenderEnhancer(props) {
 }
 
 export default function ButtonInternals(props: ButtonPropsT) {
-  const {children, overrides = {}, startEnhancer, endEnhancer} = props;
+  const { children, overrides = {}, startEnhancer, endEnhancer } = props;
   const [StartEnhancer, startEnhancerProps] = getOverrides(
     overrides.StartEnhancer,
-    StyledStartEnhancer,
-  );
-  const [EndEnhancer, endEnhancerProps] = getOverrides(
-    overrides.EndEnhancer,
-    StyledEndEnhancer,
+    StyledStartEnhancer
   );
+  const [EndEnhancer, endEnhancerProps] = getOverrides(overrides.EndEnhancer, StyledEndEnhancer);
   const sharedProps = getSharedProps(props);
   return (
     <React.Fragment>

package/button/button.js

@@ -192,7 +192,8 @@ var Button = /*#__PURE__*/function (_React$Component) {
 
 _defineProperty(Button, "defaultProps", _defaultProps.defaultProps);
 
-var ForwardedButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var ForwardedButton = /*#__PURE__*/React.forwardRef( //$FlowFixMe
+function (props, ref) {
   return /*#__PURE__*/React.createElement(Button, _extends({
     forwardedRef: ref
   }, props));

package/button/button.js.flow

@@ -11,24 +11,23 @@ import {
   LoadingSpinner as StyledLoadingSpinner,
   LoadingSpinnerContainer as StyledLoadingSpinnerContainer,
 } from './styled-components.js';
-import {getSharedProps} from './utils.js';
+import { getSharedProps } from './utils.js';
 import ButtonInternals from './button-internals.js';
-import {defaultProps} from './default-props.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
+import { defaultProps } from './default-props.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
-import type {ButtonPropsT} from './types.js';
+import type { ButtonPropsT, SharedStylePropsT, ReactRefT } from './types.js';
 
 class Button extends React.Component<
-  // eslint-disable-next-line flowtype/no-weak-types
-  ButtonPropsT & {forwardedRef: any},
-  {isFocusVisible: boolean},
+  ButtonPropsT & { forwardedRef: ReactRefT<HTMLElement> },
+  { isFocusVisible: boolean }
 > {
   static defaultProps = defaultProps;
-  state = {isFocusVisible: false};
+  state = { isFocusVisible: false };
 
-  internalOnClick = (...args: *) => {
-    const {isLoading, onClick} = this.props;
+  internalOnClick = (...args) => {
+    const { isLoading, onClick } = this.props;
     if (isLoading) {
       args[0].preventDefault();
       return;
@@ -38,13 +37,13 @@ class Button extends React.Component<
 
   handleFocus = (event: SyntheticEvent<>) => {
     if (isFocusVisible(event)) {
-      this.setState({isFocusVisible: true});
+      this.setState({ isFocusVisible: true });
     }
   };
 
   handleBlur = (event: SyntheticEvent<>) => {
     if (this.state.isFocusVisible !== false) {
-      this.setState({isFocusVisible: false});
+      this.setState({ isFocusVisible: false });
     }
   };
 
@@ -69,20 +68,17 @@ class Button extends React.Component<
       // (1) because it's a Button under the hood
       // (2) because we want consistency with the rest of the components
       overrides.BaseButton || overrides.Root,
-      StyledBaseButton,
+      StyledBaseButton
     );
-    const [LoadingSpinner, loadingSpinnerProps] = getOverrides(
+    const [LoadingSpinner, loadingSpinnerProps] = getOverrides<SharedStylePropsT>(
       overrides.LoadingSpinner,
-      StyledLoadingSpinner,
+      StyledLoadingSpinner
     );
-    const [
-      LoadingSpinnerContainer,
-      loadingSpinnerContainerProps,
-    ] = getOverrides(
+    const [LoadingSpinnerContainer, loadingSpinnerContainerProps] = getOverrides<SharedStylePropsT>(
       overrides.LoadingSpinnerContainer,
-      StyledLoadingSpinnerContainer,
+      StyledLoadingSpinnerContainer
     );
-    const sharedProps = {
+    const sharedProps: SharedStylePropsT = {
       ...getSharedProps(this.props),
       $isFocusVisible: this.state.isFocusVisible,
     };
@@ -95,9 +91,7 @@ class Button extends React.Component<
               // we want the screenreader to say loading and also the content of child
               // this seems like the best option even tho the child might not be a string
               ['aria-label']: `loading ${
-                typeof this.props.children === 'string'
-                  ? this.props.children
-                  : ''
+                typeof this.props.children === 'string' ? this.props.children : ''
               }`,
               ['aria-busy']: 'true',
             }
@@ -107,22 +101,16 @@ class Button extends React.Component<
         {...baseButtonProps}
         // Applies last to override passed in onClick
         onClick={this.internalOnClick}
-        onFocus={forkFocus(
-          {...restProps, ...baseButtonProps},
-          this.handleFocus,
-        )}
-        onBlur={forkBlur({...restProps, ...baseButtonProps}, this.handleBlur)}
+        onFocus={forkFocus({ ...restProps, ...baseButtonProps }, this.handleFocus)}
+        onBlur={forkBlur({ ...restProps, ...baseButtonProps }, this.handleBlur)}
       >
         {isLoading ? (
           <React.Fragment>
             {/* This is not meant to be overridable by users */}
-            <div style={{opacity: 0, display: 'flex', height: '0px'}}>
+            <div style={{ opacity: 0, display: 'flex', height: '0px' }}>
               <ButtonInternals {...this.props} />
             </div>
-            <LoadingSpinnerContainer
-              {...sharedProps}
-              {...loadingSpinnerContainerProps}
-            >
+            <LoadingSpinnerContainer {...sharedProps} {...loadingSpinnerContainerProps}>
               <LoadingSpinner {...sharedProps} {...loadingSpinnerProps} />
             </LoadingSpinnerContainer>
           </React.Fragment>
@@ -135,7 +123,8 @@ class Button extends React.Component<
 }
 
 const ForwardedButton = React.forwardRef<ButtonPropsT, HTMLButtonElement>(
-  (props: ButtonPropsT, ref) => <Button forwardedRef={ref} {...props} />,
+  //$FlowFixMe
+  (props: ButtonPropsT, ref) => <Button forwardedRef={ref} {...props} />
 );
 ForwardedButton.displayName = 'Button';
 export default ForwardedButton;

package/button/default-props.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {KIND, SHAPE, SIZE} from './constants.js';
+import { KIND, SHAPE, SIZE } from './constants.js';
 
 export const defaultProps = {
   disabled: false,