React-Blueprint @blueprintjs/[email protected]: A React-based UI toolkit for the web

icon
Latest Release: @blueprintjs/[email protected]
  • #2564 TimezonePicker performance optimization significantly reduces time to compute timezone items.
Source code(tar.gz)
Source code(zip)

Blueprint CircleCI

Blueprint is a React-based UI toolkit for the web.

It is optimized for building complex, data-dense web interfaces for desktop applications which run in modern browsers and IE11. This is not a mobile-first UI toolkit.

Read the introductory blog post ▸

View the full documentation ▸

Try it out on CodeSandbox ▸

Read frequently asked questions (FAQ) on the wiki ▸

Changelog

Blueprint's change log and migration guides for major verions live on the repo's Github wiki.

Packages

This repository contains multiple projects in the packages/ directory that fall into 3 categories:

Libraries

These are the component libraries we publish to NPM.

  • npm – Core styles & components.
  • npm – Components for interacting with dates and times.
  • npm – Components for generating and displaying icons.
  • npm – Components for selecting items from a list.
  • npm – Scalable interactive table component.
  • npm – Components for picking timezones.

Applications

These are hosted on GitHub Pages as static web applications:

  • docs-app – Documentation site at blueprintjs.com/docs
  • landing-app – Landing page at blueprintjs.com

These are used as development playground environments:

  • table-dev-app – demo page that supports manual testing of all table features

Build tooling

These packages define development dependencies and contain build configuration. They adhere to the standard NPM package layout, which allows us to keep clear API boundaries for build configuration and isolate groups of devDependencies. They are published to NPM in order to allow other Blueprint-related projects to use this infrastructure outside this monorepo.

  • npm – Documentation theme for Documentalist data.
  • npm – ESLint configuration used in this repo and recommended for Blueprint-related projects
  • npm – implementations for custom ESLint rules which enforce best practices for Blueprint usage
  • npm
  • npm – various utility scripts for linting, working with CSS variables, and building icons
  • npm – various utility functions used in Blueprint test suites
  • npm – TSLint configuration used in this repo and recommended for Blueprint-related projects (should be installed by @blueprintjs/eslint-config, not directly)
  • npm

Contributing

Looking for places to contribute to the codebase? First read the contribution guidelines, then check out the "help wanted" label.

Development

Lerna manages inter-package dependencies in this monorepo. Builds are orchestrated via lerna run and NPM scripts.

Prerequisites: Node.js v10+, Yarn v1.18+

One-time setup

After cloning this repo, run:

  1. yarn to install all dependencies.
  2. If running on Windows:
    1. npm install -g windows-build-tools to install build tools globally
    2. Ensure bash is your configured script-shell by running:
      npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"
  3. yarn verify to ensure you have all the build tooling working properly.

Incorporating upstream changes

If you were previously in a working state and have just pulled new code from develop:

  • If there were package dependency changes, run yarn at the root.
    • This command is very quick if there are no new things to install.
  • Run yarn compile to get the latest built versions of the library packages in this repo.
    • This command is quicker than yarn verify since it doesn't build the application packages (docs-app, landing-app, etc.) or run tests

Developing libraries

Run yarn dev from the root directory to watch changes across all packages and run the docs application with webpack-dev-server.

Alternately, each library has its own dev script to run the docs app and watch changes to just that package (and its dependencies): yarn dev:core, yarn dev:datetime, etc. One exception is table: since it has its own dev application, the dev:table script runs table-dev-app instead of the docs.

Updating documentation

Much of Blueprint's documentation lives inside source code as JSDoc comments in .tsx files and KSS markup in .scss files. This documentation is extracted and converted into static JSON data using documentalist.

If you are updating documentation sources (not the docs UI code which lives in packages/docs-app or the docs theme in packages/docs-theme), you'll need to run yarn compile from packages/docs-data to see changes reflected in the application. For simplicity, an alias script yarn docs-data exists in the root to minimize directory hopping.

Updating icons

The One-time setup and Incorporating upstream changes steps should produce the generated source code in this repo used to build the icons documentation. This is sufficient for most development workflows.

If you are updating icons or adding new ones, you'll need to run yarn compile in packages/icons to see those changes reflected before running any of the dev scripts.

License

This project is made available under the Apache 2.0 License.

Comments

  • Why need checking `matchesPredicate` in `renderFilm` example
    Why need checking `matchesPredicate` in `renderFilm` example

    Jan 11, 2022

    In packages/docs-app/src/common/films.tsx:

    export const renderFilm: ItemRenderer<IFilm> = (film, { handleClick, modifiers, query }) => {
        if (!modifiers.matchesPredicate) {
            return null;
        }
        const text = `${film.rank}. ${film.title}`;
        return (
            <MenuItem
                active={modifiers.active}
                disabled={modifiers.disabled}
                label={film.year.toString()}
                key={film.rank}
                onClick={handleClick}
                text={highlightText(text, query)}
            />
        );
    };
    

    In the official documentation above, itemRenderer checks matchesPredicate.

    But in the implementation of the Select component, the filteredItems passed to the itemRenderer are already filteredItems, why check it in the itemRenderer?

    Reply
  • Trigger hotkey only when target is hovered
    Trigger hotkey only when target is hovered

    Jan 13, 2022

    Environment

    • Package version(s): 4.0.0-beta.12
    • Browser and OS versions: irrelevant

    Feature request

    Setting global: false for a given hotkey allows to enable event only when target is focused. I would like to like to have the same behaviour available for hovering (ie hotkey works if and only if target is hovered).

    Examples

    I am building an interface with a lot of panes. All panes have the same hotkey combos, but these combos trigger different callbacks depending on the pane. Navigation would be much more fluid if users didn't have to click on a pane for it to become active and then use hotkeys.

    Reply
  • chore(deps): bump marked from 1.2.5 to 4.0.10
    chore(deps): bump marked from 1.2.5 to 4.0.10

    Jan 14, 2022

    Bumps marked from 1.2.5 to 4.0.10.

    Release notes

    Sourced from marked's releases.

    v4.0.10

    4.0.10 (2022-01-13)

    Bug Fixes

    • security: fix redos vulnerabilities (8f80657)

    v4.0.9

    4.0.9 (2022-01-06)

    Bug Fixes

    v4.0.8

    4.0.8 (2021-12-19)

    Bug Fixes

    v4.0.7

    4.0.7 (2021-12-09)

    Bug Fixes

    v4.0.6

    4.0.6 (2021-12-02)

    Bug Fixes

    v4.0.5

    4.0.5 (2021-11-25)

    Bug Fixes

    • table after paragraph without blank line (#2298) (5714212)

    v4.0.4

    4.0.4 (2021-11-19)

    ... (truncated)

    Commits
    • ae01170 chore(release): 4.0.10 [skip ci]
    • fceda57 🗜️ build [skip ci]
    • 8f80657 fix(security): fix redos vulnerabilities
    • c4a3ccd Merge pull request from GHSA-rrrm-qjm4-v8hf
    • d7212a6 chore(deps-dev): Bump jasmine from 4.0.0 to 4.0.1 (#2352)
    • 5a84db5 chore(deps-dev): Bump rollup from 2.62.0 to 2.63.0 (#2350)
    • 2bc67a5 chore(deps-dev): Bump markdown-it from 12.3.0 to 12.3.2 (#2351)
    • 98996b8 chore(deps-dev): Bump @​babel/preset-env from 7.16.5 to 7.16.7 (#2353)
    • ebc2c95 chore(deps-dev): Bump highlight.js from 11.3.1 to 11.4.0 (#2354)
    • e5171a9 chore(release): 4.0.9 [skip ci]
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • chore(deps): bump shelljs from 0.8.4 to 0.8.5
    chore(deps): bump shelljs from 0.8.4 to 0.8.5

    Jan 14, 2022

    Bumps shelljs from 0.8.4 to 0.8.5.

    Release notes

    Sourced from shelljs's releases.

    v0.8.5

    This was a small security fix for #1058.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • @blueprintjs/icons 4.0.0-beta does not support IE11
    @blueprintjs/icons 4.0.0-beta does not support IE11

    Jan 15, 2022

    Environment

    • Package version(s): @blueprintjs/[email protected]
    • Operating System: macOS
    • Browser name and version: IE11

    It looks like the Object.values(...) call in @blueprintjs/icons isn't getting transpiled before publishing.

    https://github.com/palantir/blueprint/blob/4dac1637138f850d51e08a1f7e46a5897abcbacc/packages/icons/src/iconNames.ts#L31

    Here's the contents of node_modules/.pnpm/@[email protected]beta.6/node_modules/@blueprintjs/icons/lib/esm/iconNames.js without the copyright header.

    import { __assign } from "tslib";
    /* eslint-disable camelcase */
    import { pascalCase, snakeCase } from "change-case";
    import { BlueprintIcons_16 } from "./generated/16px/blueprint-icons-16";
    var IconNamesNew = {};
    var IconNamesLegacy = {};
    for (var _i = 0, _a = Object.values(BlueprintIcons_16); _i < _a.length; _i++) {
        var name_1 = _a[_i];
        IconNamesNew[pascalCase(name_1)] = name_1;
        IconNamesLegacy[snakeCase(name_1).toUpperCase()] = name_1;
    }
    export var IconNames = __assign(__assign({}, IconNamesNew), IconNamesLegacy);
    //# sourceMappingURL=iconNames.js.map
    

    Is this expected?

    • Does Blueprint 4.x drop support for IE11? Feel free to close this issue if so, but I wasn't able to find any docs stating so.
    • I'm a bit surprised myself since the "target": "es5" is set here on the next branch: https://github.com/palantir/blueprint/blob/87dd5091551625d4e30365d59b0cd3668ed9df00/config/tsconfig.base.json#L23 The __assign helper is getting applied. Would have expected __values to be imported as well.
    Reply
  • Nested Overlay(s) with `canEscapeKeyClose=true` closes all overlays instead of just the recent opened one
    Nested Overlay(s) with `canEscapeKeyClose=true` closes all overlays instead of just the recent opened one

    Jan 16, 2022

    Environment

    • Package version(s): @blueprintjs/[email protected]
    • Operating System: Arch Linux
    • Browser name and version: Firefox 95.0.2

    Code Sandbox

    Link to a minimal repro: https://codesandbox.io/s/blueprint-sandbox-forked-bztv1

    Steps to reproduce

    1. Create an Element that uses an Overlay (such as Dialog)
    2. Create an second Element that uses an Overlay inside the content of the first one (such as a Popover)
    3. Open the first & second elements
    4. Hit ESC
    5. All overlays (dialogs / popovers) will be closed

    Actual behavior

    All overlays get closed when you hit ESC.

    Expected behavior

    That only the recent opened one gets closed.

    Possible solution

    Prevent bubbeling/propagation of the key event used to implement the close-on-Escape feature; alternatively an new option for overlays could be added, in order to configure the behaviour.

    Type: enhancement P2 help wanted Package: core 
    Reply
  • Table not rendering additional rows if min-height is greater than the current table height
    Table not rendering additional rows if min-height is greater than the current table height

    Jan 18, 2022

    Environment

    • Package version(s): 3.9.13
    • Operating System: MacOS
    • Browser name and version: Chrome 97.0.4692.71

    Code Sandbox

    https://codesandbox.io/s/serverless-snow-4dhos

    Steps to reproduce

    1. Set the min-height on the table to something like 30vh
    2. Start with an empty data set
    3. Add rows one at a time with some external process (for me it was socket.io, the sandbox is just adding them in a loop)

    Actual behavior

    Rows 1 to 6 are displayed as expected, then further rows are not rendered until you click and scroll down with a mouse or until the row height exceeds the min-height css setting

    Expected behavior

    New rows should be rendered regardless of min-height css setting.

    Workaround

    Seems to be fine if min-height css setting is not used and the table must grow in height for each added row.

    Also I don't seem to see this issue if only height css setting is used.

    Reply
  • Typo in Alert error message
    Typo in Alert error message

    Jan 20, 2022

    Environment

    • Package version(s): 3.52
    • Operating System: macOS Monterey 12.0.1
    • Browser name and version: Safari 15.1

    Code Sandbox

    Screen Shot 2022-01-17 at 11 34 43 AM

    Steps to reproduce

    1. Add the Alert Component
    2. Fill in the cancelButtonText prop but do not fill the onCancel or onClose prop
    3. View the error message that pops up

    Actual behavior

    Currently prints

    [Blueprint] <Alert> canOutsideClickCancel enbaled without onCancel or onClose handler.
    

    Expected behavior

    Should print as

    [Blueprint] <Alert> canOutsideClickCancel enabled without onCancel or onClose handler.
    

    Possible solution

    Fix simple typo

    Reply
  • Fix Alert error message
    Fix Alert error message

    Jan 20, 2022

    Fixes #5103

    Checklist

    • [ ] Includes tests
    • [ ] Update documentation

    Changes proposed in this pull request:

    Fix typo enbaled to enabled

    Reviewers should focus on:

    N/A

    Screenshot

    N/A

    Reply
  • chore(deps): bump log4js from 6.3.0 to 6.4.0
    chore(deps): bump log4js from 6.3.0 to 6.4.0

    Jan 21, 2022

    Bumps log4js from 6.3.0 to 6.4.0.

    Changelog

    Sourced from log4js's changelog.

    6.4.0

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Form groups: label + input + helper text
    Form groups: label + input + helper text

    Feb 1, 2017

    Fixes #413

    Checklist

    • [x] Update documentation

    @llorca @thisisalessandro

    Reviewers should focus on:

    • Wording in documentation - is this enough to show the variants of controls that we provide?
    • Class naming

    screen shot 2017-02-01 at 11 35 19

    screen shot 2017-02-01 at 12 01 29

    with .pt-inline

    screen shot 2017-02-01 at 11 37 08

    screen shot 2017-02-01 at 12 01 33

    P0 
    Reply
  • [Table] Support for column and row reordering
    [Table] Support for column and row reordering

    Apr 7, 2017

    Fixes #213

    Checklist

    • [x] Include tests
    • [x] ~Update documentation~ (will add language in a separate PR if we want it)
    • [x] Add new example
    • [x] Fix interaction regression w/ TruncatedPopover

    Changes proposed in this pull request:

    Behold: column and row reordering in Table.

    Basic points:

    • Reordering works only if selection is also enabled. If this assumption is bad, let me know.
    • Reordering is performed by mousing down within a selected column header, then dragging. If reordering is enabled, it is no longer possible to deselect a column by clicking on its header. LMK how that feels; I don't love it yet.
    • You can enable reordering for columns, rows, or both via Table props.
    • You can reorder a single entity or a region of multiple entities (having FULL_COLUMNS or FULL_ROWS cardinality).
    • You CANNOT reorder anything if there are multiple regions selected. It's too much of a pain for a v1 implementation, plus initial feedback suggested that no user will be able to predict what will happen anyway. We can revisit this later if we want.
    • The Table does not handle the actual reordering! It simply emits (oldIndex, newIndex, length) and lets the caller pass in updated data.

    Reviewers should focus on:

    • High-level architecture. Does it look reasonable?
    • One thing that felt a little gross was the introduction of a "reordering cursor overlay" that displays invisibly over the whole table while you're dragging to reorder. I couldn't think of a better way to guarantee that the cursor would appear as grabbing no matter where your mouse moved during the drag. LMK what you think.

    Screenshot

    2017-04-07 12 38 28

    Reply
  • SVG Icons!
    SVG Icons!

    Jan 23, 2018

    Fixes #365

    Checklist

    • [x] 🔥 Update documentation
    • [x] how to handle the CSS API now?
      • Buttons, all the way down
      • Input Group CSS API examples
    • [x] improve example
    • [x] Callout still uses icon classes because it relies on ::before and position trickery
      • ~~can't resolve this without an API break~~ totally did it #2060
    • [x] MenuItem icon color

    Changes proposed in this pull request:

    • generate-icons-source script now generates iconSvgPaths.tsx file with export const IconSvgPaths{16,20}: Record<IconName, string[]> where value is array of <path d="..." /> strings
    • 🔥 IconName only includes short names. LegacyIconName extends it with long names.
      • I made this change for the Record type above to support indexing
      • open to a less-breaking approach, but i'd also love to drop support for the long names.
    • 🔥 core Icon component now renders SVG content instead of span.pt-icon...
      • removed iconSize prop, replaced with width/height. this isn't totally ideal, I could use some help figuring out the ideal API here.

    Reviewers should focus on:

    • [x] what to do with the CSS icon API?
    • [x] how to support 16px / 20px switch?

    Follow-up work

    • 🔥 refactor iconName?: IconName prop ⇒ icon?: IconName | JSX.Element? #2067
      • bunch of breaking changes here
      • necessary to support custom SVG icon components
    • 🔥 IconName or LegacyIconName #2066
      • can we drop support for the long names pt-icon-time?
    • download links in Icons list should use large icon for 20px download. requires #2066 so I can pass <Icon iconSize={20} ... /> in that case
    Type: breaking change 
    Reply
  • @HotkeysTarget TypeError: class constructors must be invoked with |new|
    @HotkeysTarget TypeError: class constructors must be invoked with |new|

    Jun 16, 2019

    Environment

    • Package version(s): "@blueprintjs/core": "^3.15.1", "typescript": "3.5.1"
    • Browser and OS versions: Ubuntu 18.04, FireFox 67.0.2

    Steps to reproduce

    import { Hotkey, Hotkeys, HotkeysTarget } from "@blueprintjs/core";
    @HotkeysTarget
    export class MyComponent extends React.PureComponent<{}> {
         public render () { return <div>Hello there</div> };
         public renderHotkeys() {
            return <Hotkeys>
                <Hotkey
                    combo="up"
                    label="Up"
                    onKeyDown={() => { alert('Need to go up'); } }
                />
            </Hotkeys>;
        }    
    }
    

    Actual behavior

    The component cannot be rendered. I get an error that starts with this:

    
    TypeError: class constructors must be invoked with |new|
    HotkeysTargetClass
    node_modules/@blueprintjs/core/lib/esm/components/hotkeys/hotkeysTarget.js:32
    
      29 | tslib_1.__extends(HotkeysTargetClass, _super);
      30 | 
      31 | function HotkeysTargetClass() {
    > 32 |   return _super !== null && _super.apply(this, arguments) || this;
         | ^  33 | }
      34 | 
      35 | HotkeysTargetClass.prototype.componentWillMount = function () {
    
    

    Full traceback available, but probably not needed.

    Expected behavior

    The component should be rendered and the hotkey should be working.

    Type: bug Domain: tooling Package: core 
    Reply
  • TypeError: moment is not a function
    TypeError: moment is not a function

    Apr 6, 2017

    It seems that [email protected] exports moment as a function by default but it's being imported with the syntax import * as moment from 'moment', yet this file https://github.com/palantir/blueprint/blob/master/packages/datetime/src/common/dateUtils.ts #calls moment as a function in multiple places, which leads to this error. Has anyone seen this or been able to reproduce? Might be missing something here...

    Also obligatory shoutout for the awesome lib, thanks for all your hard work.

    Bug report

    • Package version(s): 1.14
    • Browser and OS versions: OSX El Capitan

    Steps to reproduce

    1. Import DateRangeInput and pass in valid dates

    Actual behavior

    TypeError: moment is not a function is thrown

    Expected behavior

    Should not throw an error.

    Type: question Package: datetime 
    Reply
  • [Core] Add overflow list component
    [Core] Add overflow list component

    May 22, 2018

    This is good stuff. Check it out. No tests or documentation yet, just an example.

    Reply
  • Add Text component with overflow ellipsis behavior
    Add Text component with overflow ellipsis behavior

    Mar 3, 2017

    Fixes https://github.com/palantir/blueprint/issues/765

    Checklist

    Reply
  • Support for client-side routing on href props
    Support for client-side routing on href props

    Nov 16, 2016

    Many components (such as Menu) can take an href prop. This prop maps to the href value of an <a> tag. For many react projects that use client-side routing, anchor tags are replaced by <Link> (e.g. in react-router) components that ensure the routing happens client-side.

    If the <Link> component is placed inside the text prop, everything behaves as expected, but React throws a warning for having nested <a> tags.

    Perhaps we could supply our own component to be used in place of the <a> tag in these situations.

    Type: enhancement Status: needs proposal P2 Package: core 
    Reply
  • First-class support for @import'ing blueprint scss files
    First-class support for @import'ing blueprint scss files

    Nov 12, 2016

    Given this import:

    @import "node_modules/@blueprintjs/core/src/blueprint.scss";
    

    Webpack is throwing an error

    ERROR in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./src/styles/app.scss
    Module build failed: 
    @import "../node_modules/bourbon/app/assets/stylesheets/bourbon";
    ^
          File to import not found or unreadable: ../node_modules/bourbon/app/assets/stylesheets/bourbon
    Parent style sheet: /Users/dave/www/portalv3/node_modules/@blueprintjs/core/src/common/_font-imports.scss
          in /Users/dave/www/portalv3/node_modules/@blueprintjs/core/src/common/_font-imports.scss (line 4, column 1)
    ...
    

    The path to ../node_modules/bourbon/app/assets/stylesheets/bourbon is invalid, as bourbon isn't installed as a dependency because it's listed under devDependencies. Is this library not intended to allow users to override the variables?

    Type: enhancement Domain: documentation Resolution: fixed P1 Package: core 
    Reply
  • [Sketch] provide Symbols for components
    [Sketch] provide Symbols for components

    Aug 17, 2018

    Continuing from #2668.
    Sketch file does not represent UI as symbols. Symbols in Sketch are like components in React.

    Imagine if controls in Blueprint were developed as functions in one monolithic javascript file. Then in order to use a component the developer had to open a large javascript file, copy relevant code and paste into their application.

    Domain: design 
    Reply