random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-19 17:01:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added SelfServe UI updates (#559)

Browse Source 
* Added SelfServe UI modifications

* fixed lint error

* addressed PR comments
This commit is contained in:
Srinath Narayanan
2021-03-18 13:40:48 -07:00
committed by GitHub
parent 9db0975f7f
commit be4e490a64
19 changed files with 800 additions and 26941 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap
View File

@@ -12,7 +12,7 @@ exports[`CollapsibleSectionComponent renders 1`] = `
}
}
>
<StyledIconBase
<Icon
iconName="ChevronDown"
styles={
Object {

66
src/Explorer/Controls/Directory/__snapshots__/DirectoryListComponent.test.tsx.snap
View File

@@ -354,7 +354,6 @@ exports[`test render renders with filters 1`] = `
data-is-scrollable="true"
>
<div
aria-hidden="true"
className="stickyAbove-42"
style={
Object {
@@ -375,7 +374,6 @@ exports[`test render renders with filters 1`] = `
>
<div>
<div
aria-hidden={true}
style={
Object {
"pointerEvents": "none",
@@ -395,7 +393,6 @@ exports[`test render renders with filters 1`] = `
style={Object {}}
>
<div
aria-hidden={false}
style={
Object {
"backgroundColor": "",
@@ -411,6 +408,7 @@ exports[`test render renders with filters 1`] = `
>
<TextFieldBase
ariaLabel="Directory filter text box"
canRevealPassword={false}
className="directoryListFilterTextBox"
deferredValidationTime={200}
onChange={[Function]}
@@ -1123,7 +1121,7 @@ exports[`test render renders with filters 1`] = `
"iconDisabled": Object {
"color": "#a19f9d",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "GrayText",
},
},
@@ -1149,7 +1147,7 @@ exports[`test render renders with filters 1`] = `
"menuIconDisabled": Object {
"color": "#a19f9d",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "GrayText",
},
},
@@ -1168,7 +1166,7 @@ exports[`test render renders with filters 1`] = `
"position": "absolute",
"right": 2,
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"bottom": -2,
"left": -2,
"outlineColor": "ButtonText",
@@ -1247,7 +1245,7 @@ exports[`test render renders with filters 1`] = `
"position": "absolute",
"right": 2,
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"bottom": -2,
"left": -2,
"outlineColor": "ButtonText",
@@ -1279,8 +1277,10 @@ exports[`test render renders with filters 1`] = `
},
},
Object {
"backgroundColor": "#f3f2f1",
"color": "#a19f9d",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window",
"borderColor": "GrayText",
"color": "GrayText",
@@ -1300,7 +1300,7 @@ exports[`test render renders with filters 1`] = `
"backgroundColor": "#f3f2f1",
"color": "#201f1e",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"borderColor": "Highlight",
"color": "Highlight",
},
@@ -1326,7 +1326,7 @@ exports[`test render renders with filters 1`] = `
"splitButtonContainer": Array [
Object {
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"border": "none",
},
},
@@ -1344,7 +1344,7 @@ exports[`test render renders with filters 1`] = `
"position": "absolute",
"right": 3,
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"border": "none",
"bottom": -2,
"left": -2,
@@ -1373,19 +1373,20 @@ exports[`test render renders with filters 1`] = `
"borderBottomRightRadius": "0",
"borderTopRightRadius": "0",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none",
"backgroundColor": "Window",
"border": "1px solid WindowText",
"borderRightWidth": "0",
"color": "WindowText",
"forcedColorAdjust": "none",
},
},
},
".ms-Button--primary + .ms-Button": Object {
"border": "none",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"border": "1px solid WindowText",
"borderLeftWidth": "0",
},
@@ -1398,10 +1399,11 @@ exports[`test render renders with filters 1`] = `
"selectors": Object {
".ms-Button--primary": Object {
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none",
"backgroundColor": "WindowText",
"color": "Window",
"forcedColorAdjust": "none",
},
},
},
@@ -1411,10 +1413,11 @@ exports[`test render renders with filters 1`] = `
"selectors": Object {
".ms-Button--primary": Object {
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none",
"backgroundColor": "WindowText",
"color": "Window",
"forcedColorAdjust": "none",
},
},
},
@@ -1424,12 +1427,11 @@ exports[`test render renders with filters 1`] = `
"border": "none",
"outline": "none",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none",
"backgroundColor": "Window",
"borderColor": "GrayText",
"color": "GrayText",
},
"@media screen and (forced-colors: active)": Object {
"forcedColorAdjust": "none",
},
},
@@ -1441,7 +1443,7 @@ exports[`test render renders with filters 1`] = `
"selectors": Object {
".ms-Button--primary": Object {
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Highlight",
"color": "Window",
},
@@ -1450,7 +1452,7 @@ exports[`test render renders with filters 1`] = `
".ms-Button.is-disabled": Object {
"color": "#a19f9d",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window",
"borderColor": "GrayText",
"color": "GrayText",
@@ -1466,7 +1468,7 @@ exports[`test render renders with filters 1`] = `
"position": "absolute",
"right": 31,
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "WindowText",
},
},
@@ -1478,7 +1480,7 @@ exports[`test render renders with filters 1`] = `
"position": "absolute",
"right": 31,
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "WindowText",
},
},
@@ -1495,7 +1497,7 @@ exports[`test render renders with filters 1`] = `
"position": "absolute",
"right": 31,
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "GrayText",
},
},
@@ -1518,7 +1520,7 @@ exports[`test render renders with filters 1`] = `
":hover": Object {
"backgroundColor": "#edebe9",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "Highlight",
},
},
@@ -1526,6 +1528,11 @@ exports[`test render renders with filters 1`] = `
},
},
Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
".ms-Button-menuIcon": Object {
"color": "WindowText",
},
},
"border": "1px solid #8a8886",
"borderBottomRightRadius": "2px",
"borderLeft": "none",
@@ -1571,7 +1578,7 @@ exports[`test render renders with filters 1`] = `
"selectors": Object {
".ms-Button--primary": Object {
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window",
"borderColor": "GrayText",
"color": "GrayText",
@@ -1580,7 +1587,7 @@ exports[`test render renders with filters 1`] = `
},
".ms-Button-menuIcon": Object {
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "GrayText",
},
},
@@ -1588,7 +1595,7 @@ exports[`test render renders with filters 1`] = `
":hover": Object {
"cursor": "default",
},
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window",
"border": "1px solid GrayText",
"color": "GrayText",
@@ -1893,7 +1900,7 @@ exports[`test render renders with filters 1`] = `
>
<button
aria-disabled={true}
className="ms-Button ms-Button--default is-disabled directoryListButton root-54"
className="ms-Button ms-Button--default is-disabled directoryListButton root-57"
data-is-focusable={false}
disabled={true}
onClick={[Function]}
@@ -1905,7 +1912,7 @@ exports[`test render renders with filters 1`] = `
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-55"
className="ms-Button-flexContainer flexContainer-58"
data-automationid="splitbuttonprimary"
>
<div
@@ -1936,7 +1943,6 @@ exports[`test render renders with filters 1`] = `
</List>
</div>
<div
aria-hidden="true"
className="stickyBelow-43"
style={
Object {

8
src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap
View File

@@ -107,7 +107,7 @@ exports[`GalleryCardComponent renders 1`] = `
}
variant="tiny"
>
<StyledIconBase
<Icon
iconName="RedEye"
styles={
Object {
@@ -131,7 +131,7 @@ exports[`GalleryCardComponent renders 1`] = `
}
variant="tiny"
>
<StyledIconBase
<Icon
iconName="Download"
styles={
Object {
@@ -155,7 +155,7 @@ exports[`GalleryCardComponent renders 1`] = `
}
variant="tiny"
>
<StyledIconBase
<Icon
iconName="Heart"
styles={
Object {
@@ -180,7 +180,7 @@ exports[`GalleryCardComponent renders 1`] = `
}
}
>
<Styled
<Separator
styles={
Object {
"root": Object {

2
src/Explorer/Controls/NotebookGallery/InfoComponent/__snapshots__/InfoComponent.test.tsx.snap
View File

@@ -13,7 +13,7 @@ exports[`InfoComponent renders 1`] = `
<div
className="infoPanelMain"
>
<StyledIconBase
<Icon
className="infoIconMain"
iconName="Help"
styles={

8
src/Explorer/Controls/NotebookViewer/__snapshots__/NotebookMetadataComponent.test.tsx.snap
View File

@@ -68,14 +68,14 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
Invalid Date
</Text>
<Text>
<StyledIconBase
<Icon
iconName="RedEye"
/>
0
</Text>
<Text>
<StyledIconBase
<Icon
iconName="Download"
/>
0
@@ -180,14 +180,14 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
Invalid Date
</Text>
<Text>
<StyledIconBase
<Icon
iconName="RedEye"
/>
0
</Text>
<Text>
<StyledIconBase
<Icon
iconName="Download"
/>
0

2
src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap
View File

@@ -114,7 +114,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
</Stack>
</CollapsibleSectionComponent>
</Stack>
<Styled
<Separator
styles={
Object {
"root": Array [

2
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap
View File

@@ -41,7 +41,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
}
}
>
<StyledIconBase
<Icon
ariaLabel="Info"
iconName="Info"
styles={

216
src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
View File

@@ -1,14 +1,13 @@
import * as React from "react";
import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
import { TFunction } from "i18next";
import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
import { Slider } from "office-ui-fabric-react/lib/Slider";
import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
import { TextField } from "office-ui-fabric-react/lib/TextField";
import { IStackTokens, Stack } from "office-ui-fabric-react/lib/Stack";
import { Text } from "office-ui-fabric-react/lib/Text";
import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
import * as InputUtils from "./InputUtils";
import "./SmartUiComponent.less";
import { TextField } from "office-ui-fabric-react/lib/TextField";
import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
import * as React from "react";
import {
ChoiceItem,
Description,
@@ -19,8 +18,9 @@ import {
NumberUiType,
SmartUiInput,
} from "../../../SelfServe/SelfServeTypes";
import { TFunction } from "i18next";
import { ToolTipLabelComponent } from "../Settings/SettingsSubComponents/ToolTipLabelComponent";
import * as InputUtils from "./InputUtils";
import "./SmartUiComponent.less";
/**
* Generic UX renderer
@@ -138,11 +138,12 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
);
}
private renderTextInput(input: StringInput, labelId: string): JSX.Element {
private renderTextInput(input: StringInput, labelId: string, labelElement: JSX.Element): JSX.Element {
const value = this.props.currentValues.get(input.dataFieldName)?.value as string;
const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
return (
<div className="stringInputContainer">
<Stack>
{labelElement}
<TextField
id={`${input.dataFieldName}-textField-input`}
aria-labelledby={labelId}
@@ -155,25 +156,32 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
root: { width: 400 },
}}
/>
</div>
</Stack>
);
}
private renderDescription(input: DescriptionDisplay, labelId: string): JSX.Element {
private renderDescription(input: DescriptionDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
const dataFieldName = input.dataFieldName;
const description = input.description || (this.props.currentValues.get(dataFieldName)?.value as Description);
if (!description) {
return this.renderError("Description is not provided.");
if (!input.isDynamicDescription) {
return this.renderError("Description is not provided.");
}
// If input is a dynamic description and description is not available, empty element is rendered
return <></>;
}
const descriptionElement = (
<Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
{this.props.getTranslation(description.textTKey)}{" "}
{description.link && (
<Link target="_blank" href={description.link.href}>
{this.props.getTranslation(description.link.textTKey)}
</Link>
)}
</Text>
<Stack>
{labelElement}
<Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
{this.props.getTranslation(description.textTKey)}{" "}
{description.link && (
<Link target="_blank" href={description.link.href}>
{this.props.getTranslation(description.link.textTKey)}
</Link>
)}
</Text>
</Stack>
);
if (description.type === DescriptionType.Text) {
@@ -227,7 +235,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
return undefined;
};
private renderNumberInput(input: NumberInput, labelId: string): JSX.Element {
private renderNumberInput(input: NumberInput, labelId: string, labelElement: JSX.Element): JSX.Element {
const { labelTKey, min, max, dataFieldName, step } = input;
const props = {
min: min,
@@ -240,61 +248,72 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
if (input.uiType === NumberUiType.Spinner) {
return (
<Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
<SpinButton
{...props}
id={`${input.dataFieldName}-spinner-input`}
value={value?.toString()}
onValidate={(newValue) => this.onValidate(input, newValue, props.min, props.max)}
onIncrement={(newValue) => this.onIncrement(input, newValue, props.step, props.max)}
onDecrement={(newValue) => this.onDecrement(input, newValue, props.step, props.min)}
labelPosition={Position.top}
aria-labelledby={labelId}
disabled={disabled}
/>
{this.state.errors.has(dataFieldName) && (
<MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
)}
<Stack>
{labelElement}
<Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
<SpinButton
{...props}
id={`${input.dataFieldName}-spinner-input`}
value={value?.toString()}
onValidate={(newValue) => this.onValidate(input, newValue, props.min, props.max)}
onIncrement={(newValue) => this.onIncrement(input, newValue, props.step, props.max)}
onDecrement={(newValue) => this.onDecrement(input, newValue, props.step, props.min)}
labelPosition={Position.top}
aria-labelledby={labelId}
disabled={disabled}
/>
{this.state.errors.has(dataFieldName) && (
<MessageBar messageBarType={MessageBarType.error}>
Error: {this.state.errors.get(dataFieldName)}
</MessageBar>
)}
</Stack>
</Stack>
);
} else if (input.uiType === NumberUiType.Slider) {
return (
<div id={`${input.dataFieldName}-slider-input`}>
<Slider
{...props}
value={value}
disabled={disabled}
onChange={(newValue) => this.props.onInputChange(input, newValue)}
styles={{
root: { width: 400 },
valueLabel: SmartUiComponent.labelStyle,
}}
/>
</div>
<Stack>
{labelElement}
<div id={`${input.dataFieldName}-slider-input`}>
<Slider
{...props}
value={value}
disabled={disabled}
onChange={(newValue) => this.props.onInputChange(input, newValue)}
styles={{
root: { width: 400 },
valueLabel: SmartUiComponent.labelStyle,
}}
/>
</div>
</Stack>
);
} else {
return <>Unsupported number UI type {input.uiType}</>;
}
}
private renderBooleanInput(input: BooleanInput, labelId: string): JSX.Element {
private renderBooleanInput(input: BooleanInput, labelId: string, labelElement: JSX.Element): JSX.Element {
const value = this.props.currentValues.get(input.dataFieldName)?.value as boolean;
const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
return (
<Toggle
id={`${input.dataFieldName}-toggle-input`}
aria-labelledby={labelId}
checked={value || false}
onText={this.props.getTranslation(input.trueLabelTKey)}
offText={this.props.getTranslation(input.falseLabelTKey)}
disabled={disabled}
onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
styles={{ root: { width: 400 } }}
/>
<Stack>
{labelElement}
<Toggle
id={`${input.dataFieldName}-toggle-input`}
aria-labelledby={labelId}
checked={value || false}
onText={this.props.getTranslation(input.trueLabelTKey)}
offText={this.props.getTranslation(input.falseLabelTKey)}
disabled={disabled}
onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
styles={{ root: { width: 400 } }}
/>
</Stack>
);
}
private renderChoiceInput(input: ChoiceInput, labelId: string): JSX.Element {
private renderChoiceInput(input: ChoiceInput, labelId: string, labelElement: JSX.Element): JSX.Element {
const { defaultKey, dataFieldName, choices, placeholderTKey } = input;
const value = this.props.currentValues.get(dataFieldName)?.value as string;
const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
@@ -303,22 +322,26 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
selectedKey = "";
}
return (
<Dropdown
id={`${input.dataFieldName}-dropdown-input`}
aria-labelledby={labelId}
selectedKey={selectedKey}
onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
placeholder={this.props.getTranslation(placeholderTKey)}
disabled={disabled}
options={choices.map((c) => ({
key: c.key,
text: this.props.getTranslation(c.label),
}))}
styles={{
root: { width: 400 },
dropdown: SmartUiComponent.labelStyle,
}}
/>
<Stack>
{labelElement}
<Dropdown
id={`${input.dataFieldName}-dropdown-input`}
aria-labelledby={labelId}
selectedKey={selectedKey}
onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
placeholder={this.props.getTranslation(placeholderTKey)}
disabled={disabled}
dropdownWidth="auto"
options={choices.map((c) => ({
key: c.key,
text: this.props.getTranslation(c.label),
}))}
styles={{
root: { width: 400 },
dropdown: SmartUiComponent.labelStyle,
}}
/>
</Stack>
);
}
@@ -326,7 +349,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
return <MessageBar messageBarType={MessageBarType.error}>Error: {errorMessage}</MessageBar>;
}
private renderDisplayWithInfoBubble(input: AnyDisplay, info: Info): JSX.Element {
private renderElement(input: AnyDisplay, info: Info): JSX.Element {
if (input.errorMessage) {
return this.renderError(input.errorMessage);
}
@@ -335,34 +358,31 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
return <></>;
}
const labelId = `${input.dataFieldName}-label`;
return (
<Stack>
{input.labelTKey && (
<Label id={labelId}>
<ToolTipLabelComponent
label={this.props.getTranslation(input.labelTKey)}
toolTipElement={this.renderInfo(info)}
/>
</Label>
)}
{this.renderDisplay(input, labelId)}
</Stack>
const labelElement: JSX.Element = input.labelTKey && (
<Label id={labelId}>
<ToolTipLabelComponent
label={this.props.getTranslation(input.labelTKey)}
toolTipElement={this.renderInfo(info)}
/>
</Label>
);
return <Stack>{this.renderControl(input, labelId, labelElement)}</Stack>;
}
private renderDisplay(input: AnyDisplay, labelId: string): JSX.Element {
private renderControl(input: AnyDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
switch (input.type) {
case "string":
if ("description" in input || "isDynamicDescription" in input) {
return this.renderDescription(input as DescriptionDisplay, labelId);
return this.renderDescription(input as DescriptionDisplay, labelId, labelElement);
}
return this.renderTextInput(input as StringInput, labelId);
return this.renderTextInput(input as StringInput, labelId, labelElement);
case "number":
return this.renderNumberInput(input as NumberInput, labelId);
return this.renderNumberInput(input as NumberInput, labelId, labelElement);
case "boolean":
return this.renderBooleanInput(input as BooleanInput, labelId);
return this.renderBooleanInput(input as BooleanInput, labelId, labelElement);
case "object":
return this.renderChoiceInput(input as ChoiceInput, labelId);
return this.renderChoiceInput(input as ChoiceInput, labelId, labelElement);
default:
throw new Error(`Unknown input type: ${input.type}`);
}
@@ -373,7 +393,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
return (
<Stack tokens={containerStackTokens} className="widgetRendererContainer">
<Stack.Item>{node.input && this.renderDisplayWithInfoBubble(node.input, node.info as Info)}</Stack.Item>
<Stack.Item>{node.input && this.renderElement(node.input, node.info as Info)}</Stack.Item>
{node.children && node.children.map((child) => <div key={child.id}>{this.renderNode(child)}</div>)}
</Stack>
);

632
src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap
View File

@@ -23,19 +23,21 @@ exports[`SmartUiComponent disable all inputs 1`] = `
>
<StackItem>
<Stack>
<Text
aria-labelledby="description-label"
id="description-text-display"
>
this is an example description text.
<StyledLinkBase
href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
target="_blank"
<Stack>
<Text
aria-labelledby="description-label"
id="description-text-display"
>
Click here for more information.
</StyledLinkBase>
</Text>
this is an example description text.
<StyledLinkBase
href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
target="_blank"
>
Click here for more information.
</StyledLinkBase>
</Text>
</Stack>
</Stack>
</StackItem>
</Stack>
@@ -53,51 +55,53 @@ exports[`SmartUiComponent disable all inputs 1`] = `
>
<StackItem>
<Stack>
<StyledLabelBase
id="throughput-label"
>
<ToolTipLabelComponent
label="Throughput (input)"
/>
</StyledLabelBase>
<Stack
styles={
Object {
"root": Object {
"width": 400,
},
}
}
tokens={
Object {
"childrenGap": 2,
}
}
>
<CustomizedSpinButton
aria-labelledby="throughput-label"
ariaLabel="Throughput (input)"
decrementButtonIcon={
<Stack>
<StyledLabelBase
id="throughput-label"
>
<ToolTipLabelComponent
label="Throughput (input)"
/>
</StyledLabelBase>
<Stack
styles={
Object {
"iconName": "ChevronDownSmall",
"root": Object {
"width": 400,
},
}
}
disabled={true}
id="throughput-spinner-input"
incrementButtonIcon={
tokens={
Object {
"iconName": "ChevronUpSmall",
"childrenGap": 2,
}
}
label=""
labelPosition={0}
max={500}
min={400}
onDecrement={[Function]}
onIncrement={[Function]}
onValidate={[Function]}
step={10}
/>
>
<CustomizedSpinButton
aria-labelledby="throughput-label"
ariaLabel="Throughput (input)"
decrementButtonIcon={
Object {
"iconName": "ChevronDownSmall",
}
}
disabled={true}
id="throughput-spinner-input"
incrementButtonIcon={
Object {
"iconName": "ChevronUpSmall",
}
}
label=""
labelPosition={0}
max={500}
min={400}
onDecrement={[Function]}
onIncrement={[Function]}
onValidate={[Function]}
step={10}
/>
</Stack>
</Stack>
</Stack>
</StackItem>
@@ -116,37 +120,39 @@ exports[`SmartUiComponent disable all inputs 1`] = `
>
<StackItem>
<Stack>
<StyledLabelBase
id="throughput2-label"
>
<ToolTipLabelComponent
label="Throughput (Slider)"
/>
</StyledLabelBase>
<div
id="throughput2-slider-input"
>
<StyledSliderBase
ariaLabel="Throughput (Slider)"
disabled={true}
max={500}
min={400}
onChange={[Function]}
step={10}
styles={
Object {
"root": Object {
"width": 400,
},
"valueLabel": Object {
"color": "#393939",
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
"fontSize": 12,
},
<Stack>
<StyledLabelBase
id="throughput2-label"
>
<ToolTipLabelComponent
label="Throughput (Slider)"
/>
</StyledLabelBase>
<div
id="throughput2-slider-input"
>
<StyledSliderBase
ariaLabel="Throughput (Slider)"
disabled={true}
max={500}
min={400}
onChange={[Function]}
step={10}
styles={
Object {
"root": Object {
"width": 400,
},
"valueLabel": Object {
"color": "#393939",
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
"fontSize": 12,
},
}
}
}
/>
</div>
/>
</div>
</Stack>
</Stack>
</StackItem>
</Stack>
@@ -185,16 +191,14 @@ exports[`SmartUiComponent disable all inputs 1`] = `
>
<StackItem>
<Stack>
<StyledLabelBase
id="containerId-label"
>
<ToolTipLabelComponent
label="Container id"
/>
</StyledLabelBase>
<div
className="stringInputContainer"
>
<Stack>
<StyledLabelBase
id="containerId-label"
>
<ToolTipLabelComponent
label="Container id"
/>
</StyledLabelBase>
<StyledTextFieldBase
aria-labelledby="containerId-label"
disabled={true}
@@ -210,7 +214,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
type="text"
value=""
/>
</div>
</Stack>
</Stack>
</StackItem>
</Stack>
@@ -228,29 +232,31 @@ exports[`SmartUiComponent disable all inputs 1`] = `
>
<StackItem>
<Stack>
<StyledLabelBase
id="analyticalStore-label"
>
<ToolTipLabelComponent
label="Analytical Store"
/>
</StyledLabelBase>
<StyledToggleBase
aria-labelledby="analyticalStore-label"
checked={false}
disabled={true}
id="analyticalStore-toggle-input"
offText="Disabled"
onChange={[Function]}
onText="Enabled"
styles={
Object {
"root": Object {
"width": 400,
},
<Stack>
<StyledLabelBase
id="analyticalStore-label"
>
<ToolTipLabelComponent
label="Analytical Store"
/>
</StyledLabelBase>
<StyledToggleBase
aria-labelledby="analyticalStore-label"
checked={false}
disabled={true}
id="analyticalStore-toggle-input"
offText="Disabled"
onChange={[Function]}
onText="Enabled"
styles={
Object {
"root": Object {
"width": 400,
},
}
}
}
/>
/>
</Stack>
</Stack>
</StackItem>
</Stack>
@@ -268,48 +274,51 @@ exports[`SmartUiComponent disable all inputs 1`] = `
>
<StackItem>
<Stack>
<StyledLabelBase
id="database-label"
>
<ToolTipLabelComponent
label="Database"
/>
</StyledLabelBase>
<StyledWithResponsiveMode
aria-labelledby="database-label"
disabled={true}
id="database-dropdown-input"
onChange={[Function]}
options={
Array [
Object {
"key": "db1",
"text": "Database 1",
},
Object {
"key": "db2",
"text": "Database 2",
},
Object {
"key": "db3",
"text": "Database 3",
},
]
}
selectedKey="db2"
styles={
Object {
"dropdown": Object {
"color": "#393939",
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
"fontSize": 12,
},
"root": Object {
"width": 400,
},
<Stack>
<StyledLabelBase
id="database-label"
>
<ToolTipLabelComponent
label="Database"
/>
</StyledLabelBase>
<StyledWithResponsiveMode
aria-labelledby="database-label"
disabled={true}
dropdownWidth="auto"
id="database-dropdown-input"
onChange={[Function]}
options={
Array [
Object {
"key": "db1",
"text": "Database 1",
},
Object {
"key": "db2",
"text": "Database 2",
},
Object {
"key": "db3",
"text": "Database 3",
},
]
}
}
/>
selectedKey="db2"
styles={
Object {
"dropdown": Object {
"color": "#393939",
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
"fontSize": 12,
},
"root": Object {
"width": 400,
},
}
}
/>
</Stack>
</Stack>
</StackItem>
</Stack>
@@ -340,19 +349,21 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
>
<StackItem>
<Stack>
<Text
aria-labelledby="description-label"
id="description-text-display"
>
this is an example description text.
<StyledLinkBase
href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
target="_blank"
<Stack>
<Text
aria-labelledby="description-label"
id="description-text-display"
>
Click here for more information.
</StyledLinkBase>
</Text>
this is an example description text.
<StyledLinkBase
href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
target="_blank"
>
Click here for more information.
</StyledLinkBase>
</Text>
</Stack>
</Stack>
</StackItem>
</Stack>
@@ -370,51 +381,53 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
>
<StackItem>
<Stack>
<StyledLabelBase
id="throughput-label"
>
<ToolTipLabelComponent
label="Throughput (input)"
/>
</StyledLabelBase>
<Stack
styles={
Object {
"root": Object {
"width": 400,
},
}
}
tokens={
Object {
"childrenGap": 2,
}
}
>
<CustomizedSpinButton
aria-labelledby="throughput-label"
ariaLabel="Throughput (input)"
decrementButtonIcon={
<Stack>
<StyledLabelBase
id="throughput-label"
>
<ToolTipLabelComponent
label="Throughput (input)"
/>
</StyledLabelBase>
<Stack
styles={
Object {
"iconName": "ChevronDownSmall",
"root": Object {
"width": 400,
},
}
}
disabled={false}
id="throughput-spinner-input"
incrementButtonIcon={
tokens={
Object {
"iconName": "ChevronUpSmall",
"childrenGap": 2,
}
}
label=""
labelPosition={0}
max={500}
min={400}
onDecrement={[Function]}
onIncrement={[Function]}
onValidate={[Function]}
step={10}
/>
>
<CustomizedSpinButton
aria-labelledby="throughput-label"
ariaLabel="Throughput (input)"
decrementButtonIcon={
Object {
"iconName": "ChevronDownSmall",
}
}
disabled={false}
id="throughput-spinner-input"
incrementButtonIcon={
Object {
"iconName": "ChevronUpSmall",
}
}
label=""
labelPosition={0}
max={500}
min={400}
onDecrement={[Function]}
onIncrement={[Function]}
onValidate={[Function]}
step={10}
/>
</Stack>
</Stack>
</Stack>
</StackItem>
@@ -433,36 +446,38 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
>
<StackItem>
<Stack>
<StyledLabelBase
id="throughput2-label"
>
<ToolTipLabelComponent
label="Throughput (Slider)"
/>
</StyledLabelBase>
<div
id="throughput2-slider-input"
>
<StyledSliderBase
ariaLabel="Throughput (Slider)"
max={500}
min={400}
onChange={[Function]}
step={10}
styles={
Object {
"root": Object {
"width": 400,
},
"valueLabel": Object {
"color": "#393939",
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
"fontSize": 12,
},
<Stack>
<StyledLabelBase
id="throughput2-label"
>
<ToolTipLabelComponent
label="Throughput (Slider)"
/>
</StyledLabelBase>
<div
id="throughput2-slider-input"
>
<StyledSliderBase
ariaLabel="Throughput (Slider)"
max={500}
min={400}
onChange={[Function]}
step={10}
styles={
Object {
"root": Object {
"width": 400,
},
"valueLabel": Object {
"color": "#393939",
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
"fontSize": 12,
},
}
}
}
/>
</div>
/>
</div>
</Stack>
</Stack>
</StackItem>
</Stack>
@@ -501,16 +516,14 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
>
<StackItem>
<Stack>
<StyledLabelBase
id="containerId-label"
>
<ToolTipLabelComponent
label="Container id"
/>
</StyledLabelBase>
<div
className="stringInputContainer"
>
<Stack>
<StyledLabelBase
id="containerId-label"
>
<ToolTipLabelComponent
label="Container id"
/>
</StyledLabelBase>
<StyledTextFieldBase
aria-labelledby="containerId-label"
id="containerId-textField-input"
@@ -525,7 +538,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
type="text"
value=""
/>
</div>
</Stack>
</Stack>
</StackItem>
</Stack>
@@ -543,28 +556,30 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
>
<StackItem>
<Stack>
<StyledLabelBase
id="analyticalStore-label"
>
<ToolTipLabelComponent
label="Analytical Store"
/>
</StyledLabelBase>
<StyledToggleBase
aria-labelledby="analyticalStore-label"
checked={false}
id="analyticalStore-toggle-input"
offText="Disabled"
onChange={[Function]}
onText="Enabled"
styles={
Object {
"root": Object {
"width": 400,
},
<Stack>
<StyledLabelBase
id="analyticalStore-label"
>
<ToolTipLabelComponent
label="Analytical Store"
/>
</StyledLabelBase>
<StyledToggleBase
aria-labelledby="analyticalStore-label"
checked={false}
id="analyticalStore-toggle-input"
offText="Disabled"
onChange={[Function]}
onText="Enabled"
styles={
Object {
"root": Object {
"width": 400,
},
}
}
}
/>
/>
</Stack>
</Stack>
</StackItem>
</Stack>
@@ -582,47 +597,50 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
>
<StackItem>
<Stack>
<StyledLabelBase
id="database-label"
>
<ToolTipLabelComponent
label="Database"
/>
</StyledLabelBase>
<StyledWithResponsiveMode
aria-labelledby="database-label"
id="database-dropdown-input"
onChange={[Function]}
options={
Array [
Object {
"key": "db1",
"text": "Database 1",
},
Object {
"key": "db2",
"text": "Database 2",
},
Object {
"key": "db3",
"text": "Database 3",
},
]
}
selectedKey="db2"
styles={
Object {
"dropdown": Object {
"color": "#393939",
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
"fontSize": 12,
},
"root": Object {
"width": 400,
},
<Stack>
<StyledLabelBase
id="database-label"
>
<ToolTipLabelComponent
label="Database"
/>
</StyledLabelBase>
<StyledWithResponsiveMode
aria-labelledby="database-label"
dropdownWidth="auto"
id="database-dropdown-input"
onChange={[Function]}
options={
Array [
Object {
"key": "db1",
"text": "Database 1",
},
Object {
"key": "db2",
"text": "Database 2",
},
Object {
"key": "db3",
"text": "Database 3",
},
]
}
}
/>
selectedKey="db2"
styles={
Object {
"dropdown": Object {
"color": "#393939",
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
"fontSize": 12,
},
"root": Object {
"width": 400,
},
}
}
/>
</Stack>
</Stack>
</StackItem>
</Stack>

99
src/Explorer/Panes/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
View File

@@ -310,7 +310,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
>
<i
aria-hidden={true}
className="panelWarningIcon root-109"
className="panelWarningIcon root-141"
data-icon-name="WarningSolid"
>
@@ -325,7 +325,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="panelWarningErrorMessage css-110"
className="panelWarningErrorMessage css-142"
>
Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
</span>
@@ -348,7 +348,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="css-110"
className="css-142"
>
Confirm by typing the collection id
</span>
@@ -367,6 +367,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
>
<TextFieldBase
autoFocus={true}
canRevealPassword={false}
deferredValidationTime={200}
id="confirmCollectionId"
onChange={[Function]}
@@ -648,18 +649,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
validateOnLoad={true}
>
<div
className="ms-TextField root-112"
className="ms-TextField root-144"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-113"
className="ms-TextField-fieldGroup fieldGroup-145"
>
<input
aria-invalid={false}
autoFocus={true}
className="ms-TextField-field field-114"
className="ms-TextField-field field-146"
id="confirmCollectionId"
onBlur={[Function]}
onChange={[Function]}
@@ -682,7 +683,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="css-120"
className="css-155"
>
Help us improve Azure Cosmos DB!
</span>
@@ -692,7 +693,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="css-120"
className="css-155"
>
What is the reason why you are deleting this container?
</span>
@@ -711,6 +712,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
}
>
<TextFieldBase
canRevealPassword={false}
deferredValidationTime={200}
id="deleteCollectionFeedbackInput"
multiline={true}
@@ -994,17 +996,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
validateOnLoad={true}
>
<div
className="ms-TextField ms-TextField--multiline root-112"
className="ms-TextField ms-TextField--multiline root-144"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-121"
className="ms-TextField-fieldGroup fieldGroup-156"
>
<textarea
aria-invalid={false}
className="ms-TextField-field field-122"
className="ms-TextField-field field-157"
id="deleteCollectionFeedbackInput"
onBlur={[Function]}
onChange={[Function]}
@@ -1900,7 +1902,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"iconDisabled": Object {
"color": "#a19f9d",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "GrayText",
},
},
@@ -1926,7 +1928,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"menuIconDisabled": Object {
"color": "#a19f9d",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "GrayText",
},
},
@@ -1945,7 +1947,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"position": "absolute",
"right": 2,
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"bottom": -2,
"left": -2,
"outlineColor": "ButtonText",
@@ -2003,11 +2005,12 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
},
},
},
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none",
"backgroundColor": "WindowText",
"borderColor": "WindowText",
"color": "Window",
"forcedColorAdjust": "none",
},
},
},
@@ -2034,7 +2037,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"position": "absolute",
"right": 2,
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"bottom": -2,
"left": -2,
"outlineColor": "ButtonText",
@@ -2066,8 +2069,10 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
},
},
Object {
"backgroundColor": "#f3f2f1",
"color": "#d2d0ce",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window",
"borderColor": "GrayText",
"color": "GrayText",
@@ -2084,7 +2089,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"border": "1px solid #106ebe",
"color": "#ffffff",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Highlight",
"borderColor": "Highlight",
"color": "Window",
@@ -2096,11 +2101,12 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"border": "1px solid #005a9e",
"color": "#ffffff",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none",
"backgroundColor": "WindowText",
"borderColor": "WindowText",
"color": "Window",
"forcedColorAdjust": "none",
},
},
},
@@ -2116,7 +2122,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"splitButtonContainer": Array [
Object {
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"border": "none",
},
},
@@ -2134,7 +2140,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"position": "absolute",
"right": 3,
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"border": "none",
"bottom": -2,
"left": -2,
@@ -2163,19 +2169,20 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"borderBottomRightRadius": "0",
"borderTopRightRadius": "0",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none",
"backgroundColor": "Window",
"border": "1px solid WindowText",
"borderRightWidth": "0",
"color": "WindowText",
"forcedColorAdjust": "none",
},
},
},
".ms-Button--primary + .ms-Button": Object {
"border": "none",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"border": "1px solid WindowText",
"borderLeftWidth": "0",
},
@@ -2188,10 +2195,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object {
".ms-Button--primary": Object {
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none",
"backgroundColor": "WindowText",
"color": "Window",
"forcedColorAdjust": "none",
},
},
},
@@ -2201,10 +2209,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object {
".ms-Button--primary": Object {
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none",
"backgroundColor": "WindowText",
"color": "Window",
"forcedColorAdjust": "none",
},
},
},
@@ -2214,12 +2223,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"border": "none",
"outline": "none",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none",
"backgroundColor": "Window",
"borderColor": "GrayText",
"color": "GrayText",
},
"@media screen and (forced-colors: active)": Object {
"forcedColorAdjust": "none",
},
},
@@ -2231,7 +2239,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object {
".ms-Button--primary": Object {
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Highlight",
"color": "Window",
},
@@ -2240,7 +2248,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
".ms-Button.is-disabled": Object {
"color": "#a19f9d",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window",
"borderColor": "GrayText",
"color": "GrayText",
@@ -2256,7 +2264,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"position": "absolute",
"right": 31,
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window",
},
},
@@ -2268,7 +2276,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"position": "absolute",
"right": 31,
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "WindowText",
},
},
@@ -2281,7 +2289,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"position": "absolute",
"right": 31,
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "GrayText",
},
},
@@ -2303,17 +2311,22 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
":hover": Object {
"backgroundColor": "#106ebe",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "Highlight",
},
},
},
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "WindowText",
},
},
},
Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
".ms-Button-menuIcon": Object {
"color": "WindowText",
},
},
"border": "1px solid #8a8886",
"borderBottomRightRadius": "2px",
"borderLeft": "none",
@@ -2359,7 +2372,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object {
".ms-Button--primary": Object {
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window",
"borderColor": "GrayText",
"color": "GrayText",
@@ -2368,7 +2381,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
},
".ms-Button-menuIcon": Object {
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "GrayText",
},
},
@@ -2376,7 +2389,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
":hover": Object {
"cursor": "default",
},
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window",
"border": "1px solid GrayText",
"color": "GrayText",
@@ -2398,7 +2411,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"splitButtonMenuIconDisabled": Object {
"color": "#a19f9d",
"selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "GrayText",
},
},
@@ -2686,7 +2699,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variantClassName="ms-Button--primary"
>
<button
className="ms-Button ms-Button--primary root-124"
className="ms-Button ms-Button--primary root-159"
data-is-focusable={true}
id="sidePanelOkButton"
onClick={[Function]}
@@ -2698,14 +2711,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-125"
className="ms-Button-flexContainer flexContainer-160"
data-automationid="splitbuttonprimary"
>
<span
className="ms-Button-textContainer textContainer-126"
className="ms-Button-textContainer textContainer-161"
>
<span
className="ms-Button-label label-128"
className="ms-Button-label label-163"
id="id__6"
key="id__6"
>