Remove duplicates
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
@@ -187,8 +187,15 @@ async function parseChangelogMd(changelogPath, sinceVersion, validComponents) {
|
||||
// Validate that this is actually a version number (X.Y.Z or X.Y.Z-pre.N)
|
||||
// Skip headings that are just markdown content within changelog entries
|
||||
if (/^\d+\.\d+\.\d+/.test(versionText)) {
|
||||
currentVersion = versionText;
|
||||
currentSection = null;
|
||||
// Skip pre-release versions (e.g., 0.11.0-next.1, 0.9.0-alpha.2) to avoid duplicates
|
||||
// Pre-release commits are included in the final release version
|
||||
if (/^\d+\.\d+\.\d+-/.test(versionText)) {
|
||||
currentVersion = null;
|
||||
currentSection = null;
|
||||
} else {
|
||||
currentVersion = versionText;
|
||||
currentSection = null;
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -57,60 +57,4 @@ export const changelog_0_1_0: ChangelogProps[] = [
|
||||
|
||||
commitSha: '58ec9e7',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.1.0',
|
||||
prs: ['28789'],
|
||||
description: `Updated core CSS tokens and fixing the Button component accordingly.`,
|
||||
breaking: true,
|
||||
commitSha: '8309bdb',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.1.0',
|
||||
prs: ['28770'],
|
||||
description: `Fix spacing props not being applied for custom values.`,
|
||||
|
||||
commitSha: 'f44e5cf',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.1.0',
|
||||
prs: ['28634'],
|
||||
description: `**BREAKING**: Merged the Stack and Inline component into a single component called Flex.`,
|
||||
breaking: true,
|
||||
commitSha: '72c9800',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.1.0',
|
||||
prs: ['28630'],
|
||||
description: `**BREAKING**: Fixing css structure and making sure that props are applying the correct styles for all responsive values.`,
|
||||
breaking: true,
|
||||
commitSha: '1e4ccce',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.1.0',
|
||||
prs: ['28626'],
|
||||
description: `Removed client directive as they are not needed in React 18.`,
|
||||
|
||||
commitSha: '989af25',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.1.0',
|
||||
prs: ['28579'],
|
||||
description: `Removed older versions of React packages as a preparatory step for upgrading to React 19. This commit does not introduce any functional changes, but removes dependencies on previous React versions, allowing for a cleaner upgrade path in subsequent commits.`,
|
||||
|
||||
commitSha: '58ec9e7',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.1.0',
|
||||
prs: ['28562'],
|
||||
description: `This is the first alpha release for Canon. As part of this release we are introducing 5 layout components and 7 components. All theming is done through CSS variables.`,
|
||||
breaking: true,
|
||||
commitSha: '65f4acc',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -86,65 +86,4 @@ For custom cell content, use the new generic \`Cell\` component:
|
||||
|
||||
commitSha: 'c145031',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.10.0',
|
||||
prs: ['31917'],
|
||||
description: `**BREAKING**: The \`Cell\` component has been refactored to be a generic wrapper component that accepts \`children\` for custom cell content. The text-specific functionality (previously part of \`Cell\`) has been moved to a new \`CellText\` component.`,
|
||||
migration: `If you were using \`Cell\` with text-specific props (\`title\`, \`description\`, \`leadingIcon\`, \`href\`), you need to update your code to use \`CellText\` instead:
|
||||
|
||||
**Before:**
|
||||
|
||||
\`\`\`tsx
|
||||
<Cell
|
||||
title="My Title"
|
||||
description="My description"
|
||||
leadingIcon={<Icon />}
|
||||
href="/path"
|
||||
/>
|
||||
\`\`\`
|
||||
|
||||
**After:**
|
||||
|
||||
\`\`\`tsx
|
||||
<CellText
|
||||
title="My Title"
|
||||
description="My description"
|
||||
leadingIcon={<Icon />}
|
||||
href="/path"
|
||||
/>
|
||||
\`\`\`
|
||||
|
||||
For custom cell content, use the new generic \`Cell\` component:
|
||||
|
||||
\`\`\`tsx
|
||||
<Cell>{/* Your custom content */}</Cell>
|
||||
\`\`\``,
|
||||
breaking: true,
|
||||
commitSha: '16543fa',
|
||||
},
|
||||
{
|
||||
components: ['checkbox'],
|
||||
version: '0.10.0',
|
||||
prs: ['31904'],
|
||||
description: `Fixed Checkbox indicator showing checkmark color when unchecked.`,
|
||||
|
||||
commitSha: '50b7927',
|
||||
},
|
||||
{
|
||||
components: ['button-icon'],
|
||||
version: '0.10.0',
|
||||
prs: ['31900'],
|
||||
description: `Fixed \`ButtonIcon\` incorrectly applying \`className\` to inner elements instead of only the root element.`,
|
||||
|
||||
commitSha: '5bacf55',
|
||||
},
|
||||
{
|
||||
components: ['table'],
|
||||
version: '0.10.0',
|
||||
prs: ['31907'],
|
||||
description: `Added row selection support with visual state styling for hover, selected, and pressed states. Fixed checkbox rendering to only show for multi-select toggle mode.`,
|
||||
|
||||
commitSha: 'a20d317',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -193,116 +193,4 @@ export const changelog_0_11_0: ChangelogProps[] = [
|
||||
|
||||
commitSha: '2532d2a',
|
||||
},
|
||||
{
|
||||
components: ['table'],
|
||||
version: '0.11.0',
|
||||
prs: ['32050'],
|
||||
description: `**BREAKING**: Redesigned Table component with new \`useTable\` hook API.
|
||||
|
||||
- The \`Table\` component (React Aria wrapper) is renamed to \`TableRoot\`
|
||||
- New high-level \`Table\` component that handles data display, pagination, sorting, and selection
|
||||
- The \`useTable\` hook is completely redesigned with a new API supporting three pagination modes (complete, offset, cursor)
|
||||
- New types: \`ColumnConfig\`, \`TableProps\`, \`TableItem\`, \`UseTableOptions\`, \`UseTableResult\`
|
||||
|
||||
New features include unified pagination modes, debounced query changes, stale data preservation during reloads, and row selection with toggle/replace behaviors.`,
|
||||
migration: `1. Update imports and use the new \`useTable\` hook:
|
||||
|
||||
\`\`\`diff
|
||||
-import { Table, useTable } from '@backstage/ui';
|
||||
-const { data, paginationProps } = useTable({ data: items, pagination: {...} });
|
||||
+import { Table, useTable, type ColumnConfig } from '@backstage/ui';
|
||||
+const { tableProps } = useTable({
|
||||
+ mode: 'complete',
|
||||
+ getData: () => items,
|
||||
+});
|
||||
\`\`\`
|
||||
|
||||
2. Define columns and render with the new Table API:
|
||||
|
||||
\`\`\`diff
|
||||
-<Table aria-label="My table">
|
||||
- <TableHeader>...</TableHeader>
|
||||
- <TableBody items={data}>...</TableBody>
|
||||
-</Table>
|
||||
-<TablePagination {...paginationProps} />
|
||||
+const columns: ColumnConfig<Item>[] = [
|
||||
+ { id: 'name', label: 'Name', isRowHeader: true, cell: item => <CellText title={item.name} /> },
|
||||
+ { id: 'type', label: 'Type', cell: item => <CellText title={item.type} /> },
|
||||
+];
|
||||
+
|
||||
+<Table columnConfig={columns} {...tableProps} />
|
||||
\`\`\``,
|
||||
breaking: true,
|
||||
commitSha: '243e5e7',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.11.0',
|
||||
prs: ['32202'],
|
||||
description: `**BREAKING**: Updating color tokens to match the new neutral style on different surfaces.`,
|
||||
migration: `There's no direct replacement for the old tint tokens but you can use the new neutral set of color tokens on surface 0 or 1 as a replacement.
|
||||
|
||||
- \`--bui-bg-tint\` can be replaced by \`--bui-bg-neutral-on-surface-0\`
|
||||
- \`--bui-bg-tint-hover\` can be replaced by \`--bui-bg-neutral-on-surface-0-hover\`
|
||||
- \`--bui-bg-tint-pressed\` can be replaced by \`--bui-bg-neutral-on-surface-0-pressed\`
|
||||
- \`--bui-bg-tint-disabled\` can be replaced by \`--bui-bg-neutral-on-surface-0-disabled\``,
|
||||
breaking: true,
|
||||
commitSha: '95246eb',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.11.0',
|
||||
prs: ['32232'],
|
||||
description: `Introduce new \`ToggleButton\` & \`ToggleButtonGroup\` components in Backstage UI`,
|
||||
breaking: true,
|
||||
commitSha: 'ea0c6d8',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.11.0',
|
||||
prs: ['32297'],
|
||||
description: `Fixes disabled state in primary and secondary buttons in Backstage UI.`,
|
||||
|
||||
commitSha: '21c87cc',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.11.0',
|
||||
prs: ['32265'],
|
||||
description: `Fixed \`Link\` component causing hard page refreshes for internal routes. The component now properly uses React Router's navigation instead of full page reloads.`,
|
||||
|
||||
commitSha: 'b3253b6',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.11.0',
|
||||
prs: ['32200'],
|
||||
description: `**BREAKING**: Renamed CSS variable \`--bui-bg\` to \`--bui-bg-surface-0\` for consistency.`,
|
||||
breaking: true,
|
||||
commitSha: '4ea1d15',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.11.0',
|
||||
prs: ['32203'],
|
||||
description: `Fixes app background color on dark mode.`,
|
||||
|
||||
commitSha: '1880402',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.11.0',
|
||||
prs: ['32185'],
|
||||
description: `build(deps-dev): bump \`storybook\` from 10.1.9 to 10.1.10`,
|
||||
|
||||
commitSha: '9c76682',
|
||||
},
|
||||
{
|
||||
components: ['searchfield'],
|
||||
version: '0.11.0',
|
||||
prs: ['32123'],
|
||||
description: `Fixed SearchField \`startCollapsed\` prop not working correctly in Backstage UI. The field now properly starts in a collapsed state, expands when clicked and focused, and collapses back when unfocused with no input. Also fixed CSS logic to work correctly in all layout contexts (flex row, flex column, and regular containers).`,
|
||||
|
||||
commitSha: 'b4a4911',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -89,28 +89,4 @@ export const changelog_0_2_0: ChangelogProps[] = [
|
||||
|
||||
commitSha: '05e9d41',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.2.0',
|
||||
prs: ['29002'],
|
||||
description: `We are renaming CanonProvider to IconProvider to improve clarity on how to override icons.`,
|
||||
breaking: true,
|
||||
commitSha: '8689010',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.2.0',
|
||||
prs: ['28972'],
|
||||
description: `To avoid conflicts with Backstage, we removed global styles and set font-family and font-weight for each components.`,
|
||||
|
||||
commitSha: '89e8686',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.2.0',
|
||||
prs: ['28961'],
|
||||
description: `Fix CSS imports and move CSS outputs out of the dist folder.`,
|
||||
breaking: true,
|
||||
commitSha: '5a5db29',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -179,62 +179,4 @@ export const changelog_0_3_0: ChangelogProps[] = [
|
||||
|
||||
commitSha: '05a5003',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.3.0',
|
||||
prs: ['29482'],
|
||||
description: `Updated TextField and Select component to work with React Hook Form.`,
|
||||
breaking: true,
|
||||
commitSha: 'f038613',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.3.0',
|
||||
prs: ['29440'],
|
||||
description: `Add new Select component for Canon`,
|
||||
breaking: true,
|
||||
commitSha: '1b0cf40',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.3.0',
|
||||
prs: ['29364'],
|
||||
description: `**BREAKING**: Added a new TextField component to replace the Field and Input component. After feedback, it became clear that we needed to build a more opinionated version to avoid any problem in the future.`,
|
||||
breaking: true,
|
||||
commitSha: '5074d61',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.3.0',
|
||||
prs: ['29499'],
|
||||
description: `Removes instances of default React imports, a necessary update for the upcoming React 19 migration.
|
||||
|
||||
https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html`,
|
||||
|
||||
commitSha: 'a47fd39',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.3.0',
|
||||
prs: ['29475'],
|
||||
description: `Improved Container styles, changing our max-width to 120rem and improving padding on smaller screens.`,
|
||||
|
||||
commitSha: '24f0e08',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.3.0',
|
||||
prs: ['29466'],
|
||||
description: `Move styles to the root of the TextField component.`,
|
||||
|
||||
commitSha: '7ae28ba',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.3.0',
|
||||
prs: ['29247'],
|
||||
description: `We added a render prop to the Link component to make sure it can work with React Router.`,
|
||||
|
||||
commitSha: '4fe5b08',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -113,68 +113,4 @@ export const changelog_0_4_0: ChangelogProps[] = [
|
||||
|
||||
commitSha: '1ea1db0',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.4.0',
|
||||
prs: ['29878'],
|
||||
description: `Use correct colour token for TextField clear button icon, prevent layout shift whenever it is hidden or shown and properly size focus area around it. Also stop leading icon shrinking when used together with clear button.`,
|
||||
|
||||
commitSha: 'c8f32db',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.4.0',
|
||||
prs: ['29820'],
|
||||
description: `Added new icon and onClear props to the TextField to make it easier to accessorize inputs.`,
|
||||
|
||||
commitSha: '6189bfd',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.4.0',
|
||||
prs: ['29782'],
|
||||
description: `Pin version of @base-ui-components/react.`,
|
||||
|
||||
commitSha: '97b25a1',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.4.0',
|
||||
prs: ['29826'],
|
||||
description: `Use the Field component from Base UI within the TextField.`,
|
||||
|
||||
commitSha: '185d3a8',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.4.0',
|
||||
prs: ['29667'],
|
||||
description: `**BREAKING**: Icons on Button and IconButton now need to be imported and placed like this: \`<Button iconStart={<ChevronDownIcon />} />\``,
|
||||
breaking: true,
|
||||
commitSha: 'ea36f74',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.4.0',
|
||||
prs: ['29755'],
|
||||
description: `For improved a11y, clicking a Select component label now focuses the Select trigger element, and the TextField component's label is now styled to indicate it's interactive.`,
|
||||
|
||||
commitSha: '720033c',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.4.0',
|
||||
prs: ['29688'],
|
||||
description: `Fixed an issue with Canon's DataTable.Pagination component showing the wrong number for the "to" count.`,
|
||||
|
||||
commitSha: '206ffbe',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.4.0',
|
||||
prs: ['29665'],
|
||||
description: `Removed various typos`,
|
||||
|
||||
commitSha: '72d019d',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -95,62 +95,6 @@ export const changelog_0_5_0: ChangelogProps[] = [
|
||||
prs: ['30040'],
|
||||
description: `Remove leftover console.log from Container component.`,
|
||||
|
||||
commitSha: '269316d',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.5.0',
|
||||
prs: ['30168'],
|
||||
description: `Add min-width: 0; by default on every Flex components in Canon to help support truncated texts inside flex elements.`,
|
||||
|
||||
commitSha: '44df879',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.5.0',
|
||||
prs: ['30167'],
|
||||
description: `Fix styling for the title4 prop on the Heading component in Canon.`,
|
||||
|
||||
commitSha: 'ee6ffe6',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.5.0',
|
||||
prs: ['30165'],
|
||||
description: `Added a render prop to the Button component in Canon to use it as a link.`,
|
||||
|
||||
commitSha: 'f2f814a',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.5.0',
|
||||
prs: ['30085'],
|
||||
description: `We are updating the default size of the Button component in Canon to be small instead of medium.`,
|
||||
breaking: true,
|
||||
commitSha: '621fac9',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.5.0',
|
||||
prs: ['30097'],
|
||||
description: `We set the default size for IconButton in Canon to be small instead of medium.`,
|
||||
breaking: true,
|
||||
commitSha: 'a842554',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.5.0',
|
||||
prs: ['30013'],
|
||||
description: `Fixes spacing props on layout components and aligned on naming for the Grid component. You should now call the Grid root component using \`<Grid.Root />\` instead of just \`<Grid />\`.`,
|
||||
breaking: true,
|
||||
commitSha: '24b45ef',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.5.0',
|
||||
prs: ['30040'],
|
||||
description: `Remove leftover console.log from Container component.`,
|
||||
|
||||
commitSha: '269316d',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -9,124 +9,4 @@ export const changelog_0_6_0: ChangelogProps[] = [
|
||||
breaking: true,
|
||||
commitSha: 'e92bb9b',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.6.0',
|
||||
prs: ['30461'],
|
||||
description: `**BREAKING**: 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.`,
|
||||
breaking: true,
|
||||
commitSha: '2e30459',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.6.0',
|
||||
prs: ['30467'],
|
||||
description: `Add new Card component to Canon.`,
|
||||
|
||||
commitSha: '76255b8',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.6.0',
|
||||
prs: ['30410'],
|
||||
description: `Add new Header component to Canon.`,
|
||||
|
||||
commitSha: 'b0a6c8e',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.6.0',
|
||||
prs: ['30448'],
|
||||
description: `Improve Button, ButtonIcon and ButtonLink styling in Canon.`,
|
||||
|
||||
commitSha: 'be76576',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.6.0',
|
||||
prs: ['30440'],
|
||||
description: `Update return types for Heading & Text components for React 19.`,
|
||||
|
||||
commitSha: '17beb9b',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.6.0',
|
||||
prs: ['30453'],
|
||||
description: `Add new tertiary variant to Button, ButtonIcon and ButtonLink in Canon.`,
|
||||
|
||||
commitSha: 'eac4a4c',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.6.0',
|
||||
prs: ['30466'],
|
||||
description: `Add new Skeleton component in Canon`,
|
||||
|
||||
commitSha: '8f2e82d',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.6.0',
|
||||
prs: ['30297'],
|
||||
description: `**BREAKING**:
|
||||
|
||||
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.`,
|
||||
breaking: true,
|
||||
commitSha: '4c6d891',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.6.0',
|
||||
prs: ['30325'],
|
||||
description: `We are consolidating all css files into a single styles.css in Canon.`,
|
||||
|
||||
commitSha: '140f652',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.6.0',
|
||||
prs: ['30357'],
|
||||
description: `Add new SearchField component in Canon`,
|
||||
|
||||
commitSha: '8154fb9',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.6.0',
|
||||
prs: ['30327'],
|
||||
description: `Add new \`RadioGroup\` + \`Radio\` component to Canon`,
|
||||
|
||||
commitSha: '6910892',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.6.0',
|
||||
prs: ['30335'],
|
||||
description: `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.`,
|
||||
|
||||
commitSha: 'a8a8514',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.6.0',
|
||||
prs: ['30342'],
|
||||
description: `Added placeholder prop to TextField component.`,
|
||||
|
||||
commitSha: '667b951',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.6.0',
|
||||
prs: ['30334'],
|
||||
description: `adding export for ButtonLink so it's importable`,
|
||||
|
||||
commitSha: 'e71333a',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -119,94 +119,6 @@ export const changelog_0_7_0: ChangelogProps[] = [
|
||||
prs: ['30588'],
|
||||
description: `Adds onTabSelectionChange to ui header component.`,
|
||||
|
||||
commitSha: 'e0e886f',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.7.0',
|
||||
prs: ['30654'],
|
||||
description: `**BREAKING**: We are moving our DataTable component to React Aria. We removed our DataTable to only use Table as a single and opinionated option for tables. This new structure is made possible by using React Aria under the hood.`,
|
||||
breaking: true,
|
||||
commitSha: '0615e54',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.7.0',
|
||||
prs: ['30701'],
|
||||
description: `**BREAKING**: Move breadcrumb to fit in the \`HeaderPage\` instead of the \`Header\` in Backstage UI.`,
|
||||
breaking: true,
|
||||
commitSha: '230b410',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.7.0',
|
||||
prs: ['30800'],
|
||||
description: `Remove stylesheet import from Select component.`,
|
||||
|
||||
commitSha: '8bdc491',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.7.0',
|
||||
prs: ['30729'],
|
||||
description: `Add \`startCollapsed\` prop on the \`SearchField\` component in BUI.`,
|
||||
|
||||
commitSha: '404b426',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.7.0',
|
||||
prs: ['30675'],
|
||||
description: `Updated Menu component in Backstage UI to use useId() from React Aria instead of React to support React 17.`,
|
||||
|
||||
commitSha: 'd4e603e',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.7.0',
|
||||
prs: ['30642'],
|
||||
description: `Fixes some styles on the Select component in BUI.`,
|
||||
|
||||
commitSha: 'de89a3d',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.7.0',
|
||||
prs: ['30636'],
|
||||
description: `Fixes a couple of small bugs in BUI including setting H1 and H2 correctly on the Header and HeaderPage.`,
|
||||
|
||||
commitSha: '75fead9',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.7.0',
|
||||
prs: ['30626'],
|
||||
description: `We are motion away from \`motion\` to use \`gsap\` instead to make Backstage UI backward compatible with React 17.`,
|
||||
|
||||
commitSha: '2f9a084',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.7.0',
|
||||
prs: ['30592'],
|
||||
description: `**BREAKING**: We are upgrading our \`Text\` component to support all font sizes making the \`Heading\` component redundant. The new \`Text\` component introduces 4 sizes for title and 4 sizes for body text. All of these work in multiple colors and font weights. We improved the \`as\` prop to include all possible values. The \`Link\` component has also been updated to match the new \`Text\` component.`,
|
||||
breaking: true,
|
||||
commitSha: 'b0e47f3',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.7.0',
|
||||
prs: ['30591'],
|
||||
description: `Update styling of Tooltip element`,
|
||||
|
||||
commitSha: 'e7ff178',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.7.0',
|
||||
prs: ['30588'],
|
||||
description: `Adds onTabSelectionChange to ui header component.`,
|
||||
|
||||
commitSha: 'e0e886f',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -25,20 +25,4 @@ export const changelog_0_7_1: ChangelogProps[] = [
|
||||
|
||||
commitSha: '0ffa4c7',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.7.1',
|
||||
prs: ['31013'],
|
||||
description: `Add missing class for flex: baseline`,
|
||||
|
||||
commitSha: '7307930',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.7.1',
|
||||
prs: ['31037'],
|
||||
description: `Fix Select component to properly attach aria-label and aria-labelledby props to the rendered element for improved accessibility.`,
|
||||
|
||||
commitSha: '89da341',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -330,279 +330,4 @@ import { Disclosure, Button, DisclosurePanel } from 'react-aria-components';
|
||||
|
||||
commitSha: '00bfb83',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31493'],
|
||||
description: `**BREAKING**: Removed \`Collapsible\` component. Migrate to \`Accordion\` or use React Aria \`Disclosure\`.`,
|
||||
migration: `**Path 1: Accordion (Opinionated Styled Component)**
|
||||
|
||||
Accordion provides preset styling with a similar component structure.
|
||||
|
||||
\`\`\`diff
|
||||
- import { Collapsible } from '@backstage/ui';
|
||||
+ import { Accordion, AccordionTrigger, AccordionPanel } from '@backstage/ui';
|
||||
|
||||
- <Collapsible.Root>
|
||||
- <Collapsible.Trigger render={(props) => <Button {...props}>Toggle</Button>} />
|
||||
- <Collapsible.Panel>Content</Collapsible.Panel>
|
||||
- </Collapsible.Root>
|
||||
|
||||
+ <Accordion>
|
||||
+ <AccordionTrigger title="Toggle" />
|
||||
+ <AccordionPanel>Content</AccordionPanel>
|
||||
+ </Accordion>
|
||||
\`\`\`
|
||||
|
||||
CSS classes: \`.bui-CollapsibleRoot\` → \`.bui-Accordion\`, \`.bui-CollapsibleTrigger\` → \`.bui-AccordionTrigger\` (now on heading element), \`.bui-CollapsiblePanel\` → \`.bui-AccordionPanel\`
|
||||
|
||||
**Path 2: React Aria Disclosure (Full Customization)**
|
||||
|
||||
For custom styling without preset styles:
|
||||
|
||||
\`\`\`tsx
|
||||
import { Disclosure, Button, DisclosurePanel } from 'react-aria-components';
|
||||
|
||||
<Disclosure>
|
||||
<Button slot="trigger">Toggle</Button>
|
||||
<DisclosurePanel>Content</DisclosurePanel>
|
||||
</Disclosure>;
|
||||
\`\`\``,
|
||||
breaking: true,
|
||||
commitSha: '83c100e',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31649'],
|
||||
description: `**BREAKING**: The \`SelectProps\` interface now accepts a generic type parameter for selection mode.
|
||||
|
||||
Added searchable and multiple selection support to Select component. The component now accepts \`searchable\`, \`selectionMode\`, and \`searchPlaceholder\` props to enable filtering and multi-selection modes.`,
|
||||
migration: `If you're using \`SelectProps\` type directly, update from \`SelectProps\` to \`SelectProps<'single' | 'multiple'>\`. Component usage remains backward compatible.`,
|
||||
breaking: true,
|
||||
commitSha: '816af0f',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31618'],
|
||||
description: `Fixed CSS issues in Select component including popover width constraints, focus outline behavior, and overflow handling.`,
|
||||
|
||||
commitSha: '35a3614',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31679'],
|
||||
description: `Improved visual consistency of PasswordField, SearchField, and MenuAutocomplete components.`,
|
||||
|
||||
commitSha: '01476f0',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31673'],
|
||||
description: `Fixed dialog backdrop appearance in dark mode.`,
|
||||
|
||||
commitSha: '836b0c7',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31672'],
|
||||
description: `Removed \`@base-ui-components/react\` dependency as all components now use React Aria Components.`,
|
||||
|
||||
commitSha: '6d35a6b',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31681'],
|
||||
description: `Added \`loading\` prop to Button and ButtonIcon components for displaying spinner during async operations.`,
|
||||
|
||||
commitSha: '7839e7b',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31680'],
|
||||
description: `Fixed Table Row component to properly support opening links in new tabs via right-click or Cmd+Click when using the href prop.`,
|
||||
|
||||
commitSha: 'a00fb88',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31566'],
|
||||
description: `**BREAKING**: Migrated Avatar component from Base UI to custom implementation with size changes:
|
||||
|
||||
- Base UI-specific props are no longer supported
|
||||
- Size values have been updated:
|
||||
- New \`x-small\` size added (1.25rem / 20px)
|
||||
- \`small\` size unchanged (1.5rem / 24px)
|
||||
- \`medium\` size unchanged (2rem / 32px, default)
|
||||
- \`large\` size **changed from 3rem to 2.5rem** (40px)
|
||||
- New \`x-large\` size added (3rem / 48px)`,
|
||||
migration: `\`\`\`diff
|
||||
# Remove Base UI-specific props
|
||||
- <Avatar src="..." name="..." render={...} />
|
||||
+ <Avatar src="..." name="..." />
|
||||
|
||||
# Update large size usage to x-large for same visual size
|
||||
- <Avatar src="..." name="..." size="large" />
|
||||
+ <Avatar src="..." name="..." size="x-large" />
|
||||
\`\`\`
|
||||
|
||||
Added \`purpose\` prop for accessibility control (\`'informative'\` or \`'decoration'\`).`,
|
||||
breaking: true,
|
||||
commitSha: '539cf26',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31507'],
|
||||
description: `**BREAKING**: Fixing styles on SearchField in Backstage UI after migration to CSS modules. \`SearchField\` has now its own set of class names. We previously used class names from \`TextField\` but this approach was creating some confusion so going forward in your theme you'll be able to theme \`TextField\` and \`SearchField\` separately.`,
|
||||
breaking: true,
|
||||
commitSha: '134151f',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31525'],
|
||||
description: `Fix broken external links in Backstage UI Header component.`,
|
||||
|
||||
commitSha: 'd01de00',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31615'],
|
||||
description: `Fixed Text component to prevent \`truncate\` prop from being spread to the underlying DOM element.`,
|
||||
|
||||
commitSha: 'deaa427',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31524'],
|
||||
description: `Improved the Link component structure in Backstage UI.`,
|
||||
|
||||
commitSha: '1059f95',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31608'],
|
||||
description: `Migrated CellProfile component from Base UI Avatar to Backstage UI Avatar component.`,
|
||||
|
||||
commitSha: '6874094',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31623'],
|
||||
description: `Avatar components in x-small and small sizes now display only one initial instead of two, improving readability at smaller dimensions.`,
|
||||
|
||||
commitSha: '719d772',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31576'],
|
||||
description: `Fixed RadioGroup radio button ellipse distortion by preventing flex shrink and grow.`,
|
||||
|
||||
commitSha: '3b18d80',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31469'],
|
||||
description: `Set the color-scheme property depending on theme`,
|
||||
|
||||
commitSha: 'e16ece5',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31517'],
|
||||
description: `**BREAKING**: Migrated Checkbox component from Base UI to React Aria Components.
|
||||
|
||||
API changes required:
|
||||
|
||||
- \`checked\` → \`isSelected\`
|
||||
- \`defaultChecked\` → \`defaultSelected\`
|
||||
- \`disabled\` → \`isDisabled\`
|
||||
- \`required\` → \`isRequired\`
|
||||
- \`label\` prop removed - use \`children\` instead
|
||||
- CSS: \`bui-CheckboxLabel\` class removed
|
||||
- Data attribute: \`data-checked\` → \`data-selected\`
|
||||
- Use without label is no longer supported`,
|
||||
migration: `Before:
|
||||
|
||||
\`\`\`tsx
|
||||
<Checkbox label="Accept terms" checked={agreed} onChange={setAgreed} />
|
||||
\`\`\`
|
||||
|
||||
After:
|
||||
|
||||
\`\`\`tsx
|
||||
<Checkbox isSelected={agreed} onChange={setAgreed}>
|
||||
Accept terms
|
||||
</Checkbox>
|
||||
\`\`\`
|
||||
|
||||
Before:
|
||||
|
||||
\`\`\`tsx
|
||||
<Checkbox label="Option" disabled />
|
||||
\`\`\`
|
||||
|
||||
After:
|
||||
|
||||
\`\`\`tsx
|
||||
<Checkbox isDisabled>Option</Checkbox>
|
||||
\`\`\`
|
||||
|
||||
Before:
|
||||
|
||||
\`\`\`tsx
|
||||
<Checkbox />
|
||||
\`\`\`
|
||||
|
||||
After:
|
||||
|
||||
\`\`\`tsx
|
||||
<Checkbox>
|
||||
<VisuallyHidden>Accessible label</VisuallyHidden>
|
||||
</Checkbox>
|
||||
\`\`\``,
|
||||
breaking: true,
|
||||
commitSha: '5c614ff',
|
||||
},
|
||||
{
|
||||
components: ['menu', 'switch', 'skeleton', 'header', 'header-page', 'tabs'],
|
||||
version: '0.9.0',
|
||||
prs: ['31496'],
|
||||
description: `**BREAKING**: Changed className prop behavior to augment default styles instead of being ignored or overriding them.
|
||||
|
||||
If you were passing custom className values to any of these components that relied on the previous behavior, you may need to adjust your styles to account for the default classes now being applied alongside your custom classes.`,
|
||||
breaking: true,
|
||||
commitSha: 'b78fc45',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31516'],
|
||||
description: `Enable tree-shaking of imports other than \`*.css\`.`,
|
||||
|
||||
commitSha: 'ff9f0c3',
|
||||
},
|
||||
{
|
||||
components: [],
|
||||
version: '0.9.0',
|
||||
prs: ['31484'],
|
||||
description: `Added new VisuallyHidden component for hiding content visually while keeping it accessible to screen readers.`,
|
||||
|
||||
commitSha: '1ef3ca4',
|
||||
},
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user