Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: remove some deprecated code, update docs to say v5.x instead of v5.0 #6459

Merged
merged 1 commit into from
Oct 12, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 1 addition & 12 deletions packages/core/src/components/popover/popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -645,18 +645,7 @@ export class Popover<

// an OVERRIDE inside a DISMISS does not dismiss, and a DISMISS inside an OVERRIDE will dismiss.
const dismissElement = eventTarget.closest(`.${Classes.POPOVER_DISMISS}, .${Classes.POPOVER_DISMISS_OVERRIDE}`);
// dismiss selectors from the "V1" version of Popover in the core package
// we expect these to be rendered by MenuItem, which at this point has no knowledge of Popover
// this can be removed once Popover is merged into core in v5.0
const dismissElementV1 = eventTarget.closest(
`.${Classes.POPOVER_DISMISS}, .${Classes.POPOVER_DISMISS_OVERRIDE}`,
);

const shouldDismiss =
dismissElement?.classList.contains(Classes.POPOVER_DISMISS) ??
dismissElementV1?.classList.contains(Classes.POPOVER_DISMISS) ??
false;

const shouldDismiss = dismissElement?.classList.contains(Classes.POPOVER_DISMISS) ?? false;
const isDisabled = eventTarget.closest(`:disabled, .${Classes.DISABLED}`) != null;

