Mark Grid components as legacy (#2125)

.changeset/chilled-flies-dream.md

@@ -0,0 +1,10 @@
+---
+'@sumup/circuit-ui': major
+---
+
+Moved the Grid, Row, Col, and InlineElements components to the ["legacy" status](https://circuit.sumup.com/?path=/docs/introduction-component-lifecycle--docs). Update your imports:
+
+```diff
+-import { Grid } from '@sumup/circuit-ui';
++import { Grid } from '@sumup/circuit-ui/legacy';
+```

.changeset/pretty-bananas-juggle.md

@@ -2,7 +2,7 @@
 '@sumup/circuit-ui': major
 ---
 
-Moved the Sidebar, SidebarContextProvider, and SidebarContextConsumer components to the ["legacy" status](https://circuit.sumup.com/?path=/docs/introduction-component-lifecycle--docs). Update your imports:
+Moved the Sidebar, SidebarContextProvider, SidebarContextConsumer, and Header components to the ["legacy" status](https://circuit.sumup.com/?path=/docs/introduction-component-lifecycle--docs). Update your imports:
 
 ```diff
 -import { Sidebar } from '@sumup/circuit-ui';

.changeset/smart-comics-crash.md

@@ -0,0 +1,10 @@
+---
+'@sumup/circuit-ui': major
+---
+
+Moved the `uniqueId` util to the ["legacy" status](https://circuit.sumup.com/?path=/docs/introduction-component-lifecycle--docs). Update your imports:
+
+```diff
+-import { uniqueId } from '@sumup/circuit-ui';
++import { uniqueId } from '@sumup/circuit-ui/legacy';
+```

.storybook/components/Icons.tsx

@@ -23,7 +23,6 @@ import iconsManifest from '@sumup/icons/manifest.json';
 import {
   Headline,
   Body,
-  InlineElements,
   SearchInput,
   Select,
   typography,
@@ -54,7 +53,10 @@ function getComponentName(name: string) {
   return pascalCased.join('');
 }
 
-const Filters = styled(InlineElements)`
+const Filters = styled.div`
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  gap: ${(p) => p.theme.spacings.kilo};
   margin-top: ${(p) => p.theme.spacings.tera};
   margin-bottom: ${(p) => p.theme.spacings.peta};
 `;
@@ -202,7 +204,7 @@ const Icons = () => {
                     {icon.deprecation && (
                       <Badge
                         title={icon.deprecation}
-                        variant="notify"
+                        variant="warning"
                         css={badgeStyles}
                       >
                         Deprecated

packages/circuit-ui/components/Grid/Col/Col.ts

@@ -98,6 +98,8 @@ const skipStyles = ({ theme, skip = 0 }: StyleProps & ColProps) =>
     : composeBreakpoints(createSkipStyles, theme, skip);
 
 /**
+ * @legacy
+ *
  * Content wrapping for the Grid component. Allows sizing based on provided
  * props.
  */

packages/circuit-ui/components/Grid/Grid.mdx

@@ -5,7 +5,11 @@ import * as Stories from './Grid/Grid.stories';
 
 # Grid
 
-<Status variant="stable" />
+<Status variant="legacy">
+  Use the native [CSS
+  Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
+  instead.
+</Status>
 
 ## Static columns
 

packages/circuit-ui/components/Grid/Grid/Grid.ts

@@ -38,6 +38,8 @@ const gutterStyles = ({ theme }: StyleProps) =>
   composeBreakpoints(createGutterStyles, theme, theme.grid);
 
 /**
+ * @legacy
+ *
  * A basic 12-column grid component.
  */
 export const Grid = styled('div')<NoTheme>(baseStyles, gutterStyles);

packages/circuit-ui/components/Grid/Row/Row.ts

@@ -37,6 +37,8 @@ const gutterStyles = ({ theme }: StyleProps) =>
   composeBreakpoints(createGutterStyles, theme, theme.grid);
 
 /**
+ * @legacy
+ *
  * Row wrapping for the Col component.
  */
 export const Row = styled('div')<NoTheme>(baseStyles, clearfix, gutterStyles);

packages/circuit-ui/components/InlineElements/InlineElements.tsx

@@ -155,6 +155,8 @@ const inlineMobileStyles = ({
   `;
 
 /**
+ * @legacy
+ *
  * Layout helper that displays child elements inline. Useful for form elements.
  */
 export const InlineElements = styled('div')<InlineElementsProps>(

packages/circuit-ui/index.ts

@@ -82,17 +82,9 @@ export type { ToastProviderProps } from './components/ToastContext/index.js';
 export { default as NotificationInline } from './components/NotificationInline/index.js';
 export type { NotificationInlineProps } from './components/NotificationInline/index.js';
 
-// Layout
-export { Grid, Row, Col } from './components/Grid/index.js';
-export type { ColProps } from './components/Grid/index.js';
-export { default as InlineElements } from './components/InlineElements/index.js';
-export type { InlineElementsProps } from './components/InlineElements/index.js';
-
 // Navigation
 export { default as Hamburger } from './components/Hamburger/index.js';
 export type { HamburgerProps } from './components/Hamburger/index.js';
-export { default as Header } from './components/Header/index.js';
-export type { HeaderProps } from './components/Header/index.js';
 export { default as Pagination } from './components/Pagination/index.js';
 export type { PaginationProps } from './components/Pagination/index.js';
 export {
@@ -207,8 +199,6 @@ export {
   center,
 } from './styles/style-mixins.js';
 
-export { uniqueId } from './util/id.js';
-
 // Hooks
 export { useClickOutside } from './hooks/useClickOutside/index.js';
 export { useEscapeKey } from './hooks/useEscapeKey/index.js';

packages/circuit-ui/legacy.ts

@@ -30,7 +30,15 @@ export type { CalendarTagProps } from './components/CalendarTag/index.js';
 export { default as CalendarTagTwoStep } from './components/CalendarTagTwoStep/index.js';
 export type { CalendarTagTwoStepProps } from './components/CalendarTagTwoStep/index.js';
 
+// Layout
+export { Grid, Row, Col } from './components/Grid/index.js';
+export type { ColProps } from './components/Grid/index.js';
+export { default as InlineElements } from './components/InlineElements/index.js';
+export type { InlineElementsProps } from './components/InlineElements/index.js';
+
 // Navigation
+export { default as Header } from './components/Header/index.js';
+export type { HeaderProps } from './components/Header/index.js';
 export { default as Sidebar } from './components/Sidebar/index.js';
 export type { SidebarProps } from './components/Sidebar/index.js';
 export {
@@ -41,3 +49,5 @@ export {
 // Miscellaneous
 export { default as Tooltip } from './components/Tooltip/index.js';
 export type { TooltipProps } from './components/Tooltip/index.js';
+
+export { uniqueId } from './util/id.js';

packages/circuit-ui/util/id.ts

@@ -13,14 +13,12 @@
  * limitations under the License.
  */
 
-// NOTE: Related issue https://github.com/facebook/react/issues/5867
-
 let idCounter = 0;
 
 /**
  * @deprecated
  *
- * Use the official [`useId` hook](https://beta.reactjs.org/reference/react/useId) instead.
+ * Use the official [`useId` hook](https://react.dev/reference/react/useId) instead.
  */
 export function uniqueId(prefix = ''): string {
   idCounter += 1;