@fluentui/react-northstar
Version:
A themable React component library.
81 lines (80 loc) • 3.49 kB
TypeScript
import { ComponentSlotStyle, ComponentVariablesInput } from '@fluentui/styles';
import { ComponentDesignProp } from '@fluentui/react-bindings';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { ReactChildren } from '../types';
export interface StyledComponentProps<P = any, V = any> {
/** Additional CSS styles to apply to the component instance. */
styles?: ComponentSlotStyle<P, V>;
/** Override for theme site variables to allow modifications of component styling via themes. */
variables?: ComponentVariablesInput;
}
export interface UIComponentProps<P = any, V = any> extends StyledComponentProps<P, V> {
/** Additional CSS class name(s) to apply. */
className?: string;
design?: ComponentDesignProp;
}
export declare type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
export declare type AlignValue = 'start' | 'end' | 'center' | 'justify';
export interface ColorComponentProps<TColor = string> {
/** A component can have a color. */
color?: TColor;
}
export interface ContentComponentProps<TContent = React.ReactNode> {
/** Shorthand for primary content. */
content?: TContent;
}
export interface ChildrenComponentProps<TChildren = ReactChildren> {
/**
* Content for childrenApi
* @docSiteIgnore
*/
children?: TChildren;
}
export interface CreateCommonConfig {
accessibility?: boolean;
children?: boolean | 'node' | 'element';
as?: boolean;
className?: boolean;
color?: boolean;
content?: boolean | 'node' | 'shorthand';
styled?: boolean;
}
export declare const commonPropTypes: {
createCommon: (config?: CreateCommonConfig) => {
styles: PropTypes.Requireable<object>;
variables: PropTypes.Requireable<object>;
design: PropTypes.Requireable<PropTypes.InferProps<{
position: PropTypes.Requireable<any>;
display: PropTypes.Requireable<any>;
top: PropTypes.Requireable<string>;
right: PropTypes.Requireable<string>;
bottom: PropTypes.Requireable<string>;
left: PropTypes.Requireable<string>;
padding: PropTypes.Requireable<string>;
paddingTop: PropTypes.Requireable<string>;
paddingRight: PropTypes.Requireable<string>;
paddingBottom: PropTypes.Requireable<string>;
paddingLeft: PropTypes.Requireable<string>;
margin: PropTypes.Requireable<string>;
marginTop: PropTypes.Requireable<string>;
marginRight: PropTypes.Requireable<string>;
marginBottom: PropTypes.Requireable<string>;
marginLeft: PropTypes.Requireable<string>;
width: PropTypes.Requireable<string>;
height: PropTypes.Requireable<string>;
minWidth: PropTypes.Requireable<string>;
maxWidth: PropTypes.Requireable<string>;
minHeight: PropTypes.Requireable<string>;
maxHeight: PropTypes.Requireable<string>;
}>>;
content: (props: {
[x: string]: any;
}, propName: string, componentName: string, ...args: any[]) => any;
color: PropTypes.Requireable<string>;
className: PropTypes.Requireable<string>;
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
accessibility: PropTypes.Requireable<(...args: any[]) => any>;
};
};