if (shouldDismiss && !isDisabled && (!isEventPopoverCapturing || isEventFromSelf)) {
Expand Down
29 changes: 16 additions & 13 deletions packages/datetime2/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,21 @@

Blueprint is a React UI toolkit for the web.

This package contains re-exports of some components from @blueprintjs/datetime v5.x. These "V2" APIs are backwards-compatible with @blueprintjs/datetime2 v0.x. Once you upgrade to Blueprint v5.0, you should migrate your
imports to reference @blueprintjs/datetime instead:

```diff
- import { DateInput2 } from "@blueprintjs/datetime2";
+ import { DateInput } from "@blueprintjs/datetime";
```

This package also contains next-generation "V3" components which support react-day-picker v8. This means that
installing @blueprintjs/datetime2 will install multiple versions of react-day-picker (v7.x via @blueprintjs/datetime
and v8.x as a direct dependency). Note that these two copies of react-day-picker can happily exist together in a single
JS bundle, and with the help of tree-shaking, you can avoid bundling both if you _only_ use the deprecated "V1" / "V2"
datetime components or _only_ use the new "V3" APIs.
This package contains next-generation components for interacting with dates & times.

Compared to the "V1" components in @blueprintjs/datetime, the "V3" components in this package:

- use [react-day-picker](https://react-day-picker.js.org/) v8 instead of v7 (this unblocks React 18 compatibility)
- are easier to internationalize & localize since date-fns is now a dependency (instead of `localeUtils`, you can specify a locale code and we'll automatically load the date-fns locale object)

This package also contains legacy APIs which are re-exported aliases for components from @blueprintjs/datetime v5.x.
These "V2" names are backwards-compatible with @blueprintjs/datetime2 v0.x.

To migrate to the latest "V3" components, follow the [react-day-picker v8 migration guide](https://github.com/palantir/blueprint/wiki/react-day-picker-8-migration).

Note that @blueprintjs/datetime2 will transitively install multiple versions of react-day-picker.
These two copies of react-day-picker can happily exist together in a single JS bundle, and with the help of tree-shaking,
you can avoid bundling both if you _only_ use the deprecated "V1" / "V2" datetime components or _only_ use the new
"V3" APIs.

### [Full Documentation](http://blueprintjs.com/docs) | [Source Code](https://github.com/palantir/blueprint)
15 changes: 8 additions & 7 deletions packages/docs-app/src/blueprint.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ It is optimized for building complex data-dense interfaces for desktop applicati
@reactDocs Welcome

<div class="@ns-callout @ns-intent-primary @ns-icon-star @ns-callout-has-body-content">
<h5 class="@ns-heading">Blueprint v5.0 is now available</h5>
<h5 class="@ns-heading">Blueprint v5.x is now available</h5>

Check out the [migration guides to upgrade from v4.x &rarr;](https://github.com/palantir/blueprint/wiki/Blueprint-5.0)

Expand All @@ -26,11 +26,12 @@ yarn add @blueprintjs/core react react-dom
```

Additional UI components and APIs are available in:
- [**@blueprintjs/icons**](https://www.npmjs.com/package/@blueprintjs/icons)
- [**@blueprintjs/datetime**](https://www.npmjs.com/package/@blueprintjs/datetime)
- [**@blueprintjs/datetime2**](https://www.npmjs.com/package/@blueprintjs/datetime2)
- [**@blueprintjs/select**](https://www.npmjs.com/package/@blueprintjs/select)
- [**@blueprintjs/table**](https://www.npmjs.com/package/@blueprintjs/table)

- [**@blueprintjs/icons**](https://www.npmjs.com/package/@blueprintjs/icons)
- [**@blueprintjs/datetime**](https://www.npmjs.com/package/@blueprintjs/datetime)
- [**@blueprintjs/datetime2**](https://www.npmjs.com/package/@blueprintjs/datetime2)
- [**@blueprintjs/select**](https://www.npmjs.com/package/@blueprintjs/select)
- [**@blueprintjs/table**](https://www.npmjs.com/package/@blueprintjs/table)

The navigation sidebar lists all the available packages, separated by use case and significant dependencies.
All have peer dependencies on **react** and **react-dom**.
Expand All @@ -42,7 +43,7 @@ Import React components from the appropriate package.
```tsx
import { Button } from "@blueprintjs/core";

<Button intent="success" text="button content" onClick={incrementCounter} />
<Button intent="success" text="button content" onClick={incrementCounter} />;
```

For this button to be styled correctly in the DOM, it needs its associated CSS to be loaded on the page.
Expand Down
2 changes: 1 addition & 1 deletion packages/docs-app/src/components/blueprintDocs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export class BlueprintDocs extends React.Component<BlueprintDocsProps, { themeNa
public render() {
const banner = (
<Banner href="https://blueprintjs.com/docs/versions/4">
Blueprint v5.0 is now in stable release. Still using v4.x? Click here to view the legacy docs &rarr;
Blueprint v5.x is now in stable release. Still using v4.x? Click here to view the legacy docs &rarr;
</Banner>
);
const footer = (
Expand Down
34 changes: 0 additions & 34 deletions packages/docs-theme/src/styles/_content.scss
Original file line number Diff line number Diff line change
Expand Up @@ -53,37 +53,3 @@ $attribute-modifier-color: $violet5;
.docs-markup .editor {
margin: 0;
}

// DEPRECATED, these use old classes generated by the syntax highlighter
// additions to the syntax theme
.editor {
color: inherit;
overflow: auto;

// TODO(adahiya): remove in Blueprint v5.0
// DEPRECATED STYLES, no longer used with monaco-editor syntax higlighting
.line {
line-height: 1.5;
padding-right: $pt-grid-size * 2;
white-space: nowrap;
}

.support.constant.handlebars {
// hide the {{ }} cuz who cares
display: none;

// color for {{:modifier}} to match modifier table
+ span {
background: rgba($attribute-modifier-color, 0.15);
border-radius: $pt-border-radius;
color: $attribute-modifier-color;
padding: 0 3px;
}

// adjust colors for {{.modifier}}
+ .variable {
background: rgba($class-modifier-color, 0.15);
color: $class-modifier-color;
}
}
}
69 changes: 32 additions & 37 deletions packages/eslint-plugin/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@ Add the `"@blueprintjs"` plugin to your ESLint config:

```json
{
"plugins": [
"@blueprintjs"
]
"plugins": ["@blueprintjs"]
}
```

Expand All @@ -34,9 +32,7 @@ To enable _all_ rules provided by the plugin the Blueprint-specific rules, exten

```json
{
"extends": [
"plugin:@blueprintjs/recommended"
]
"extends": ["plugin:@blueprintjs/recommended"]
}
```

Expand All @@ -61,18 +57,18 @@ Enforce usage of class names exported as public API via the `Classes` object ins

Each `@blueprintjs` package exports a `Classes` object which contains constants for every CSS class defined by the package.

__Rationale__: This is useful to avoid typos in styling or creating Blueprint components, and also helps future-proof your code for major
**Rationale**: This is useful to avoid typos in styling or creating Blueprint components, and also helps future-proof your code for major
version bumps of Blueprint where the class namespace (e.g. `bp5-`) changes.

```json
{
"rules": {
"@blueprintjs/classes-constants":"error"
"@blueprintjs/classes-constants": "error"
}
}
```

__Has auto-fixer__: ✅
**Has auto-fixer**: ✅

```diff
- const element = <div className="pt-navbar" />;
Expand All @@ -89,9 +85,9 @@ Enforce usage of Blueprint components over regular HTML JSX tags:
- blockquote -> Blockquote
- table -> HTMLTable

__Rationale__: This is uesful to ensure consistent styling of common typographic elements and other basic markup.
**Rationale**: This is uesful to ensure consistent styling of common typographic elements and other basic markup.

__Has auto-fixer__: ✅
**Has auto-fixer**: ✅

```json
{
Expand All @@ -103,7 +99,7 @@ __Has auto-fixer__: ✅

### `@blueprintjs/icon-components`

:warning: DEPRECATED: this rule is no longer recommended. Icons modularity / tree shaking will be a first-class feature of Blueprint v5.0.
:warning: DEPRECATED: this rule is no longer recommended. Icons modularity / tree shaking is a first-class feature of Blueprint v5.x.

Enforce usage of JSX `Icon` components instead of `IconName` string literals (or vice-versa) in `icon` JSX props.
Note that this rule only supports hardcoded values in the `icon` prop; it does not handle expressions or conditionals.
Expand Down Expand Up @@ -143,23 +139,23 @@ This rule is disabled in the `blueprint-rules` config as it is most useful to en

Ban usage of deprecated Blueprint components, including:

- AbstractComponent
- AbstractPureComponent
- Breadcrumbs
- CollapsibleList
- DateInput
- DateRangeInput
- DateTimePicker
- MenuItem
- MultiSelect
- PanelStack
- Popover
- Select
- Suggest
- TimezonePicker
- Tooltip

__Rationale__: Many Blueprint components have "V2" variants as a part of their natural API evolution.
- AbstractComponent
- AbstractPureComponent
- Breadcrumbs
- CollapsibleList
- DateInput
- DateRangeInput
- DateTimePicker
- MenuItem
- MultiSelect
- PanelStack
- Popover
- Select
- Suggest
- TimezonePicker
- Tooltip

**Rationale**: Many Blueprint components have "V2" variants as a part of their natural API evolution.
Blueprint consumers are recommended to migrate from the deprecated V1 components to their newer V2 counterparts
in order to future-proof their code for the next major version of Blueprint, where the V2 components will become the
only available API and the V1 variants will be removed. Flagging usage of deprecated APIs can be done with other
Expand All @@ -173,7 +169,7 @@ to prevent any backwards progress in your Blueprint migration as you move from V
Similar to `@blueprintjs/no-deprecated-components`, but only flags usage of deprecated components from the
`@blueprintjs/core` package instead of all `@blueprintjs/` packages.

__Rationale__: In migrations of large code bases, it may be useful to apply more granular rule configuration of
**Rationale**: In migrations of large code bases, it may be useful to apply more granular rule configuration of
"no-deprecated-components" to make incremental progress towards the newer APIs. This allows you, for example, to flag
deprecated `@blueprintjs/core` component usage as errors while allowing deprecated components from other packages
to pass as lint warnings.
Expand All @@ -183,7 +179,7 @@ to pass as lint warnings.
Similar to `@blueprintjs/no-deprecated-components`, but only flags usage of deprecated components from the
`@blueprintjs/datetime` package instead of all `@blueprintjs/` packages.

__Rationale__: In migrations of large code bases, it may be useful to apply more granular rule configuration of
**Rationale**: In migrations of large code bases, it may be useful to apply more granular rule configuration of
"no-deprecated-components" to make incremental progress towards the newer APIs. This allows you, for example, to flag
deprecated `@blueprintjs/datetime` component usage as errors while allowing deprecated components from other packages
to pass as lint warnings.
Expand All @@ -193,7 +189,7 @@ to pass as lint warnings.
Similar to `@blueprintjs/no-deprecated-components`, but only flags usage of deprecated components from the
`@blueprintjs/datetime2` package instead of all `@blueprintjs/` packages.

__Rationale__: In migrations of large code bases, it may be useful to apply more granular rule configuration of
**Rationale**: In migrations of large code bases, it may be useful to apply more granular rule configuration of
"no-deprecated-components" to make incremental progress towards the newer APIs. This allows you, for example, to flag
deprecated `@blueprintjs/datetime2` component usage as errors while allowing deprecated components from other packages
to pass as lint warnings.
Expand All @@ -203,7 +199,7 @@ to pass as lint warnings.
Similar to `@blueprintjs/no-deprecated-components`, but only flags usage of deprecated components from the
`@blueprintjs/select` package instead of all `@blueprintjs/` packages.

__Rationale__: In migrations of large code bases, it may be useful to apply more granular rule configuration of
**Rationale**: In migrations of large code bases, it may be useful to apply more granular rule configuration of
"no-deprecated-components" to make incremental progress towards the newer APIs. This allows you, for example, to flag
deprecated `@blueprintjs/select` component usage as errors while allowing deprecated components from other packages
to pass as lint warnings.
Expand All @@ -213,7 +209,7 @@ to pass as lint warnings.
Similar to `@blueprintjs/no-deprecated-components`, but only flags usage of deprecated components from the
`@blueprintjs/table` package instead of all `@blueprintjs/` packages.

__Rationale__: In migrations of large code bases, it may be useful to apply more granular rule configuration of
**Rationale**: In migrations of large code bases, it may be useful to apply more granular rule configuration of
"no-deprecated-components" to make incremental progress towards the newer APIs. This allows you, for example, to flag
deprecated `@blueprintjs/table` component usage as errors while allowing deprecated components from other packages
to pass as lint warnings.
Expand All @@ -224,10 +220,9 @@ Ban usage of deprecated types & interfaces. In most cases, these symbols are dep
TypeScript interface naming convention where we've _dropped_ the "I" prefix from interface names. For example,
`IProps` is now `Props`.

__Auto-fixable__.
**Auto-fixable**.

__Rationale__: Ensure forwards-comaptibility with the next major version of Blueprint and use the auto-fixer as
**Rationale**: Ensure forwards-comaptibility with the next major version of Blueprint and use the auto-fixer as
a codemod.


### [Full Documentation](http://blueprintjs.com/docs) | [Source Code](https://github.com/palantir/blueprint)
1 change: 1 addition & 0 deletions packages/popover2/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ previously available in @blueprintjs/popover v4.x, but they were promoted to the
@blueprintjs/core v5.x.

Once you upgrade to Blueprint v5.0, you should migrate your imports to the @blueprintjs/core package.
See the [Popover2 migration guide](https://github.com/palantir/blueprint/wiki/Popover2-migration) for more info.

```diff
- import { Popover2 } from "@blueprintjs/popover2";
Expand Down