@tableau/tableau-ui - npm Package Compare versions

Comparing version 3.7.0 to 3.8.0

CHANGELOG.md

 # Tableau UI Release Notes
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## 3.8.0
+- `Badge`
+  - New component!
+- `Button`
+  - Added `lowEmphasisDark` kind.
+- `Button`, `Checkbox`, `DropdownSelect`, `Radio`, `Stepper`, `Tabs`, `TextArea`, `TextField`, `TextFieldGroup`, `ToggleSwitch`
+  - Improved accessibility with with higher color contrast ratios across all states as well as an updated focus indicator.
+- `Button`, `Tabs`, `TextLink`, `ToggleSwitch`
+  - Updated focus indicators to use `:focus-visible`
+- `Stepper`
+  - Corrected props typedefs to allow all native `<input>` attributes.
+- `Sticker`
+  - New component!
+- `Tabs`
+  Corrected a keyboard navigation bug when using `'manual'` activation mode.
+- `TextArea`
+  - Added `autoHeight` prop, which causes the `<textarea>` element to grow (or shrink) to fit its content as the user types.
+- `TextArea`, `TextField`
+  - Adjusted wrapping behavior of validation messages.
+- `TextLink`
+  - Updated colors and changed hover state to underline.
+
 ## 3.7.0
@@ -5,0 +27,0 @@ - `Stepper`

lib/src/components/Button/Button.d.ts

@@ -6,3 +6,3 @@ import * as React from 'react';
      * Medium- and high-density buttons have less padding in order to fit into tighter spaces.
-     * NOTE: when `kind` is `"lowEmphasis"`, this prop is internally overridden to `"high"`.
+     * NOTE: when `kind` is `"lowEmphasis"` or `"lowEmphasisDark"`, this prop is internally overridden to `"high"`.
      * @default '"low"'
@@ -14,7 +14,6 @@ */
      *
-     * * `"outline"` should be used for most buttons
+     * * `"outline"` should be used for most buttons, `"outlineDark"` when used on dark background colors
      * * `"primary"` should be used to indicate the primary action when there are multiple buttons displayed together
      * * `"destructive"` should be used for buttons which cause a destructive action, e.g. "Delete"
-     * * `"outlineDark"` should be used on dark background colors
-     * * `"lowEmphasis"` should be used to indicate low-importance
+     * * `"lowEmphasis"` should be used to indicate low-importance, `"lowEmphasisDark"` when used on dark background colors
      *
@@ -29,3 +28,3 @@ * The following prior styles are deprecated:
      */
-    kind?: 'outline' | 'primary' | 'destructive' | 'outlineDark' | 'lowEmphasis' | 'attentionRed' | 'blackText' | 'filled' | 'filledGreen';
+    kind?: 'outline' | 'primary' | 'destructive' | 'outlineDark' | 'lowEmphasis' | 'lowEmphasisDark' | 'attentionRed' | 'blackText' | 'filled' | 'filledGreen';
 }
@@ -32,0 +31,0 @@ export declare type ButtonKind = NonNullable<ButtonProps['kind']>;

lib/src/components/Spinner/Spinner.d.ts

 import * as React from 'react';
