diff --git a/docs-ui/scripts/sync-changelog.mjs b/docs-ui/scripts/sync-changelog.mjs index 414826a7e7..d46ff2b108 100644 --- a/docs-ui/scripts/sync-changelog.mjs +++ b/docs-ui/scripts/sync-changelog.mjs @@ -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; } diff --git a/docs-ui/src/utils/changelogs/v0.1.0.ts b/docs-ui/src/utils/changelogs/v0.1.0.ts index c93e2c3a5a..046bb24136 100644 --- a/docs-ui/src/utils/changelogs/v0.1.0.ts +++ b/docs-ui/src/utils/changelogs/v0.1.0.ts @@ -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', - }, ]; diff --git a/docs-ui/src/utils/changelogs/v0.10.0.ts b/docs-ui/src/utils/changelogs/v0.10.0.ts index 4df6785bfb..6b6eb87563 100644 --- a/docs-ui/src/utils/changelogs/v0.10.0.ts +++ b/docs-ui/src/utils/changelogs/v0.10.0.ts @@ -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 -} - href="/path" -/> -\`\`\` - -**After:** - -\`\`\`tsx -} - href="/path" -/> -\`\`\` - -For custom cell content, use the new generic \`Cell\` component: - -\`\`\`tsx -{/* Your custom content */} -\`\`\``, - 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', - }, ]; diff --git a/docs-ui/src/utils/changelogs/v0.11.0.ts b/docs-ui/src/utils/changelogs/v0.11.0.ts index 680037774f..a7dd7ab1ca 100644 --- a/docs-ui/src/utils/changelogs/v0.11.0.ts +++ b/docs-ui/src/utils/changelogs/v0.11.0.ts @@ -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 -- -- ... -- ... --
-- -+const columns: ColumnConfig[] = [ -+ { id: 'name', label: 'Name', isRowHeader: true, cell: item => }, -+ { id: 'type', label: 'Type', cell: item => }, -+]; -+ -+ -\`\`\``, - 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', - }, ]; diff --git a/docs-ui/src/utils/changelogs/v0.2.0.ts b/docs-ui/src/utils/changelogs/v0.2.0.ts index 383a16afb0..9f39331898 100644 --- a/docs-ui/src/utils/changelogs/v0.2.0.ts +++ b/docs-ui/src/utils/changelogs/v0.2.0.ts @@ -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', - }, ]; diff --git a/docs-ui/src/utils/changelogs/v0.3.0.ts b/docs-ui/src/utils/changelogs/v0.3.0.ts index eec2590e91..4a2e9faa15 100644 --- a/docs-ui/src/utils/changelogs/v0.3.0.ts +++ b/docs-ui/src/utils/changelogs/v0.3.0.ts @@ -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', - }, ]; diff --git a/docs-ui/src/utils/changelogs/v0.4.0.ts b/docs-ui/src/utils/changelogs/v0.4.0.ts index 014679ae33..a85f59c0dc 100644 --- a/docs-ui/src/utils/changelogs/v0.4.0.ts +++ b/docs-ui/src/utils/changelogs/v0.4.0.ts @@ -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: \`} /> -- Content -- - -+ -+ -+ Content -+ -\`\`\` - -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'; - - - - Content -; -\`\`\``, - 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 -- -+ - -# Update large size usage to x-large for same visual size -- -+ -\`\`\` - -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 - -\`\`\` - -After: - -\`\`\`tsx - - Accept terms - -\`\`\` - -Before: - -\`\`\`tsx - -\`\`\` - -After: - -\`\`\`tsx -Option -\`\`\` - -Before: - -\`\`\`tsx - -\`\`\` - -After: - -\`\`\`tsx - - Accessible label - -\`\`\``, - 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', - }, ];