Promote CssStyles to stable API (#14824)

* Promote CssStyles to stable API

* add comment

* Fix compile

extensions/notebook/src/test/common.ts

@@ -321,7 +321,7 @@ class TestComponentBase implements azdata.Component {
 	updateProperty(key: string, value: any): Thenable<void> {
 		throw new Error('Method not implemented');
 	}
-	updateCssStyles(cssStyles: { [key: string]: string; }): Thenable<void> {
+	updateCssStyles(cssStyles: azdata.CssStyles): Thenable<void> {
 		throw new Error('Method not implemented');
 	}
 	onValidityChanged: vscode.Event<boolean> = undefined;

src/sql/azdata.d.ts

@@ -2783,7 +2783,7 @@ declare module 'azdata' {
 		 * @param cssStyles The styles to update
 		 * @returns Thenable that completes once the update has been applied to the UI
 		 */
-		updateCssStyles(cssStyles: { [key: string]: string }): Thenable<void>;
+		updateCssStyles(cssStyles: CssStyles): Thenable<void>;
 
 		/**
 		 * Event fired to notify that the component's validity has changed
@@ -2960,6 +2960,11 @@ declare module 'azdata' {
 		'inherit' |
 		'';
 
+	/**
+	 * Set of CSS key-value pairs
+	 */
+	export type CssStyles = { [key: string]: string | number };
+
 	/**
 	 * The config for a FlexBox-based container. This supports easy
 	 * addition of content to a container with a flexible layout
@@ -3038,7 +3043,7 @@ declare module 'azdata' {
 		/**
 		 * Matches the CSS style key and its available values.
 		 */
-		CSSStyles?: { [key: string]: string };
+		CSSStyles?: CssStyles;
 	}
 
 	export interface FormItemLayout {
@@ -3086,7 +3091,7 @@ declare module 'azdata' {
 		/**
 		 * Matches the CSS style key and its available values.
 		 */
-		CSSStyles?: { [key: string]: string };
+		CSSStyles?: CssStyles;
 	}
 
 	export interface DivContainer extends Container<DivLayout, DivItemLayout>, DivContainerProperties {
@@ -3224,7 +3229,7 @@ declare module 'azdata' {
 		/**
 		 * Matches the CSS style key and its available values.
 		 */
-		CSSStyles?: { [key: string]: string };
+		CSSStyles?: CssStyles;
 	}
 
 	export type ThemedIconPath = { light: string | vscode.Uri; dark: string | vscode.Uri };

src/sql/azdata.proposed.d.ts

@@ -315,8 +315,6 @@ declare module 'azdata' {
 		linkCodiconStyles?: CssStyles;
 	}
 
-	export type CssStyles = { [key: string]: string | number };
-
 	export interface RadioCardGroupComponentProperties extends ComponentProperties, TitledComponentProperties {
 		cards: RadioCard[];
 		cardWidth: string;

src/sql/workbench/browser/modelComponents/divContainer.component.ts

@@ -153,7 +153,7 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout, az
 	public getItemOrder(item: DivItem): number {
 		return item.config ? item.config.order : 0;
 	}
-	public getItemStyles(item: DivItem): { [key: string]: string } {
+	public getItemStyles(item: DivItem): azdata.CssStyles {
 		return item.config && item.config.CSSStyles ? item.config.CSSStyles : {};
 	}
 

src/sql/workbench/browser/modelComponents/flexContainer.component.ts

@@ -9,7 +9,7 @@ import {
 	ElementRef, OnDestroy
 } from '@angular/core';
 
-import { FlexLayout, FlexItemLayout } from 'azdata';
+import * as azdata from 'azdata';
 
 import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { IComponentDescriptor, IComponent, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
@@ -17,7 +17,7 @@ import { convertSize } from 'sql/base/browser/dom';
 import { ILogService } from 'vs/platform/log/common/log';
 
 export class FlexItem {
-	constructor(public descriptor: IComponentDescriptor, public config: FlexItemLayout) { }
+	constructor(public descriptor: IComponentDescriptor, public config: azdata.FlexItemLayout) { }
 }
 
 @Component({
@@ -31,7 +31,7 @@ export class FlexItem {
 		</div>
 	`
 })
-export default class FlexContainer extends ContainerBase<FlexItemLayout> implements IComponent, OnDestroy {
+export default class FlexContainer extends ContainerBase<azdata.FlexItemLayout> implements IComponent, OnDestroy {
 	@Input() descriptor: IComponentDescriptor;
 	@Input() modelStore: IModelStore;
 	private _flexFlow: string;
@@ -65,7 +65,7 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 
 	/// IComponent implementation
 
-	public setLayout(layout: FlexLayout): void {
+	public setLayout(layout: azdata.FlexLayout): void {
 		this._flexFlow = layout.flexFlow ? layout.flexFlow : '';
 		this._justifyContent = layout.justifyContent ? layout.justifyContent : '';
 		this._alignItems = layout.alignItems ? layout.alignItems : '';
@@ -122,7 +122,7 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 	public getItemOrder(item: FlexItem): number {
 		return item.config ? item.config.order : 0;
 	}
-	public getItemStyles(item: FlexItem): { [key: string]: string } {
+	public getItemStyles(item: FlexItem): azdata.CssStyles {
 		return item.config && item.config.CSSStyles ? item.config.CSSStyles : {};
 	}
 }

src/sql/workbench/browser/modelComponents/splitviewContainer.component.ts

@@ -168,7 +168,7 @@ export default class SplitViewContainerImpl extends ContainerBase<FlexItemLayout
 		return item.config ? item.config.order : 0;
 	}
 
-	public getItemStyles(item: FlexItem): { [key: string]: string } {
+	public getItemStyles(item: FlexItem): CssStyles {
 		return item.config && item.config.CSSStyles ? item.config.CSSStyles : {};
 	}