palantir/blueprint release-1.25.0

v1.25.0

on GitHub

🎆 Highlights: new Popover2/Tooltip2 components in labs, TagInput gets 5 new props, Table now supports frozen/sticky columns/rows, new Icon component, new IconName typings

📖 Latest docs: blueprintjs.com/docs

General

• 😭 This is my (@giladgray) last release as the Blueprint lead. I'm moving on to other frontend projects inside Palantir, but I'll always be connected to Blueprint (and just an at-mention away), and I may very well be back in a few months!

@blueprintjs/core 1.25.0

💎 New features

• #1427 🌟 Icon component is the CSS shorthand you've always dreamed of:

  private maybeRenderLeftIcon() {		
  -    const { leftIconName } = this.props;		
  -    if (leftIconName == null) {		
  -        return undefined;		
  -    }		
  -    const iconClass = Classes.iconClass(leftIconName);		
  -    return <span className={classNames(Classes.ICON_LARGE, iconClass)} />;		
  +    return <Icon iconName={leftIconName} iconSize={20} />
  }

  • We've also added typings for iconName throughout the library with a new string literal union type, IconName, that includes every short and long icon: add and pt-icon-add. you know what this means: editor autocomplete 😱
  • ⚠️ In introducing this new IconName type, we've done our best to ensure compatibility with existing use cases (it supports both short and long names, for instance), but it is likely that tsc will complain lightly about a few usages in your codebase
    • If your component accepts iconName as a prop to pass to <Icon />, you'll need to change the type from string to IconName

• #1373 🌟 much improving scrolling support for Overlay and centering for Dialog

  • We refactored .pt-overlay CSS to ensure that it sets the correct position at all times, whether inline or scrollable
  • Dialog component now renders a .pt-dialog-container wrapper as its root element which centers the .pt-dialog in a viewport-covering flex container. This provides super reliable centering behavior (#552) and much improved scrolling support (#1313) (though some issues are still present like #1008)
    • ⚠️ If you're rendering the .pt-dialog markup by hand, you may want to add the .pt-dialog-container parent element for perfect screen centering (and probably remove any custom styles you had); see the CSS API markup in the docs
    • ⚠️ If you're using the Dialog component, the new container element will be added automatically and you can likely remove any custom positioning styles you've written

🐛 Bug fixes

• #1421 Remove small font-size from small buttons to improve legibility and fix icon centering
  
• #1434 Move $output-bourbon-deprecation-warnings variable to _variables.scss to globally disable Bourbon's deprecation warnings in any package that imports Blueprint Sass code

@blueprintjs/datetime 1.20.0

🐛 Bug fixes

• #1429 Pass locale to moment() for parsing and formatting
• #1424 Speed up the test suite by a full 30 seconds!

@blueprintjs/table 1.22.0

• #1445 🌟 Table now supports frozen/sticky columns and rows! Use the numFrozenColumns and numFrozenRows props and you're set.
  

@blueprintjs/labs 0.6.0

💎 New features

• #1364 🌟 Popover2 uses a new positioning engine that resolves our "smart positioning" bugs
  

  • Popper.js is a massive improvement over Tether in almost every way!
    • all the fancy flipping behavior you could want enabled by default
    • endlessly customizable if it isn't perfect enough for you
    • look, it puts the arrow exactly where it's supposed to be. every time. what more could a blueprint dev want??
  • All the classic Popover features are still supported with the same names except...
    • 🔥 isModal → hasBackdrop to match corresponding prop on Overlay
    • 🔥 isDisabled → disabled for consistency with HTML elements
  • ...and the handful of Tether-specific props are now Popper.js-specific:
    • 🔥 position: Position → placement: PopperJS.Placement
    • 🔥 tetherOptions: ITetherOptions → modifiers: PopperJS.Modifiers
  • ...and one special addition:
    • minimal: boolean applies minimal styles, which includes removing the arrow and minimizing the transition
  • This new iteration of the Popover API will live in labs until our eventual 2.0 release, when it will be merged into core and will replace Tether entirely

• #1438 🌟 Tooltip2 exposes the same API as Tooltip but is backed by Popover2 (and has the same API changes noted above)

• #1418, #1419, #1420 🌟 TagInput gets a lot of love this week!
  

  • new separator prop allows adding multiple values at once
  • new onChange callback prop handles onAdd and onRemove array manipulation for you. great for simple use cases!
  • new placeholder prop disappears when values is not empty, like an input placeholder normally does
  • new leftIconName and rightElement props work exactly like InputGroup (with new IconName typings!)
  • values accepts any valid JSX, from strings to elements to fragments!
    • #1432 falsy values are ignored appropriately, like normal JSX
  • 🔥 API BREAK: onAdd now receives string[] instead of single string

    - private handleAdd = (value: string) => this.setState([...this.state.values, value])
    + private handleAdd = (values: string[]) => this.setState([...this.state.values, ...values])

🐛 Bug fixes

• #1403 QueryList onKeyDown is invoked for all keys (🎩 @paulpooch)
• #1422 MultiSelect placeholder can be overridden through inputProps.placeholder (🎩 @sushain97)

Documentation

• "Tabs 2.0" section has been renamed to "Tabs2" to match the component name