diff --git a/.changeset/honest-hands-spend.md b/.changeset/honest-hands-spend.md new file mode 100644 index 0000000000..5eaae86dcf --- /dev/null +++ b/.changeset/honest-hands-spend.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': minor +--- + +Canon has been renamed to Backstage UI. This means that `@backstage/canon` has been deprecated and replaced by `@backstage/ui`. diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 2685926549..519204ff24 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -40,6 +40,7 @@ yarn.lock @backstage/maintainers @backst /packages/repo-tools @backstage/tooling-maintainers /packages/techdocs-cli @backstage/techdocs-maintainers /packages/techdocs-cli-embedded-app @backstage/techdocs-maintainers +/packages/ui @backstage/design-system-maintainers /packages/yarn-plugin @backstage/tooling-maintainers /plugins/app @backstage/framework-maintainers /plugins/app-* @backstage/framework-maintainers diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 12044fd530..bdf6edbbac 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -131,6 +131,10 @@ jobs: - name: build canon run: yarn --cwd packages/canon build + # For now BUI has a custom build script and needs to be built separately + - name: build BUI + run: yarn --cwd packages/ui build + - name: verify type dependencies run: yarn lint:type-deps diff --git a/.github/workflows/deploy_packages.yml b/.github/workflows/deploy_packages.yml index 57bcb5cd18..3f24fcc783 100644 --- a/.github/workflows/deploy_packages.yml +++ b/.github/workflows/deploy_packages.yml @@ -114,6 +114,10 @@ jobs: - name: build canon run: yarn --cwd packages/canon build + # For now BUI has a custom build script and needs to be built separately + - name: build BUI + run: yarn --cwd packages/ui build + - name: verify type dependencies run: yarn lint:type-deps diff --git a/.github/workflows/verify_storybook.yml b/.github/workflows/verify_storybook.yml index 06e5a921f2..013b1cf069 100644 --- a/.github/workflows/verify_storybook.yml +++ b/.github/workflows/verify_storybook.yml @@ -49,10 +49,10 @@ jobs: run: yarn install --immutable working-directory: storybook - # Only for verification, the canon one is what we upload to Chromatic + # Only for verification, the BUI one is what we upload to Chromatic - run: yarn build-storybook - - run: yarn --cwd packages/canon build-storybook + - run: yarn --cwd packages/ui build-storybook - uses: chromaui/action@1cfa065cbdab28f6ca3afaeb3d761383076a35aa # v11 with: @@ -60,5 +60,5 @@ jobs: # projectToken intentionally shared to allow collaborators to run Chromatic on forks # https://www.chromatic.com/docs/custom-ci-provider#run-chromatic-on-external-forks-of-open-source-projects projectToken: chpt_dab72dc0f97d55b - workingDir: packages/canon + workingDir: packages/ui storybookBuildDir: storybook-static diff --git a/.prettierignore b/.prettierignore index 04ca7d780d..2f10d19638 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,7 +4,7 @@ microsite canon-docs/.next canon-docs/public canon-docs/out -packages/canon/css +packages/ui/css coverage *.hbs templates diff --git a/packages/app-next/package.json b/packages/app-next/package.json index 7dd5321b02..fdf21ff5a7 100644 --- a/packages/app-next/package.json +++ b/packages/app-next/package.json @@ -35,7 +35,6 @@ }, "dependencies": { "@backstage/app-defaults": "workspace:^", - "@backstage/canon": "workspace:^", "@backstage/catalog-model": "workspace:^", "@backstage/cli": "workspace:^", "@backstage/config": "workspace:^", @@ -74,6 +73,7 @@ "@backstage/plugin-techdocs-react": "workspace:^", "@backstage/plugin-user-settings": "workspace:^", "@backstage/theme": "workspace:^", + "@backstage/ui": "workspace:^", "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.61", diff --git a/packages/app-next/src/index-public-experimental.tsx b/packages/app-next/src/index-public-experimental.tsx index 24c4a9d66a..34198f9553 100644 --- a/packages/app-next/src/index-public-experimental.tsx +++ b/packages/app-next/src/index-public-experimental.tsx @@ -16,7 +16,7 @@ import ReactDOM from 'react-dom/client'; import { createPublicSignInApp } from '@backstage/frontend-defaults'; -import '@backstage/canon/css/styles.css'; +import '@backstage/ui/css/styles.css'; const app = createPublicSignInApp(); diff --git a/packages/app-next/src/index.tsx b/packages/app-next/src/index.tsx index 82b9595c84..fd86261385 100644 --- a/packages/app-next/src/index.tsx +++ b/packages/app-next/src/index.tsx @@ -17,6 +17,6 @@ import '@backstage/cli/asset-types'; import ReactDOM from 'react-dom/client'; import app from './App'; -import '@backstage/canon/css/styles.css'; +import '@backstage/ui/css/styles.css'; ReactDOM.createRoot(document.getElementById('root')!).render(app); diff --git a/packages/app/package.json b/packages/app/package.json index b59de2e558..5567856a40 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -36,7 +36,6 @@ }, "dependencies": { "@backstage/app-defaults": "workspace:^", - "@backstage/canon": "workspace:^", "@backstage/catalog-model": "workspace:^", "@backstage/cli": "workspace:^", "@backstage/config": "workspace:^", @@ -71,6 +70,7 @@ "@backstage/plugin-techdocs-react": "workspace:^", "@backstage/plugin-user-settings": "workspace:^", "@backstage/theme": "workspace:^", + "@backstage/ui": "workspace:^", "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.61", diff --git a/packages/app/src/index-public-experimental.tsx b/packages/app/src/index-public-experimental.tsx index fb79eb921a..972c1fd55c 100644 --- a/packages/app/src/index-public-experimental.tsx +++ b/packages/app/src/index-public-experimental.tsx @@ -30,7 +30,7 @@ import { discoveryApiRef, } from '@backstage/core-plugin-api'; import { AuthProxyDiscoveryApi } from '../src/AuthProxyDiscoveryApi'; -import '@backstage/canon/css/styles.css'; +import '@backstage/ui/css/styles.css'; const app = createApp({ apis: [ diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx index cb6eeb3185..05dcc024bf 100644 --- a/packages/app/src/index.tsx +++ b/packages/app/src/index.tsx @@ -17,6 +17,6 @@ import '@backstage/cli/asset-types'; import ReactDOM from 'react-dom/client'; import App from './App'; -import '@backstage/canon/css/styles.css'; +import '@backstage/ui/css/styles.css'; ReactDOM.createRoot(document.getElementById('root')!).render(); diff --git a/packages/canon/.eslintrc.js b/packages/canon/.eslintrc.js new file mode 100644 index 0000000000..9638ff6e45 --- /dev/null +++ b/packages/canon/.eslintrc.js @@ -0,0 +1,9 @@ +module.exports = { + ...require('@backstage/cli/config/eslint-factory')(__dirname), + extends: ['plugin:storybook/recommended'], + rules: { + 'react/forbid-elements': 'off', + '@backstage/no-mixed-plugin-imports': 'off' + }, +}; + diff --git a/packages/canon/.gitignore b/packages/canon/.gitignore new file mode 100644 index 0000000000..dac138d9e0 --- /dev/null +++ b/packages/canon/.gitignore @@ -0,0 +1 @@ +css diff --git a/packages/canon/CHANGELOG.md b/packages/canon/CHANGELOG.md new file mode 100644 index 0000000000..84b512b1cf --- /dev/null +++ b/packages/canon/CHANGELOG.md @@ -0,0 +1,282 @@ +# @backstage/canon + +## 0.6.0-next.1 + +### Minor Changes + +- 2e30459: We are moving our Tooltip component to use React Aria under the hood. In doing so, the structure of the component and its prop are changing to follow the new underlying structure. + +### Patch Changes + +- 76255b8: Add new Card component to Canon. +- b0a6c8e: Add new Header component to Canon. +- be76576: Improve Button, ButtonIcon and ButtonLink styling in Canon. +- 17beb9b: Update return types for Heading & Text components for React 19. +- eac4a4c: Add new tertiary variant to Button, ButtonIcon and ButtonLink in Canon. +- 8f2e82d: Add new Skeleton component in Canon + +## 0.6.0-next.0 + +### Minor Changes + +- 4c6d891: **BREAKING CHANGES** + + We’re updating our Button component to provide better support for button links. + + - We’re introducing a new `ButtonLink` component, which replaces the previous render prop pattern. + - To maintain naming consistency across components, `IconButton` is being renamed to `ButtonIcon`. + - Additionally, the render prop will be removed from all button-related components. + + These changes aim to simplify usage and improve clarity in our component API. + +### Patch Changes + +- 140f652: We are consolidating all css files into a single styles.css in Canon. +- 8154fb9: Add new SearchField component in Canon +- 6910892: Add new `RadioGroup` + `Radio` component to Canon +- a8a8514: We are transforming how we structure our class names and data attributes definitions for all components. They are now all set in the same place. +- 667b951: Added placeholder prop to TextField component. +- e71333a: adding export for ButtonLink so it's importable + +## 0.5.0 + +### Minor Changes + +- 621fac9: We are updating the default size of the Button component in Canon to be small instead of medium. +- a842554: We set the default size for IconButton in Canon to be small instead of medium. +- 35fd51d: Move TextField component to use react Aria under the hood. Introducing a new FieldLabel component to help build custom fields. +- 78204a2: **Breaking** We are adding a new as prop on the Heading and Text component to make it easier to change the component tag. We are removing the render prop in favour of the as prop. +- c49e335: TextField in Canon now has multiple label sizes as well as the capacity to hide label and description but still make them available for screen readers. +- 24b45ef: Fixes spacing props on layout components and aligned on naming for the Grid component. You should now call the Grid root component using instead of just . + +### Patch Changes + +- 44df879: Add min-width: 0; by default on every Flex components in Canon to help support truncated texts inside flex elements. +- ee6ffe6: Fix styling for the title4 prop on the Heading component in Canon. +- f2f814a: Added a render prop to the Button component in Canon to use it as a link. +- 98f02a6: Add new Switch component in Canon. +- c94f8e0: The filter input in menu comboboxes should now always use the full width of the menu it's in. +- 269316d: Remove leftover console.log from Container component. + +## 0.5.0-next.2 + +### Patch Changes + +- 44df879: Add min-width: 0; by default on every Flex components in Canon to help support truncated texts inside flex elements. +- ee6ffe6: Fix styling for the title4 prop on the Heading component in Canon. +- f2f814a: Added a render prop to the Button component in Canon to use it as a link. + +## 0.5.0-next.1 + +### Minor Changes + +- 621fac9: We are updating the default size of the Button component in Canon to be small instead of medium. +- a842554: We set the default size for IconButton in Canon to be small instead of medium. + +## 0.5.0-next.0 + +### Minor Changes + +- 24b45ef: Fixes spacing props on layout components and aligned on naming for the Grid component. You should now call the Grid root component using instead of just . + +### Patch Changes + +- 269316d: Remove leftover console.log from Container component. + +## 0.4.0 + +### Minor Changes + +- ea36f74: **Breaking Change** Icons on Button and IconButton now need to be imported and placed like this: