@atlaskit/button 20.4.1 → 20.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -58
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/package.json +1 -3
- package/codemods/15.0.0-lite-mode.tsx +0 -45
- package/codemods/__tests__/15.0.0-lite-mode/optimistic.tsx +0 -638
- package/codemods/__tests__/15.0.0-lite-mode/safe.tsx +0 -223
- package/codemods/__tests__/15.0.0-lite-mode/shared.tsx +0 -255
- package/codemods/helpers/15.0.0-runner.tsx +0 -167
- package/codemods/optimistic-15.0.0-lite-mode.tsx +0 -263
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/button
|
|
2
2
|
|
|
3
|
+
## 20.4.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#109985](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109985)
|
|
8
|
+
[`f13dc94ee78bb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f13dc94ee78bb) -
|
|
9
|
+
Remove codemod for deprecated exports and remove now unused dev dependencies.
|
|
10
|
+
|
|
3
11
|
## 20.4.1
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -1661,36 +1669,6 @@ import CustomThemeButton from '@atlaskit/button/custom-theme-button';
|
|
|
1661
1669
|
You can also import them all from the root entry point if you like! Heads up though, **if your
|
|
1662
1670
|
bundler does not support tree shaking then you will not get the minimum possible bundle size**
|
|
1663
1671
|
|
|
1664
|
-
We have a **automated codemod** you can run to perform many upgrade processes for you. It comes in
|
|
1665
|
-
two flavours:
|
|
1666
|
-
|
|
1667
|
-
- `optimistic-15.0.0-lite-mode.ts`: An "optimistic" codemod that moves your buttons to the correct
|
|
1668
|
-
version based on the props you've provided. If you use the `isLoading` prop, it will change the
|
|
1669
|
-
import to use `loading-button`. If you use `theme` prop, imports to `custom-theme-button` will be
|
|
1670
|
-
used. If you have a ThemeProvider above your buttons in the React tree the optimistic codemod
|
|
1671
|
-
can't tell, and this could lead to regressions. Use this codemod with care!
|
|
1672
|
-
- `15.0.0-lite-mode.ts`: If you wrap your application in a ThemeProvider, you can use this "safe"
|
|
1673
|
-
codemod to change all usages of button to the `custom-theme-button`.
|
|
1674
|
-
|
|
1675
|
-
**Running the codemod cli**
|
|
1676
|
-
|
|
1677
|
-
To run the codemod: **You first need to have the latest version of button installed before you can
|
|
1678
|
-
run the codemod**
|
|
1679
|
-
|
|
1680
|
-
`yarn upgrade @atlaskit/button@^15.0.0`
|
|
1681
|
-
|
|
1682
|
-
Once upgraded, use the Atlaskit codemod-cli;
|
|
1683
|
-
|
|
1684
|
-
`npx @atlaskit/codemod-cli --parser [PARSER] --extensions [FILE_EXTENSIONS] [TARGET_PATH]`
|
|
1685
|
-
|
|
1686
|
-
Or run `npx @atlaskit/codemod-cli -h` for more details on usage. For Atlassians, refer to
|
|
1687
|
-
[this doc](https://hello.atlassian.net/wiki/spaces/AF/pages/2627171992/Codemods) for more details on
|
|
1688
|
-
the codemod CLI.
|
|
1689
|
-
|
|
1690
|
-
```js
|
|
1691
|
-
import Button, { LoadingButton, CustomThemeButton } from '@atlaskit/button';
|
|
1692
|
-
```
|
|
1693
|
-
|
|
1694
1672
|
### Change: default export
|
|
1695
1673
|
|
|
1696
1674
|
Previously the default export of the button package was a button that supported `theme`
|
|
@@ -1772,34 +1750,6 @@ content. This approach had a number of shortcomings.
|
|
|
1772
1750
|
- Documentation cleanup
|
|
1773
1751
|
- Examples cleanup
|
|
1774
1752
|
|
|
1775
|
-
**Automatic upgrading**
|
|
1776
|
-
|
|
1777
|
-
We have created some tooling to automatically upgrade your usage of Button!
|
|
1778
|
-
|
|
1779
|
-
```
|
|
1780
|
-
# You first need to have the latest button installed before you can run the codemod
|
|
1781
|
-
yarn add @atlaskit/button@^15.0.0
|
|
1782
|
-
|
|
1783
|
-
# Run the codemod cli
|
|
1784
|
-
# Pass in a parser for your codebase
|
|
1785
|
-
npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel]
|
|
1786
|
-
```
|
|
1787
|
-
|
|
1788
|
-
We have created **two** different codemods for you to choose from:
|
|
1789
|
-
|
|
1790
|
-
1. **Safe codemod**: This codemod will shift everything over to `CustomThemeButton` which is a 1:1
|
|
1791
|
-
of what exists today. This is super safe and you don’t need to do anything but sit back and
|
|
1792
|
-
enjoy. You get some nice performance wins for just doing this. You can then opportunistically
|
|
1793
|
-
move to the other `button` variants at your future convenience.
|
|
1794
|
-
2. **Optimistic codemod**: The codemod will try it’s hardest to move to the best `button` variant in
|
|
1795
|
-
a module based on usage. This is pretty tricky because we are splitting one thing into three. It
|
|
1796
|
-
can also be a bit dangerous because technically you can use a `ButtonTheme.Provider` higher in
|
|
1797
|
-
the React tree and all buttons will pick up that theme. The codemod cannot know about that
|
|
1798
|
-
nuance. This codemod will add comments to any files where it thinks you will need to make a
|
|
1799
|
-
decision and also point out when you might run into any `ButtonTheme.Provider` issues.
|
|
1800
|
-
|
|
1801
|
-
_When you use `@atlaskit/codemod-cli` you will be able to select which codemod you want to run_
|
|
1802
|
-
|
|
1803
1753
|
### Patch Changes
|
|
1804
1754
|
|
|
1805
1755
|
- [`83e32fa998`](https://bitbucket.org/atlassian/atlassian-frontend/commits/83e32fa998) - Now uses
|
|
@@ -133,7 +133,7 @@ var ButtonBase = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(prop
|
|
|
133
133
|
action: 'clicked',
|
|
134
134
|
componentName: 'button',
|
|
135
135
|
packageName: "@atlaskit/button",
|
|
136
|
-
packageVersion: "20.4.
|
|
136
|
+
packageVersion: "20.4.2",
|
|
137
137
|
analyticsData: analyticsContext
|
|
138
138
|
});
|
|
139
139
|
|
|
@@ -119,7 +119,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref)
|
|
|
119
119
|
action: 'clicked',
|
|
120
120
|
componentName: 'button',
|
|
121
121
|
packageName: "@atlaskit/button",
|
|
122
|
-
packageVersion: "20.4.
|
|
122
|
+
packageVersion: "20.4.2",
|
|
123
123
|
analyticsData: analyticsContext
|
|
124
124
|
});
|
|
125
125
|
|
|
@@ -125,7 +125,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
|
|
|
125
125
|
action: 'clicked',
|
|
126
126
|
componentName: 'button',
|
|
127
127
|
packageName: "@atlaskit/button",
|
|
128
|
-
packageVersion: "20.4.
|
|
128
|
+
packageVersion: "20.4.2",
|
|
129
129
|
analyticsData: analyticsContext
|
|
130
130
|
});
|
|
131
131
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/button",
|
|
3
|
-
"version": "20.4.
|
|
3
|
+
"version": "20.4.2",
|
|
4
4
|
"description": "A button triggers an event or action. They let users know what will happen next.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -123,11 +123,9 @@
|
|
|
123
123
|
"@testing-library/react": "^13.4.0",
|
|
124
124
|
"@testing-library/user-event": "^14.4.3",
|
|
125
125
|
"ast-types": "^0.13.3",
|
|
126
|
-
"bind-event-listener": "^3.0.0",
|
|
127
126
|
"jscodeshift": "^0.13.0",
|
|
128
127
|
"lodash": "^4.17.21",
|
|
129
128
|
"react-dom": "^18.2.0",
|
|
130
|
-
"storybook-addon-performance": "^0.17.3",
|
|
131
129
|
"typescript": "~5.4.2"
|
|
132
130
|
},
|
|
133
131
|
"homepage": "https://atlassian.design/components/button/",
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { type API, type FileInfo, type Options } from 'jscodeshift';
|
|
2
|
-
import { type Collection } from 'jscodeshift/src/Collection';
|
|
3
|
-
|
|
4
|
-
import { changeType, transformButton } from './helpers/15.0.0-runner';
|
|
5
|
-
import {
|
|
6
|
-
getDefaultSpecifierName,
|
|
7
|
-
type Nullable,
|
|
8
|
-
shiftDefaultImport,
|
|
9
|
-
} from './helpers/helpers-generic';
|
|
10
|
-
|
|
11
|
-
export default function transformer(file: FileInfo, { jscodeshift: j }: API, options: Options) {
|
|
12
|
-
return transformButton({
|
|
13
|
-
file,
|
|
14
|
-
j,
|
|
15
|
-
custom: (base: Collection<any>) => {
|
|
16
|
-
changeType({
|
|
17
|
-
j,
|
|
18
|
-
base,
|
|
19
|
-
oldName: 'ButtonProps',
|
|
20
|
-
newName: 'CustomThemeButtonProps',
|
|
21
|
-
fallbackNameAlias: 'DSCustomThemeButtonProps',
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
const defaultName: Nullable<string> = getDefaultSpecifierName({
|
|
25
|
-
j,
|
|
26
|
-
base,
|
|
27
|
-
packageName: '@atlaskit/button',
|
|
28
|
-
});
|
|
29
|
-
if (defaultName == null) {
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
shiftDefaultImport({
|
|
34
|
-
j,
|
|
35
|
-
base,
|
|
36
|
-
defaultName,
|
|
37
|
-
oldPackagePath: '@atlaskit/button',
|
|
38
|
-
newPackagePath: '@atlaskit/button/custom-theme-button',
|
|
39
|
-
});
|
|
40
|
-
},
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
// Note: not exporting a 'parser' because doing so
|
|
45
|
-
// will prevent consumers overriding it
|