-import { DivAttrs } from '../../utils/NativeProps';
 export interface SpinnerProps {
@@ -30,2 +29,2 @@ /** `alt` HTML attribute for the internal image element. */
  */
-export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & DivAttrs & React.RefAttributes<HTMLDivElement>>;
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & import("../../utils/NativeProps").ElemAttrs<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

lib/src/components/Stepper/Stepper.d.ts

@@ -59,3 +59,3 @@ import * as React from 'react';
  */
-export declare class Stepper extends React.Component<StepperProps & Omit<InputAttrs, 'value'>, StepperState> {
+export declare class Stepper extends React.Component<StepperProps & Omit<InputAttrs, keyof StepperProps>, StepperState> {
     private inputElement;
@@ -62,0 +62,0 @@ private inputId;

lib/src/components/Tabs/Tabs.d.ts

@@ -57,5 +57,7 @@ import * as React from 'react';
 export declare class Tabs extends React.PureComponent<TabsProps & DivAttrs, TabsState> {
+    private tablistRef;
     private id;
     static defaultProps: Pick<TabsProps, 'activation' | 'alignment' | 'selectedTabIndex' | 'tabs'>;
     state: TabsState;
+    componentDidUpdate(prevProps: TabsProps, prevState: TabsState): void;
     private triggerTabChange;
@@ -65,3 +67,2 @@ private handleBlur;
     private handleKeyDown;
-    private getNextTabIndexFromKey;
     private handleFocus;
@@ -68,0 +69,0 @@ private setFocusedIndex;

lib/src/components/TextArea/TextArea.d.ts

@@ -5,2 +5,7 @@ import * as React from 'react';
 export interface TextAreaProps extends Omit<LabeledFieldProps, 'labelRef'> {
+    /**
+     * When true, the `<textarea>` will automatically grow or shrink its height to match its content.
+     * Using this prop will override any `height` provided in the `style` prop.
+     */
+    autoHeight?: boolean;
 }
@@ -7,0 +12,0 @@ /**

lib/src/components/ToggleSwitch/ToggleSwitch.d.ts

@@ -11,3 +11,2 @@ import * as React from 'react';
 }
-export declare const FocusVisibleClassName = "focus-visible";
 /**
@@ -14,0 +13,0 @@ * Documented props will be used by this component. All other provided props will be passed to the native `<input>` element.

lib/src/TableauUI.d.ts

@@ -0,1 +1,2 @@
+export { BadgeProps, Badge } from './components/Badge/Badge';
 export { ButtonProps, Button } from './components/Button/Button';
@@ -9,7 +10,9 @@ export { CheckboxProps, Checkbox } from './components/Checkbox/Checkbox';
 export { StepperProps, Stepper } from './components/Stepper/Stepper';
+export { StickerProps, Sticker } from './components/Sticker/Sticker';
 export { TabItem, TabsProps, Tabs } from './components/Tabs/Tabs';
 export { TextAreaProps, TextArea } from './components/TextArea/TextArea';
 export { TextFieldProps, TextField } from './components/TextField/TextField';
+export { TextFieldGroupProps, TextFieldGroup } from './components/TextFieldGroup/TextFieldGroup';
 export { TextLinkProps, TextLink } from './components/TextLink/TextLink';
 export { ToggleSwitchProps, ToggleSwitch } from './components/ToggleSwitch/ToggleSwitch';
 export { forceRenderStyles } from 'typestyle';

lib/src/utils/NativeProps.d.ts

@@ -1,7 +0,8 @@
-/// <reference types="react" />
+import * as React from 'react';
+export declare type ElemAttrs<T = HTMLElement> = React.HTMLAttributes<T>;
 export declare type AnchorAttrs = React.AnchorHTMLAttributes<HTMLAnchorElement>;
 export declare type ButtonAttrs = React.ButtonHTMLAttributes<HTMLButtonElement>;
-export declare type DivAttrs = React.HTMLAttributes<HTMLDivElement>;
+export declare type DivAttrs = ElemAttrs<HTMLDivElement>;
 export declare type InputAttrs = React.InputHTMLAttributes<HTMLInputElement>;
 export declare type SelectAttrs = React.SelectHTMLAttributes<HTMLSelectElement>;
 export declare type TextAreaAttrs = React.TextareaHTMLAttributes<HTMLTextAreaElement>;

package.json

 {
   "name": "@tableau/tableau-ui",
   "description": "React UI components that have the look-and-feel of Tableau.",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "main": "./dist/tableau-ui.min.js",
@@ -6,0 +6,0 @@ "typings": "./lib/src/TableauUI.d.ts",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

112637

increased by12.21%

Number of package files

25

increased by13.64%

Lines of code

829

increased by13.87%

No dependency changes