5589a1b77b
Summary:
This diff introduces a set of components:
VBox: use this to group things vertically, it little more than a container that fills the full width and adds bottom margin (see screenshot: creating distance between the boxes)
HBox: use to divide a space horizontal in two, and distribute it over two children, supports growing the right side, left side or both equally. In the image used to reserve the necessary width for the image, and give the remaining space to the text
Info: A component that shows a message, prestyled with one of the four types: info, error, warning, pending.
{F222993480}
Reviewed By: jknoxville
Differential Revision: D18595291
fbshipit-source-id: 1957db1b606b2e44e3104b10d32ad8ce75af6adc
26 lines
629 B
TypeScript
26 lines
629 B
TypeScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import React from 'react';
|
|
import FlexColumn from './FlexColumn';
|
|
import Label from './Label';
|
|
import VBox from './VBox';
|
|
|
|
/**
|
|
* Vertically arranged section that starts with a label and includes standard margins
|
|
*/
|
|
const Labeled: React.FC<{title: string}> = ({title, children}) => (
|
|
<FlexColumn>
|
|
<Label style={{marginBottom: 6}}>{title}</Label>
|
|
<VBox>{children}</VBox>
|
|
</FlexColumn>
|
|
);
|
|
|
|
export default Labeled;
|