feat: add description to property

src/analyzer/typescript-react-analyzer/property-analyzer/property-analyzer.ts

@@ -128,6 +128,7 @@ function createArrayProperty(
 		return {
 			contextId: args.symbol.name,
 			defaultValue: [],
+			description: '',
 			hidden: false,
 			id: ctx.getPropertyId(args.symbol.name),
 			label: args.symbol.name,
@@ -142,6 +143,7 @@ function createArrayProperty(
 		return {
 			contextId: args.symbol.name,
 			defaultValue: [],
+			description: '',
 			hidden: false,
 			id: ctx.getPropertyId(args.symbol.name),
 			label: args.symbol.name,
@@ -161,6 +163,7 @@ function createBooleanProperty(
 ): Types.SerializedPatternBooleanProperty | undefined {
 	return {
 		contextId: args.symbol.name,
+		description: '',
 		hidden: false,
 		id: ctx.getPropertyId(args.symbol.name),
 		label: args.symbol.name,
@@ -195,6 +198,7 @@ function createEnumProperty(
 
 	return {
 		contextId: args.symbol.name,
+		description: '',
 		hidden: false,
 		id: enumId,
 		label: args.symbol.name,
@@ -227,6 +231,7 @@ function createNumberProperty(
 ): Types.SerializedPatternNumberProperty {
 	return {
 		contextId: args.symbol.name,
+		description: '',
 		hidden: false,
 		id: ctx.getPropertyId(args.symbol.name),
 		label: args.symbol.name,
@@ -244,6 +249,7 @@ function createStringProperty(
 	if (TypescriptUtils.symbolHasJsDocTag(args.symbol, 'asset')) {
 		return {
 			contextId: args.symbol.name,
+			description: '',
 			hidden: false,
 			id: ctx.getPropertyId(args.symbol.name),
 			label: args.symbol.name,
@@ -256,6 +262,7 @@ function createStringProperty(
 
 	return {
 		contextId: args.symbol.name,
+		description: '',
 		hidden: false,
 		id: ctx.getPropertyId(args.symbol.name),
 		label: args.symbol.name,
@@ -278,6 +285,7 @@ function setPropertyMetaData(init: {
 
 	property.required = (symbol.flags & Ts.SymbolFlags.Optional) !== Ts.SymbolFlags.Optional;
 	property.label = TypescriptUtils.getJsDocValueFromSymbol(symbol, 'name') || property.label;
+	property.description = TypescriptUtils.getJsDocValueFromSymbol(symbol, 'description') || '';
 	property.hidden = TypescriptUtils.symbolHasJsDocTag(symbol, 'ignore');
 
 	switch (property.type) {

src/components/property-items/asset-item/index.tsx

@@ -1,12 +1,14 @@
 import { colors } from '../../colors';
 import { fonts } from '../../fonts';
+import { PropertyDescription } from '../property-description';
 import { PropertyLabel } from '../property-label';
 import * as React from 'react';
 import { getSpace, SpaceSize } from '../../space';
 import styled from 'styled-components';
 
 export interface AssetItemProps {
 	className?: string;
+	description?: string;
 	imageSrc: string;
 	inputType: AssetPropertyInputType;
 	inputValue?: string;
@@ -129,6 +131,7 @@ export const AssetItem: React.StatelessComponent<AssetItemProps> = props => (
 				<StyledButton onClick={props.onChooseClick}>Choose ...</StyledButton>
 			</>
 		)}
+		{props.description && <PropertyDescription description={props.description || ''} />}
 	</StyledAssetItem>
 );
 

src/components/property-items/boolean-item/index.tsx

@@ -1,5 +1,6 @@
 import { colors } from '../../colors';
 import { Icon, IconName, IconSize } from '../../icons';
+import { PropertyDescription } from '../property-description';
 import { PropertyLabel } from '../property-label';
 import * as React from 'react';
 import { getSpace, SpaceSize } from '../../space';
@@ -8,6 +9,7 @@ import styled from 'styled-components';
 export interface BooleanItemProps {
 	checked?: boolean;
 	className?: string;
+	description?: string;
 	label: string;
 	onChange?: React.ChangeEventHandler<HTMLElement>;
 }
@@ -17,10 +19,15 @@ interface IndicatorProps {
 }
 
 const StyledBooleanItem = styled.label`
+	display: block;
+	margin-bottom: ${getSpace(SpaceSize.S)}px;
+`;
+
+const StyledContainer = styled.div`
 	display: flex;
 	align-items: center;
 	width: 100%;
-	margin-bottom: ${getSpace(SpaceSize.S)}px;
+	box-sizing: border-box;
 `;
 
 const indicatorWidth = 48;
@@ -98,20 +105,22 @@ const StyledInput = styled.input`
 `;
 
 export const BooleanItem: React.StatelessComponent<BooleanItemProps> = props => {
-	const { className, label, children, checked, onChange } = props;
+	const { className, description, label, checked, onChange } = props;
 	const icon = checked ? IconName.Check : IconName.Uncheck;
 	const color = checked ? colors.blue40 : colors.grey60;
 
 	return (
 		<StyledBooleanItem className={className}>
-			<PropertyLabel label={label} />
-			<StyledInput onChange={onChange} checked={checked} type="checkbox" />
-			<StyledIndicator checked={checked}>
-				<StyledIndicatorKnob checked={checked}>
-					<StyledIcon name={icon} size={IconSize.XS} color={color} />
-				</StyledIndicatorKnob>
-			</StyledIndicator>
-			{children}
+			<StyledContainer>
+				<PropertyLabel label={label} />
+				<StyledInput onChange={onChange} checked={checked} type="checkbox" />
+				<StyledIndicator checked={checked}>
+					<StyledIndicatorKnob checked={checked}>
+						<StyledIcon name={icon} size={IconSize.XS} color={color} />
+					</StyledIndicatorKnob>
+				</StyledIndicator>
+			</StyledContainer>
+			{description && <PropertyDescription description={description || ''} />}
 		</StyledBooleanItem>
 	);
 };

src/components/property-items/enum-item/index.tsx

@@ -1,6 +1,7 @@
 import { colors } from '../../colors';
 import { fonts } from '../../fonts';
 import { Icon, IconName, IconSize } from '../../icons';
+import { PropertyDescription } from '../property-description';
 import { PropertyLabel } from '../property-label';
 import * as React from 'react';
 import { getSpace, SpaceSize } from '../../space';
@@ -13,6 +14,7 @@ export interface EnumItemValues {
 
 export interface EnumItemProps {
 	className?: string;
+	description?: string;
 	label: string;
 	onChange?: React.ChangeEventHandler<HTMLSelectElement>;
 	required?: boolean;
@@ -21,10 +23,15 @@ export interface EnumItemProps {
 }
 
 const StyledEnumItem = styled.label`
+	display: block;
+	margin-bottom: ${getSpace(SpaceSize.S)}px;
+`;
+
+const StyledContainer = styled.div`
 	display: flex;
 	align-items: center;
 	width: 100%;
-	margin-bottom: ${getSpace(SpaceSize.S)}px;
+	box-sizing: border-box;
 `;
 
 const StyledSelectWrapper = styled.div`
@@ -78,26 +85,33 @@ const StyledIcon = styled(Icon)`
 `;
 
 export const EnumItem: React.StatelessComponent<EnumItemProps> = props => {
-	const { className, values, selectedValue, onChange, label, required } = props;
+	const { className, description, values, selectedValue, onChange, label, required } = props;
 
 	return (
 		<StyledEnumItem className={className}>
-			<PropertyLabel label={label} />
-			<StyledSelectWrapper>
-				<StyledSelect
-					className={className}
-					onChange={onChange}
-					value={selectedValue ? selectedValue : ''}
-				>
-					{!required && <option key="empty" value="" />}
-					{values.map(value => (
-						<option key={value.id} value={value.id}>
-							{value.name}
-						</option>
-					))}
-				</StyledSelect>
-				<StyledIcon name={IconName.ArrowFillRight} size={IconSize.XXS} color={colors.grey60} />
-			</StyledSelectWrapper>
+			<StyledContainer>
+				<PropertyLabel label={label} />
+				<StyledSelectWrapper>
+					<StyledSelect
+						className={className}
+						onChange={onChange}
+						value={selectedValue ? selectedValue : ''}
+					>
+						{!required && <option key="empty" value="" />}
+						{values.map(value => (
+							<option key={value.id} value={value.id}>
+								{value.name}
+							</option>
+						))}
+					</StyledSelect>
+					<StyledIcon
+						name={IconName.ArrowFillRight}
+						size={IconSize.XXS}
+						color={colors.grey60}
+					/>
+				</StyledSelectWrapper>
+			</StyledContainer>
+			{description && <PropertyDescription description={description || ''} />}
 		</StyledEnumItem>
 	);
 };

src/components/property-items/property-description.tsx

@@ -0,0 +1,30 @@
+import { colors } from '../colors';
+import * as React from 'react';
+import { getSpace, SpaceSize } from '../space';
+import styled from 'styled-components';
+
+export interface PropertyDescriptionProps {
+	description: string;
+}
+
+const StyledDescription = styled.span`
+	flex: none;
+	display: block;
+	font-size: 12px;
+	color: ${colors.grey50.toString()};
+	user-select: none;
+	cursor: default;
+	box-sizing: border-box;
+	padding-right: ${getSpace(SpaceSize.XS)}px;
+	padding-top: ${getSpace(SpaceSize.XXS)}px;
+	width: 70%;
+	margin-left: 30%;
+`;
+
+export const PropertyDescription: React.StatelessComponent<PropertyDescriptionProps> = props => {
+	const { description } = props;
+
+	return <StyledDescription title={description}>{description}</StyledDescription>;
+};
+
+export default PropertyDescription;

src/components/property-items/string-item/demo.tsx

@@ -19,6 +19,7 @@ const StringItemDemo: React.StatelessComponent<void> = (): JSX.Element => (
 				onChange={NOOP}
 				label="Text"
 				value="this is a very long example text to test text overflow and stuff"
+				description="Lorem ipsum doloret"
 			/>
 		</StyledDemo>
 	</div>

src/components/property-items/string-item/index.tsx

@@ -1,23 +1,30 @@
 import { colors } from '../../colors';
 import { fonts } from '../../fonts';
+import { PropertyDescription } from '../property-description';
 import { PropertyLabel } from '../property-label';
 import * as React from 'react';
 import { getSpace, SpaceSize } from '../../space';
 import styled from 'styled-components';
 
 export interface StringItemProps {
 	className?: string;
+	description?: string;
 	label: string;
 	onBlur?: React.FocusEventHandler<HTMLInputElement>;
 	onChange?: React.ChangeEventHandler<HTMLInputElement>;
 	value?: string;
 }
 
 const StyledStringItem = styled.label`
+	display: block;
+	margin-bottom: ${getSpace(SpaceSize.S)}px;
+`;
+
+const StyledContainer = styled.div`
 	display: flex;
 	align-items: center;
 	width: 100%;
-	margin-bottom: ${getSpace(SpaceSize.S)}px;
+	box-sizing: border-box;
 `;
 
 const StyledInput = styled.input`
@@ -53,18 +60,21 @@ const StyledInput = styled.input`
 `;
 
 export const StringItem: React.StatelessComponent<StringItemProps> = props => {
-	const { className, onChange, onBlur, label, value } = props;
+	const { className, description, onChange, onBlur, label, value } = props;
 
 	return (
 		<StyledStringItem className={className}>
-			<PropertyLabel label={label} />
-			<StyledInput
-				onChange={onChange}
-				onBlur={onBlur}
-				type="text"
-				value={value || ''}
-				placeholder="…"
-			/>
+			<StyledContainer>
+				<PropertyLabel label={label} />
+				<StyledInput
+					onChange={onChange}
+					onBlur={onBlur}
+					type="text"
+					value={value || ''}
+					placeholder="…"
+				/>
+			</StyledContainer>
+			{description && <PropertyDescription description={description || ''} />}
 		</StyledStringItem>
 	);
 };

src/container/property-list/property-list.tsx

@@ -61,6 +61,7 @@ class PropertyViewContainer extends React.Component<PropertyViewContainerProps>
 			return null;
 		}
 
+		const description = patternProperty.getDescription();
 		const id = property.getId();
 		const label = patternProperty.getLabel();
 		const type = patternProperty.getType();
@@ -69,7 +70,7 @@ class PropertyViewContainer extends React.Component<PropertyViewContainerProps>
 			return null;
 		}
 
-		const base = { key: id, label };
+		const base = { key: id, description, label };
 
 		// TODO: Split ElementProperty into type-specific classes for better type safety
 		// TODO: Implement inputs for

src/model/element/element-property/element-property.ts

@@ -27,7 +27,6 @@ export class ElementProperty {
 		this.patternPropertyId = init.patternPropertyId;
 		this.setDefault = init.setDefault;
 		this.value = init.value;
-
 		this.patternLibrary = context.patternLibrary;
 
 		const patternProperty = this.patternLibrary.getPatternPropertyById(this.patternPropertyId);

src/model/pattern-library/builtins/page.ts

@@ -33,6 +33,7 @@ export const Page = (context: BuiltInContext): BuiltInResult => {
 	const properties = [
 		new PatternBooleanProperty({
 			contextId: VIEWPORT_CONTEXT_ID,
+			description: 'Lorem ipsum',
 			id: context.options.getGlobalPropertyId(patternId, VIEWPORT_CONTEXT_ID),
 			label: 'Mobile Viewport',
 			origin: Types.PatternPropertyOrigin.BuiltIn,