rename Omnibox -> Omnibar

packages/docs-app/src/examples/labs-examples/index.ts

@@ -5,7 +5,7 @@
  */
 
 export * from "./multiSelectExample";
-export * from "./omniboxExample";
+export * from "./omnibarExample";
 export * from "./popover2Example";
 export * from "./selectExample";
 export * from "./suggestExample";

packages/docs-app/src/examples/labs-examples/omniboxExample.tsx → packages/docs-app/src/examples/labs-examples/omnibarExample.tsx

@@ -19,19 +19,19 @@ import {
     Toaster,
 } from "@blueprintjs/core";
 import { BaseExample, handleBooleanChange } from "@blueprintjs/docs";
-import { ISelectItemRendererProps, Omnibox } from "@blueprintjs/labs";
+import { ISelectItemRendererProps, Omnibar } from "@blueprintjs/labs";
 import { Film, TOP_100_FILMS } from "./data";
 
-const FilmOmnibox = Omnibox.ofType<Film>();
+const FilmOmnibar = Omnibar.ofType<Film>();
 
-export interface IOmniboxExampleState {
+export interface IOmnibarExampleState {
     isOpen: boolean;
     resetOnSelect: boolean;
 }
 
 @HotkeysTarget
-export class OmniboxExample extends BaseExample<IOmniboxExampleState> {
-    public state: IOmniboxExampleState = {
+export class OmnibarExample extends BaseExample<IOmnibarExampleState> {
+    public state: IOmnibarExampleState = {
         isOpen: false,
         resetOnSelect: true,
     };
@@ -50,7 +50,7 @@ export class OmniboxExample extends BaseExample<IOmniboxExampleState> {
                     allowInInput={true}
                     global={true}
                     combo="meta + k"
-                    label="Show Omnibox"
+                    label="Show Omnibar"
                     onKeyDown={this.handleToggle}
                 />
             </Hotkeys>
@@ -60,7 +60,7 @@ export class OmniboxExample extends BaseExample<IOmniboxExampleState> {
     protected renderExample() {
         return (
             <div>
-                <FilmOmnibox
+                <FilmOmnibar
                     {...this.state}
                     items={TOP_100_FILMS}
                     itemPredicate={this.filterFilm}
@@ -72,7 +72,7 @@ export class OmniboxExample extends BaseExample<IOmniboxExampleState> {
                 />
                 <Toaster position={Position.TOP} ref={this.refHandlers.toaster} />
                 <span>
-                    <Button text="Click to show Omnibox" onClick={this.handleClick} />
+                    <Button text="Click to show Omnibar" onClick={this.handleClick} />
                     {" or press "}
                     <span className="pt-key-combo">
                         <kbd className="pt-key pt-modifier-key">

packages/labs/src/common/classes.ts

@@ -7,8 +7,8 @@
 export const INPUT_GHOST = "pt-input-ghost";
 export const MULTISELECT = "pt-multi-select";
 export const MULTISELECT_POPOVER = `${MULTISELECT}-popover`;
-export const OMNIBOX = "pt-omnibox";
-export const OMNIBOX_OVERLAY = `${OMNIBOX}-overlay`;
+export const OMNIBAR = "pt-omnibar";
+export const OMNIBAR_OVERLAY = `${OMNIBAR}-overlay`;
 export const SELECT = "pt-select";
 export const SELECT_POPOVER = `${SELECT}-popover`;
 export const TAG_INPUT = "pt-tag-input";

packages/labs/src/components/_index.scss

@@ -3,7 +3,7 @@
 // Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-@import "omnibox/omnibox";
+@import "omnibar/omnibar";
 @import "select/multi-select";
 @import "select/select";
 @import "tag-input/tag-input";

packages/labs/src/components/index.ts

@@ -4,7 +4,7 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-export * from "./omnibox/omnibox";
+export * from "./omnibar/omnibar";
 export * from "./popover/popover2";
 export * from "./tooltip/tooltip2";
 export * from "./query-list/queryList";

packages/labs/src/components/omnibox/_omnibox.scss → packages/labs/src/components/omnibar/_omnibar.scss

@@ -6,30 +6,30 @@
 @import "~@blueprintjs/core/src/common/react-transition";
 @import "~@blueprintjs/core/src/common/variables";
 
-$omnibox-height: 60vh !default;
-$omnibox-width: $pt-grid-size * 50 !default;
-$omnibox-input-height: $pt-grid-size * 4;
+$omnibar-height: 60vh !default;
+$omnibar-width: $pt-grid-size * 50 !default;
+$omnibar-input-height: $pt-grid-size * 4;
 
-.pt-omnibox {
-  $omnibox-transition-props: (
+.pt-omnibar {
+  $omnibar-transition-props: (
     filter: (blur($pt-grid-size * 2), blur(0)),
     opacity: (0.2, 1),
   );
 
   @include react-transition(
     "pt-overlay",
-    $omnibox-transition-props,
+    $omnibar-transition-props,
     $duration: $pt-transition-duration * 2,
     $easing: $pt-transition-ease,
     $before: "&"
   );
-  top: (100 - $omnibox-height) / 2;
-  left: calc(50% - #{$omnibox-width / 2});
+  top: (100 - $omnibar-height) / 2;
+  left: calc(50% - #{$omnibar-width / 2});
   z-index: $pt-z-index-overlay + 1;
   border-radius: $pt-border-radius;
   box-shadow: $pt-elevation-shadow-4;
   background-color: $white;
-  width: $omnibox-width;
+  width: $omnibar-width;
 
   .pt-input {
     border-radius: 0;
@@ -45,7 +45,7 @@ $omnibox-input-height: $pt-grid-size * 4;
     border-radius: 0;
     box-shadow: inset 0 1px 0 $pt-divider-black;
     background-color: transparent;
-    max-height: calc(#{$omnibox-height} - #{$omnibox-input-height});
+    max-height: calc(#{$omnibar-height} - #{$omnibar-input-height});
     overflow: auto;
   }
 
@@ -56,6 +56,6 @@ $omnibox-input-height: $pt-grid-size * 4;
   }
 }
 
-.pt-omnibox-overlay .pt-overlay-backdrop {
+.pt-omnibar-overlay .pt-overlay-backdrop {
   background-color: rgba($black, 0.2);
 }

packages/labs/src/components/omnibox/omnibox.md → packages/labs/src/components/omnibar/omnibar.md

@@ -1,8 +1,8 @@
-@# Omnibox
+@# Omnibar
 
-`Omnibox<T>` is a macOS Spotlight-style typeahead component composing `Overlay` and `QueryList<T>`. Usage is similar to `Select<T>`: provide your items and a predicate to customize the filtering algorithm. The component is fully controlled via the `isOpen` prop, which means you can decide exactly how to trigger the component. The following example responds to a button and a hotkey.
+`Omnibar<T>` is a macOS Spotlight-style typeahead component composing `Overlay` and `QueryList<T>`. Usage is similar to `Select<T>`: provide your items and a predicate to customize the filtering algorithm. The component is fully controlled via the `isOpen` prop, which means you can decide exactly how to trigger the component. The following example responds to a button and a hotkey.
 
-@reactExample OmniboxExample
+@reactExample OmnibarExample
 
-@interface IOmniboxProps
+@interface IOmnibarProps
 

packages/labs/src/components/omnibox/omnibox.tsx → packages/labs/src/components/omnibar/omnibar.tsx

@@ -25,7 +25,7 @@ import * as Classes from "../../common/classes";
 import { IListItemsProps, IQueryListRendererProps, QueryList } from "../query-list/queryList";
 import { ISelectItemRendererProps } from "../select/select";
 
-export interface IOmniboxProps<T> extends IListItemsProps<T> {
+export interface IOmnibarProps<T> extends IListItemsProps<T> {
     /**
      * React child to render when query is empty.
      */
@@ -49,7 +49,7 @@ export interface IOmniboxProps<T> extends IListItemsProps<T> {
     inputProps?: IInputGroupProps & HTMLInputProps;
 
     /**
-     * Toggles the visibility of the omnibox.
+     * Toggles the visibility of the omnibar.
      * This prop is required because the component is controlled.
      */
     isOpen: boolean;
@@ -75,20 +75,20 @@ export interface IOmniboxProps<T> extends IListItemsProps<T> {
     resetOnSelect?: boolean;
 }
 
-export interface IOmniboxState<T> extends IOverlayableProps, IBackdropProps {
+export interface IOmnibarState<T> extends IOverlayableProps, IBackdropProps {
     activeItem?: T;
     query?: string;
 }
 
 @PureRender
-export class Omnibox<T> extends React.Component<IOmniboxProps<T>, IOmniboxState<T>> {
-    public static displayName = "Blueprint.Omnibox";
+export class Omnibar<T> extends React.Component<IOmnibarProps<T>, IOmnibarState<T>> {
+    public static displayName = "Blueprint.Omnibar";
 
     public static ofType<T>() {
-        return (Omnibox as any) as new () => Omnibox<T>;
+        return (Omnibar as any) as new () => Omnibar<T>;
     }
 
-    public state: IOmniboxState<T> = {
+    public state: IOmnibarState<T> = {
         query: "",
     };
 
@@ -115,7 +115,7 @@ export class Omnibox<T> extends React.Component<IOmniboxProps<T>, IOmniboxState<
         );
     }
 
-    public componentWillReceiveProps(nextProps: IOmniboxProps<T>) {
+    public componentWillReceiveProps(nextProps: IOmnibarProps<T>) {
         const { isOpen } = nextProps;
         const canClearQuery = !this.props.isOpen && isOpen && this.props.resetOnSelect;
 
@@ -136,10 +136,10 @@ export class Omnibox<T> extends React.Component<IOmniboxProps<T>, IOmniboxState<
                 hasBackdrop={true}
                 {...overlayProps}
                 isOpen={isOpen}
-                className={classNames(overlayProps.className, Classes.OMNIBOX_OVERLAY)}
+                className={classNames(overlayProps.className, Classes.OMNIBAR_OVERLAY)}
                 onClose={this.handleOverlayClose}
             >
-                <div className={classNames(listProps.className, Classes.OMNIBOX)} {...handlers}>
+                <div className={classNames(listProps.className, Classes.OMNIBAR)} {...handlers}>
                     <InputGroup
                         autoFocus={true}
                         className={CoreClasses.LARGE}

packages/labs/src/index.md

@@ -15,7 +15,7 @@ reference: labs
 
 - [`MultiSelect`](#labs/multi-select) for selecting multiple items in a list.
 
-- [`Omnibox`](#labs/omnibox) is a macOS spotlight-style typeahead component.
+- [`Omnibar`](#labs/omnibar) is a macOS spotlight-style typeahead component.
 
 - [`QueryList`](#labs/query-list) is a higher-order component that provides interactions between a query string and a list of items.
 
@@ -30,7 +30,7 @@ reference: labs
 @page select-component
 @page suggest
 @page multi-select
-@page omnibox
+@page omnibar
 @page query-list
 @page tag-input
 @page popover2