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

@@ -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;

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',

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,

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',

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} />;

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 (

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 (

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 */

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>

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>) => {

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',
 });

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>) => {

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%',

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");
 }

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: {
   /**

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>();

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