From 9a6e84fedd4c20f9ee838568f00c5a032d9c85ad Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 27 Apr 2021 14:52:34 -0700
Subject: [PATCH] Deprecate more standard components

Summary: Additional deprecation warnings for components that should be imported from flipper-plugin

Reviewed By: nikoant

Differential Revision: D28027382

fbshipit-source-id: e46a40a950adb615d206bc08334893263c56dd1f
---
 desktop/app/src/ui/components/AlternatingRows.tsx       | 1 +
 desktop/app/src/ui/components/Block.tsx                 | 1 +
 desktop/app/src/ui/components/Bordered.tsx              | 1 +
 desktop/app/src/ui/components/Box.tsx                   | 3 +++
 desktop/app/src/ui/components/Button.tsx                | 1 +
 desktop/app/src/ui/components/ButtonGroup.tsx           | 1 +
 desktop/app/src/ui/components/ButtonGroupChain.tsx      | 2 ++
 desktop/app/src/ui/components/ButtonNavigationGroup.tsx | 1 +
 desktop/app/src/ui/components/CenteredView.tsx          | 1 +
 desktop/app/src/ui/components/Checkbox.tsx              | 1 +
 desktop/app/src/ui/components/CodeBlock.tsx             | 3 +++
 desktop/app/src/ui/components/Radio.tsx                 | 1 +
 desktop/app/src/ui/components/Scrollable.tsx            | 3 +++
 desktop/app/src/ui/components/Tab.tsx                   | 3 +++
 desktop/app/src/ui/components/Tabs.tsx                  | 1 +
 desktop/app/src/ui/components/Tooltip.tsx               | 3 +++
 desktop/app/src/ui/components/colors.tsx                | 3 +++
 17 files changed, 30 insertions(+)

