chore: deprecate components (#1395)

launchdarkly · Aug 26, 2024 · 7cf2ad8 · 7cf2ad8
1 parent 60f2c46
commit 7cf2ad8
Show file tree

Hide file tree

Showing 23 changed files with 76 additions and 14 deletions.
diff --git a/packages/alert/src/Alert.tsx b/packages/alert/src/Alert.tsx
@@ -77,6 +77,11 @@ type AlertProps = ComponentProps<'div'> & {
 	};
 };
 
+/**
+ * @deprecated use `Alert` from `@launchpad-ui/components` instead
+ *
+ * https://launchpad.launchdarkly.com/?path=/docs/components-status-alert--docs
+ */
 const Alert = ({
 	children,
 	className,

diff --git a/packages/alert/stories/Alert.stories.tsx b/packages/alert/stories/Alert.stories.tsx
@@ -7,12 +7,13 @@ import { Alert } from '../src';
 
 export default {
 	component: Alert,
-	title: 'Legacy/Sunset/Alert',
+	title: 'Legacy/Deprecated/Alert',
 	description: 'Actions trigger alerts based on user interaction.',
 	parameters: {
 		status: {
 			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__ALERT,
 		},
+		chromatic: { disableSnapshot: true },
 	},
 	argTypes: {
 		testId: {

diff --git a/packages/banner/src/Banner.tsx b/packages/banner/src/Banner.tsx
@@ -13,6 +13,11 @@ type BannerProps = ComponentProps<'div'> & {
 	header?: ReactNode;
 };
 
+/**
+ * @deprecated use `Alert` from `@launchpad-ui/components` instead
+ *
+ * https://launchpad.launchdarkly.com/?path=/docs/components-status-alert--docs
+ */
 const Banner = ({
 	kind,
 	className,

diff --git a/packages/banner/stories/Banner.stories.tsx b/packages/banner/stories/Banner.stories.tsx
@@ -4,12 +4,13 @@ import { Banner } from '../src';
 
 export default {
 	component: Banner,
-	title: 'Legacy/Sunset/Banner',
+	title: 'Legacy/Deprecated/Banner',
 	description: 'Banners contain a system-wide message or status.',
 	parameters: {
 		status: {
 			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__BANNER,
 		},
+		chromatic: { disableSnapshot: true },
 	},
 	argTypes: {
 		testId: {

diff --git a/packages/clipboard/stories/CopyToClipboard.stories.tsx b/packages/clipboard/stories/CopyToClipboard.stories.tsx
@@ -14,6 +14,7 @@ export default {
 		status: {
 			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__CLIPBOARD,
 		},
+		chromatic: { disableSnapshot: true },
 	},
 	argTypes: {
 		children: {

diff --git a/packages/data-table/src/DataTable.tsx b/packages/data-table/src/DataTable.tsx
@@ -53,6 +53,11 @@ type DataTableProps<T extends object> = TableStateProps<T> &
 		'data-test-id'?: string;
 	};
 
+/**
+ * @deprecated use `Table` from `@launchpad-ui/components` instead
+ *
+ * https://launchpad.launchdarkly.com/?path=/docs/components-collections-table--docs
+ */
 const DataTable = forwardRef(
 	<T extends object>(
 		{ className, 'data-test-id': testId = 'data-table', ...props }: DataTableProps<T>,

diff --git a/packages/data-table/stories/DataTable.stories.tsx b/packages/data-table/stories/DataTable.stories.tsx
@@ -9,12 +9,13 @@ import { DataTable } from '../src';
 
 export default {
 	component: DataTable,
-	title: 'Legacy/Sunset/DataTable',
+	title: 'Legacy/Deprecated/DataTable',
 	description: 'An element used to display data in rows and columns.',
 	parameters: {
 		status: {
 			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__DATA_TABLE,
 		},
+		chromatic: { disableSnapshot: true },
 	},
 };
 

diff --git a/packages/form/src/useNumberField.tsx b/packages/form/src/useNumberField.tsx
@@ -23,6 +23,11 @@ const defaultFormatOptions: Intl.NumberFormatOptions = {
 	maximumFractionDigits: 6,
 };
 
+/**
+ * @deprecated use `NumberField` from `@launchpad-ui/components` instead
+ *
+ * https://launchpad.launchdarkly.com/?path=/docs/components-forms-numberfield--docs
+ */
 const useNumberField = ({
 	className,
 	'data-test-id': testId = 'input',

diff --git a/packages/form/stories/useNumberField.stories.tsx b/packages/form/stories/useNumberField.stories.tsx
@@ -28,7 +28,7 @@ const Demo = (props: Partial<FormFieldProps> = {}) => {
 
 export default {
 	component: Demo,
-	title: 'Legacy/Sunset/Form/useNumberField',
+	title: 'Legacy/Deprecated/Form/useNumberField',
 	description: 'A text field allows the user to provide numeric values.',
 	parameters: {
 		status: {

diff --git a/packages/icons/stories/StatusIcon.stories.tsx b/packages/icons/stories/StatusIcon.stories.tsx
@@ -4,13 +4,14 @@ import { StatusIcon } from '../src';
 
 export default {
 	component: StatusIcon,
-	title: 'Legacy/Sunset/Icon/StatusIcon',
+	title: 'Legacy/Deprecated/Icon/StatusIcon',
 	description:
 		'Flair icons can be used as either square or circular icons with gradient backgrounds.',
 	parameters: {
 		status: {
 			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__ICONS,
 		},
+		chromatic: { disableSnapshot: true },
 	},
 };
 

diff --git a/packages/snackbar/stories/Snackbar.stories.tsx b/packages/snackbar/stories/Snackbar.stories.tsx
@@ -10,6 +10,7 @@ export default {
 		status: {
 			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__SNACKBAR,
 		},
+		chromatic: { disableSnapshot: true },
 	},
 };
 

diff --git a/packages/snackbar/stories/SnackbarCenter.stories.tsx b/packages/snackbar/stories/SnackbarCenter.stories.tsx
@@ -11,6 +11,9 @@ export default {
 	component: SnackbarCenter,
 	title: 'Legacy/Deprecated/Snackbar/SnackbarCenter',
 	description: 'A container for snackbars.',
+	parameters: {
+		chromatic: { disableSnapshot: true },
+	},
 };
 
 type Story = StoryObj<typeof SnackbarCenter>;

diff --git a/packages/tab-list/src/TabList.tsx b/packages/tab-list/src/TabList.tsx
@@ -24,13 +24,10 @@ type TabListProps<T extends string | number> = AriaTabListProps<HTMLDivElement>
 	'data-test-id'?: string;
 };
 
-/** React-aria' useTabListState hook supports a
- * selectedKey under the hood for showing
- * the selected tab, and disabledKeys for disabling
- * tabs. The prop names are not very intuitive,
- * so we use activeTab and disabledTabs instead
- * and re-assign props at the component level
- * for an improved developer experience.
+/**
+ * @deprecated use `Tabs` from `@launchpad-ui/components` instead
+ *
+ * https://launchpad.launchdarkly.com/?path=/docs/components-navigation-tabs--docs
  */
 const TabList = <T extends number | string>(props: TabListProps<T>) => {
 	const {

diff --git a/packages/tab-list/stories/TabList.stories.tsx b/packages/tab-list/stories/TabList.stories.tsx
@@ -7,12 +7,13 @@ import { TabList } from '../src';
 
 export default {
 	component: TabList,
-	title: 'Legacy/Sunset/TabList',
+	title: 'Legacy/Deprecated/TabList',
 	description: 'TabList navigates between related sections of content on the same page.',
 	parameters: {
 		status: {
 			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__TAB_LIST,
 		},
+		chromatic: { disableSnapshot: true },
 	},
 };
 

diff --git a/packages/table/src/Table.tsx b/packages/table/src/Table.tsx
@@ -12,6 +12,11 @@ type TableProps = ComponentProps<'table'> & {
 	'data-test-id'?: string;
 };
 
+/**
+ * @deprecated use `Table` from `@launchpad-ui/components` instead
+ *
+ * https://launchpad.launchdarkly.com/?path=/docs/components-collections-table--docs
+ */
 const Table = ({
 	auto,
 	compact,

diff --git a/packages/table/src/TableBody.tsx b/packages/table/src/TableBody.tsx
@@ -8,6 +8,11 @@ type TableBodyProps = ComponentProps<'tbody'> & {
 	'data-test-id'?: string;
 };
 
+/**
+ * @deprecated use `Table` from `@launchpad-ui/components` instead
+ *
+ * https://launchpad.launchdarkly.com/?path=/docs/components-collections-table--docs
+ */
 const TableBody = ({
 	className,
 	children,

diff --git a/packages/table/src/TableCell.tsx b/packages/table/src/TableCell.tsx
@@ -28,6 +28,11 @@ type TableCellProps =
 	| TableCellWithScopeProps
 	| (TableCellWithHeadersProps & TableCellWithScopeProps);
 
+/**
+ * @deprecated use `Table` from `@launchpad-ui/components` instead
+ *
+ * https://launchpad.launchdarkly.com/?path=/docs/components-collections-table--docs
+ */
 const TableCell = ({ align = 'left', className, children, ...rest }: TableCellProps) => {
 	const classes = cx(styles['Table-cell'], styles[`Table-cell--${align}`], className);
 

diff --git a/packages/table/src/TableHead.tsx b/packages/table/src/TableHead.tsx
@@ -8,6 +8,11 @@ type TableHeadProps = ComponentProps<'thead'> & {
 	'data-test-id'?: string;
 };
 
+/**
+ * @deprecated use `Table` from `@launchpad-ui/components` instead
+ *
+ * https://launchpad.launchdarkly.com/?path=/docs/components-collections-table--docs
+ */
 const TableHead = ({
 	className,
 	children,

diff --git a/packages/table/src/TableHeadCell.tsx b/packages/table/src/TableHeadCell.tsx
@@ -15,6 +15,11 @@ type TableHeadCellProps = ComponentProps<'th'> & {
 		| 'six-of-twelve';
 };
 
+/**
+ * @deprecated use `Table` from `@launchpad-ui/components` instead
+ *
+ * https://launchpad.launchdarkly.com/?path=/docs/components-collections-table--docs
+ */
 const TableHeadCell = ({
 	align = 'left',
 	className,

diff --git a/packages/table/src/TableRow.tsx b/packages/table/src/TableRow.tsx
@@ -9,6 +9,11 @@ type TableRowProps = HTMLProps<HTMLTableRowElement> & {
 	'data-test-id'?: string;
 };
 
+/**
+ * @deprecated use `Table` from `@launchpad-ui/components` instead
+ *
+ * https://launchpad.launchdarkly.com/?path=/docs/components-collections-table--docs
+ */
 const TableRow = ({
 	className,
 	children,

diff --git a/packages/table/stories/Table.stories.tsx b/packages/table/stories/Table.stories.tsx
@@ -5,12 +5,13 @@ import { Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow } from
 export default {
 	component: Table,
 	subcomponents: { TableBody, TableCell, TableHead, TableHeadCell, TableRow },
-	title: 'Legacy/Sunset/Table',
+	title: 'Legacy/Deprecated/Table',
 	description: 'An element used to organize and display data to users.',
 	parameters: {
 		status: {
 			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__TABLE,
 		},
+		chromatic: { disableSnapshot: true },
 	},
 };
 

diff --git a/packages/toast/stories/Toast.stories.tsx b/packages/toast/stories/Toast.stories.tsx
@@ -10,6 +10,7 @@ export default {
 		status: {
 			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__TOAST,
 		},
+		chromatic: { disableSnapshot: true },
 	},
 };
 

diff --git a/packages/toast/stories/ToastCenter.stories.tsx b/packages/toast/stories/ToastCenter.stories.tsx
@@ -11,6 +11,9 @@ export default {
 	component: ToastCenter,
 	title: 'Legacy/Deprecated/Toast/ToastCenter',
 	description: 'A container for toasts.',
+	parameters: {
+		chromatic: { disableSnapshot: true },
+	},
 };
 
 type Story = StoryObj<typeof ToastCenter>;