From 0c5351760e6e94bd6ebd9302d7163debd4ef338d Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 13 Oct 2025 23:41:57 +0100 Subject: [PATCH] Remove ScrollArea from BUI Signed-off-by: Charles de Dreuille --- .changeset/stupid-glasses-stick.md | 5 + packages/ui/report.api.md | 29 ----- .../ui/src/components/Menu/Menu.module.css | 15 --- .../ScrollArea/ScrollArea.module.css | 67 ------------ .../ScrollArea/ScrollArea.stories.tsx | 67 ------------ .../src/components/ScrollArea/ScrollArea.tsx | 101 ------------------ .../ui/src/components/ScrollArea/index.ts | 17 --- packages/ui/src/index.ts | 1 - packages/ui/src/utils/componentDefinitions.ts | 8 -- 9 files changed, 5 insertions(+), 305 deletions(-) create mode 100644 .changeset/stupid-glasses-stick.md delete mode 100644 packages/ui/src/components/ScrollArea/ScrollArea.module.css delete mode 100644 packages/ui/src/components/ScrollArea/ScrollArea.stories.tsx delete mode 100644 packages/ui/src/components/ScrollArea/ScrollArea.tsx delete mode 100644 packages/ui/src/components/ScrollArea/index.ts diff --git a/.changeset/stupid-glasses-stick.md b/.changeset/stupid-glasses-stick.md new file mode 100644 index 0000000000..449ced0f48 --- /dev/null +++ b/.changeset/stupid-glasses-stick.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': minor +--- + +**BREAKING** The ScrollArea component has been removed from Backstage UI because it did not meet our accessibility standards. diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index 8a19c039a7..2c7d9f1fba 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -34,7 +34,6 @@ import { ReactNode } from 'react'; import { RefAttributes } from 'react'; import type { RemixiconComponentType } from '@remixicon/react'; import { RowProps } from 'react-aria-components'; -import { ScrollArea as ScrollArea_2 } from '@base-ui-components/react/scroll-area'; import type { SearchFieldProps as SearchFieldProps_2 } from 'react-aria-components'; import type { SelectProps as SelectProps_2 } from 'react-aria-components'; import type { SeparatorProps } from 'react-aria-components'; @@ -624,14 +623,6 @@ export const componentDefinitions: { readonly radio: 'bui-Radio'; }; }; - readonly ScrollArea: { - readonly classNames: { - readonly root: 'bui-ScrollAreaRoot'; - readonly viewport: 'bui-ScrollAreaViewport'; - readonly scrollbar: 'bui-ScrollAreaScrollbar'; - readonly thumb: 'bui-ScrollAreaThumb'; - }; - }; readonly SearchField: { readonly classNames: { readonly root: 'bui-SearchField'; @@ -1265,26 +1256,6 @@ export type Responsive = T | Partial>; // @public (undocumented) export function Row(props: RowProps): JSX_2.Element; -// @public (undocumented) -export const ScrollArea: { - Root: ForwardRefExoticComponent< - Omit, 'ref'> & - RefAttributes - >; - Viewport: ForwardRefExoticComponent< - Omit, 'ref'> & - RefAttributes - >; - Scrollbar: ForwardRefExoticComponent< - Omit, 'ref'> & - RefAttributes - >; - Thumb: ForwardRefExoticComponent< - Omit, 'ref'> & - RefAttributes - >; -}; - // @public (undocumented) export const SearchField: ForwardRefExoticComponent< SearchFieldProps & RefAttributes diff --git a/packages/ui/src/components/Menu/Menu.module.css b/packages/ui/src/components/Menu/Menu.module.css index ab733edb5b..72b59f36bd 100644 --- a/packages/ui/src/components/Menu/Menu.module.css +++ b/packages/ui/src/components/Menu/Menu.module.css @@ -62,21 +62,6 @@ padding-block: var(--bui-space-1); } - /* Ensure ScrollArea works properly within MenuRA popover */ - .bui-MenuPopover .bui-ScrollAreaRoot { - /* Take full height of popover */ - height: 100%; - min-height: 0; - flex: 1; - /* Ensure the root container has proper height constraints */ - display: flex; - flex-direction: column; - } - - .bui-MenuPopover .bui-ScrollAreaScrollbar { - margin-inline: var(--bui-space-1_5); - } - .bui-MenuItem { padding-inline: var(--bui-space-1); display: block; diff --git a/packages/ui/src/components/ScrollArea/ScrollArea.module.css b/packages/ui/src/components/ScrollArea/ScrollArea.module.css deleted file mode 100644 index 4e2fea06a6..0000000000 --- a/packages/ui/src/components/ScrollArea/ScrollArea.module.css +++ /dev/null @@ -1,67 +0,0 @@ -/* - * Copyright 2025 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -@layer components { - .bui-ScrollAreaRoot { - box-sizing: border-box; - width: 100%; - } - - .bui-ScrollAreaViewport { - height: 100%; - overscroll-behavior: contain; - } - - .bui-ScrollAreaContent { - display: flex; - flex-direction: column; - gap: 1rem; - padding-block: 0.75rem; - padding-left: 1rem; - padding-right: 1.5rem; - } - - .bui-ScrollAreaScrollbar { - display: flex; - justify-content: center; - background-color: var(--bui-scrollbar); - width: 0.25rem; - border-radius: 0.375rem; - margin: 0.5rem; - opacity: 0; - transition: opacity 150ms 300ms; - - &[data-hovering], - &[data-scrolling] { - opacity: 1; - transition-duration: 75ms; - transition-delay: 0ms; - } - - &::before { - content: ''; - position: absolute; - width: 1.25rem; - height: 100%; - } - } - - .bui-ScrollAreaThumb { - width: 100%; - border-radius: inherit; - background-color: var(--bui-scrollbar-thumb); - } -} diff --git a/packages/ui/src/components/ScrollArea/ScrollArea.stories.tsx b/packages/ui/src/components/ScrollArea/ScrollArea.stories.tsx deleted file mode 100644 index 48a329eea4..0000000000 --- a/packages/ui/src/components/ScrollArea/ScrollArea.stories.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import type { Meta, StoryObj } from '@storybook/react-vite'; -import { ScrollArea } from './ScrollArea'; -import { Text } from '../Text/Text'; - -const meta = { - title: 'Backstage UI/ScrollArea', - component: ScrollArea.Root, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - render: () => ( - - -
- - Vernacular architecture is building done outside any academic - tradition, and without professional guidance. It is not a particular - architectural movement or style, but rather a broad category, - encompassing a wide range and variety of building types, with - differing methods of construction, from around the world, both - historical and extant and classical and modern. Vernacular - architecture constitutes 95% of the world's built environment, as - estimated in 1995 by Amos Rapoport, as measured against the small - percentage of new buildings every year designed by architects and - built by engineers. - - - This type of architecture usually serves immediate, local needs, is - constrained by the materials available in its particular region and - reflects local traditions and cultural practices. The study of - vernacular architecture does not examine formally schooled - architects, but instead that of the design skills and tradition of - local builders, who were rarely given any attribution for the work. - More recently, vernacular architecture has been examined by - designers and the building industry in an effort to be more energy - conscious with contemporary design and construction—part of a - broader interest in sustainable design. - -
- - - - - - ), -}; diff --git a/packages/ui/src/components/ScrollArea/ScrollArea.tsx b/packages/ui/src/components/ScrollArea/ScrollArea.tsx deleted file mode 100644 index e182ba8c99..0000000000 --- a/packages/ui/src/components/ScrollArea/ScrollArea.tsx +++ /dev/null @@ -1,101 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { forwardRef } from 'react'; -import { ScrollArea as ScrollAreaPrimitive } from '@base-ui-components/react/scroll-area'; -import clsx from 'clsx'; -import { useStyles } from '../../hooks/useStyles'; -import styles from './ScrollArea.module.css'; - -const ScrollAreaRoot = forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => { - const { classNames } = useStyles('ScrollArea'); - - return ( - - ); -}); -ScrollAreaRoot.displayName = ScrollAreaPrimitive.Root.displayName; - -const ScrollAreaViewport = forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => { - const { classNames } = useStyles('ScrollArea'); - - return ( - - ); -}); -ScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName; - -const ScrollAreaScrollbar = forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => { - const { classNames } = useStyles('ScrollArea'); - - return ( - - ); -}); -ScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName; - -const ScrollAreaThumb = forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => { - const { classNames } = useStyles('ScrollArea'); - - return ( - - ); -}); -ScrollAreaThumb.displayName = ScrollAreaPrimitive.Thumb.displayName; - -/** @public */ -export const ScrollArea = { - Root: ScrollAreaRoot, - Viewport: ScrollAreaViewport, - Scrollbar: ScrollAreaScrollbar, - Thumb: ScrollAreaThumb, -}; diff --git a/packages/ui/src/components/ScrollArea/index.ts b/packages/ui/src/components/ScrollArea/index.ts deleted file mode 100644 index 20dab2d8ec..0000000000 --- a/packages/ui/src/components/ScrollArea/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './ScrollArea'; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 8f79037f8f..3ab161841f 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -51,7 +51,6 @@ export * from './components/Text'; export * from './components/TextField'; export * from './components/Tooltip'; export * from './components/Menu'; -export * from './components/ScrollArea'; export * from './components/SearchField'; export * from './components/Link'; export * from './components/Select'; diff --git a/packages/ui/src/utils/componentDefinitions.ts b/packages/ui/src/utils/componentDefinitions.ts index 8a4f3c8ad7..d2d1450f59 100644 --- a/packages/ui/src/utils/componentDefinitions.ts +++ b/packages/ui/src/utils/componentDefinitions.ts @@ -279,14 +279,6 @@ export const componentDefinitions = { radio: 'bui-Radio', }, }, - ScrollArea: { - classNames: { - root: 'bui-ScrollAreaRoot', - viewport: 'bui-ScrollAreaViewport', - scrollbar: 'bui-ScrollAreaScrollbar', - thumb: 'bui-ScrollAreaThumb', - }, - }, SearchField: { classNames: { root: 'bui-SearchField',