diff --git a/desktop/app/src/ui/components/AlternatingRows.tsx b/desktop/app/src/ui/components/AlternatingRows.tsx
index e7fb4157c..8ee033059 100644
--- a/desktop/app/src/ui/components/AlternatingRows.tsx
+++ b/desktop/app/src/ui/components/AlternatingRows.tsx
@@ -14,6 +14,7 @@ import {colors} from './colors';
 
 /**
  * Displays all children in a bordered, zebra styled vertical layout
+ * @deprecated use Layout.Container gap
  */
 const AlternatingRows: React.FC<{
   children: React.ReactNode[] | React.ReactNode;
diff --git a/desktop/app/src/ui/components/Block.tsx b/desktop/app/src/ui/components/Block.tsx
index d7e38013f..c40ea04b6 100644
--- a/desktop/app/src/ui/components/Block.tsx
+++ b/desktop/app/src/ui/components/Block.tsx
@@ -11,6 +11,7 @@ import styled from '@emotion/styled';
 
 /**
  * A Block styled div
+ * @deprecated use Layout.Container
  */
 const Block = styled.div({
   display: 'block',
diff --git a/desktop/app/src/ui/components/Bordered.tsx b/desktop/app/src/ui/components/Bordered.tsx
index 3aef905a4..33823a920 100644
--- a/desktop/app/src/ui/components/Bordered.tsx
+++ b/desktop/app/src/ui/components/Bordered.tsx
@@ -12,6 +12,7 @@ import {colors} from './colors';
 
 /**
  * Puts a gray border around something
+ * @deprecated use Layout.Container
  */
 const Bordered = styled.div({
   borderRadius: 4,
diff --git a/desktop/app/src/ui/components/Box.tsx b/desktop/app/src/ui/components/Box.tsx
index b5794441d..86da293de 100644
--- a/desktop/app/src/ui/components/Box.tsx
+++ b/desktop/app/src/ui/components/Box.tsx
@@ -10,6 +10,9 @@
 import FlexBox from './FlexBox';
 import styled from '@emotion/styled';
 
+/**
+ * @deprecated use Layout.Container
+ */
 const Box = styled(FlexBox)({
   height: '100%',
   overflow: 'auto',
diff --git a/desktop/app/src/ui/components/Button.tsx b/desktop/app/src/ui/components/Button.tsx
index c64cb87e9..ee749e040 100644
--- a/desktop/app/src/ui/components/Button.tsx
+++ b/desktop/app/src/ui/components/Button.tsx
@@ -260,6 +260,7 @@ type Props = {
 
 /**
  * A simple button, used in many parts of the application.
+ * @deprecated use import {Button} from `antd` instead.
  */
 export default function Button(props: Props) {
   return <SandyButton {...props} />;
diff --git a/desktop/app/src/ui/components/ButtonGroup.tsx b/desktop/app/src/ui/components/ButtonGroup.tsx
index fd44c8dc5..8ff111f08 100644
--- a/desktop/app/src/ui/components/ButtonGroup.tsx
+++ b/desktop/app/src/ui/components/ButtonGroup.tsx
@@ -32,6 +32,7 @@ export const ButtonGroupContext = createContext(false);
  *     <Button>Three</Button>
  *   </ButtonGroup>
  * ```
+ * @deprecated use Layout.Horizontal with flags: gap pad wrap
  */
 export default function ButtonGroup({children}: {children: React.ReactNode}) {
   return (
diff --git a/desktop/app/src/ui/components/ButtonGroupChain.tsx b/desktop/app/src/ui/components/ButtonGroupChain.tsx
index 6d9363f66..0e7dfccc1 100644
--- a/desktop/app/src/ui/components/ButtonGroupChain.tsx
+++ b/desktop/app/src/ui/components/ButtonGroupChain.tsx
@@ -67,6 +67,8 @@ type Props = {
  *     <Button>Three</Button>
  *   </ButtonGroupChain>
  * ```
+ *
+ * @deprecated use Layout.Horizontal with flags: gap pad wrap
  */
 export default function ButtonGroupChain({children, iconSize, icon}: Props) {
   return (
diff --git a/desktop/app/src/ui/components/ButtonNavigationGroup.tsx b/desktop/app/src/ui/components/ButtonNavigationGroup.tsx
index 496680a4d..6f099f3e4 100644
--- a/desktop/app/src/ui/components/ButtonNavigationGroup.tsx
+++ b/desktop/app/src/ui/components/ButtonNavigationGroup.tsx
@@ -13,6 +13,7 @@ import React from 'react';
 
 /**
  * Button group to navigate back and forth.
+ * @deprecated
  */
 export default function ButtonNavigationGroup(props: {
   /** Back button is enabled */
diff --git a/desktop/app/src/ui/components/CenteredView.tsx b/desktop/app/src/ui/components/CenteredView.tsx
index b8100f9fb..7216c18b8 100644
--- a/desktop/app/src/ui/components/CenteredView.tsx
+++ b/desktop/app/src/ui/components/CenteredView.tsx
@@ -30,6 +30,7 @@ ContentWrapper.displayName = 'CenteredView:ContentWrapper';
 /**
  * CenteredView creates a scrollable container with fixed with, centered content.
  * Recommended to combine with RoundedSection
+ * @deprecated
  */
 const CenteredView: React.FC<{}> = ({children}) => (
   <Container grow>
diff --git a/desktop/app/src/ui/components/Checkbox.tsx b/desktop/app/src/ui/components/Checkbox.tsx
index 20ad6461c..099c39109 100644
--- a/desktop/app/src/ui/components/Checkbox.tsx
+++ b/desktop/app/src/ui/components/Checkbox.tsx
@@ -28,6 +28,7 @@ CheckboxContainer.displayName = 'Checkbox:CheckboxContainer';
 
 /**
  * A checkbox to toggle UI state
+ * @deprecated use Checkbox from 'antd' instead
  */
 export default class Checkbox extends PureComponent<CheckboxProps> {
   onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/desktop/app/src/ui/components/CodeBlock.tsx b/desktop/app/src/ui/components/CodeBlock.tsx
index 494a4bac8..9c459bae9 100644
--- a/desktop/app/src/ui/components/CodeBlock.tsx
+++ b/desktop/app/src/ui/components/CodeBlock.tsx
@@ -9,6 +9,9 @@
 
 import styled from '@emotion/styled';
 
+/**
+ * @deprecated, use <Typography.Paragraph><pre>.... instead.
+ */
 const CodeBlock = styled.div({
   fontFamily: 'monospace',
 });
diff --git a/desktop/app/src/ui/components/Radio.tsx b/desktop/app/src/ui/components/Radio.tsx
index 3823b1ed9..4d9b65fa1 100644
--- a/desktop/app/src/ui/components/Radio.tsx
+++ b/desktop/app/src/ui/components/Radio.tsx
@@ -28,6 +28,7 @@ RadioboxContainer.displayName = 'Radiobox:RadioboxContainer';
 
 /**
  * A radio button to toggle UI state
+ * @deprecated use Radio from 'antd'
  */
 export default class Radio extends PureComponent<RadioProps> {
   onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/desktop/app/src/ui/components/Scrollable.tsx b/desktop/app/src/ui/components/Scrollable.tsx
index e360412e7..981326b3f 100644
--- a/desktop/app/src/ui/components/Scrollable.tsx
+++ b/desktop/app/src/ui/components/Scrollable.tsx
@@ -13,6 +13,9 @@ import {Property} from 'csstype';
 
 type Props = {children: React.ReactNode; background?: Property.Background<any>};
 
+/**
+ * @deprecated use Layout.ScrollContainer from 'flipper-plugin'
+ */
 const Scrollable = styled.div<Props>(({background}) => ({
   width: '100%',
   height: '100%',
diff --git a/desktop/app/src/ui/components/Tab.tsx b/desktop/app/src/ui/components/Tab.tsx
index 57b3bf0dd..942845aac 100644
--- a/desktop/app/src/ui/components/Tab.tsx
+++ b/desktop/app/src/ui/components/Tab.tsx
@@ -40,6 +40,9 @@ export type Props = {
   width?: Property.Width<number>;
 };
 
+/**
+ * @deprecated use Tab from flipper-plugin
+ */
 export default function Tab(_props: Props): JSX.Element {
   throw new Error("don't render me");
 }
diff --git a/desktop/app/src/ui/components/Tabs.tsx b/desktop/app/src/ui/components/Tabs.tsx
index 16d1838e9..0856e9d41 100644
--- a/desktop/app/src/ui/components/Tabs.tsx
+++ b/desktop/app/src/ui/components/Tabs.tsx
@@ -111,6 +111,7 @@ TabContent.displayName = 'Tabs:TabContent';
 
 /**
  * A Tabs component.
+ * @deprecated use Tabs from flipper-plugin
  */
 export default function Tabs(props: {
   /**
diff --git a/desktop/app/src/ui/components/Tooltip.tsx b/desktop/app/src/ui/components/Tooltip.tsx
index bcc6fccfd..f87bb4468 100644
--- a/desktop/app/src/ui/components/Tooltip.tsx
+++ b/desktop/app/src/ui/components/Tooltip.tsx
@@ -24,6 +24,9 @@ type TooltipProps = {
   options?: TooltipOptions;
 };
 
+/**
+ * @deprecated use Tooltip from 'tantd'
+ */
 export default function Tooltip(props: TooltipProps) {
   const tooltipManager = useContext(TooltipContext);
   const ref = useRef<HTMLDivElement | null>();
diff --git a/desktop/app/src/ui/components/colors.tsx b/desktop/app/src/ui/components/colors.tsx
index d442cf2f7..65e2c3106 100644
--- a/desktop/app/src/ui/components/colors.tsx
+++ b/desktop/app/src/ui/components/colors.tsx
@@ -11,6 +11,9 @@ import {theme} from 'flipper-plugin';
 
 // Last updated: Jan 30 2016
 
+/**
+ * @deprecated use `theme` from 'flipper-plugin' instead, which exposes semantic colors that respect dark/light mode.
+ */
 export const colors = {
   // FIG UI Core
   blue: '#4267b2', // Blue - Active-state nav glyphs, nav bars, links, buttons