diff --git a/samples/sqlservices/src/controllers/mainController.ts b/samples/sqlservices/src/controllers/mainController.ts index 999a629e1d..b52c517fc9 100644 --- a/samples/sqlservices/src/controllers/mainController.ts +++ b/samples/sqlservices/src/controllers/mainController.ts @@ -385,6 +385,47 @@ export default class MainController implements vscode.Disposable { component: declarativeTable, title: 'Declarative Table' }], formItemLayout); + + const img = view.modelBuilder.image().withProps({ + iconPath: startIcon, + iconHeight: 16, + iconWidth: 16, + width: 16, + height: 16 + }).component(); + const text1 = view.modelBuilder.text().withProps({ value: 'text1' }).component(); + const text2 = view.modelBuilder.text().withProps({ value: 'text2' }).component(); + const flex = view.modelBuilder.flexContainer().withLayout({ + flexFlow: 'row', + alignItems: 'center', + width: 100, + height: 30 + }).withProps({ + CSSStyles: { + 'border-style': 'solid', + 'border-width': '1px' + }, + width: 100, + height: 40 + }).component(); + flex.addItem(img, { + flex: '0 0 auto' + }); + flex.addItem(text1, { + flex: '1 1 auto' + }); + flex.addItem(text2, { + flex: '0 0 auto', + CSSStyles: { + 'font-size': 'large' + } + }); + const compositeButton = view.modelBuilder.divContainer().withItems([flex]).withProps({ + ariaRole: 'button', + ariaLabel: 'show status', + clickable: true + }).component(); + let groupItems = { components: [{ component: table, @@ -392,6 +433,9 @@ export default class MainController implements vscode.Disposable { }, { component: listBox, title: 'List Box' + }, { + component: compositeButton, + title: 'compositeButton' }], title: 'group' }; formBuilder.addFormItem(groupItems, formItemLayout); diff --git a/src/sql/workbench/browser/modelComponents/componentBase.ts b/src/sql/workbench/browser/modelComponents/componentBase.ts index 54ed0a84b0..967ec02bc1 100644 --- a/src/sql/workbench/browser/modelComponents/componentBase.ts +++ b/src/sql/workbench/browser/modelComponents/componentBase.ts @@ -86,17 +86,9 @@ export abstract class ComponentBasethis._el.nativeElement); - for (const style in this.CSSStyles) { - element.style[style] = this.CSSStyles[style]; - } - } - public setProperties(properties: { [key: string]: any; }): void { properties = properties || {}; this.properties = properties; - this.updateStyles(); this.layout(); this.validate().catch(onUnexpectedError); } @@ -105,7 +97,6 @@ export abstract class ComponentBase