mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-25 11:51:07 +00:00
Compare commits
13 Commits
before_opt
...
accessibil
| Author | SHA1 | Date | |
|---|---|---|---|
|
ccb04af4c6 | ||
|
a2b0cf236e | ||
|
|
e2b72a3824 | ||
|
|
f27706bc37 | ||
|
|
fa81442222 | ||
|
|
25ef86a6c0 | ||
|
|
a4e60f106c | ||
|
|
d646686723 | ||
|
|
b84d5b572c | ||
|
|
c711b59f7d | ||
|
|
e945963cf9 | ||
|
|
5a660551c6 | ||
|
|
b2d59f3b3f |
@@ -2576,6 +2576,10 @@ a:link {
|
|||||||
.querydropdown.placeholderVisible {
|
.querydropdown.placeholderVisible {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
.querydropdown.placeholderVisible::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||||
|
color: #403f3f;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.querydropdown:hover {
|
.querydropdown:hover {
|
||||||
background-color: @AccentLow;
|
background-color: @AccentLow;
|
||||||
@@ -3087,3 +3091,4 @@ a:link {
|
|||||||
background: white;
|
background: white;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -142,7 +142,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
|
|||||||
{...imageProps}
|
{...imageProps}
|
||||||
src={EditIcon}
|
src={EditIcon}
|
||||||
alt="editEntity"
|
alt="editEntity"
|
||||||
id="editEntity"
|
|
||||||
onClick={onEditEntity}
|
onClick={onEditEntity}
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
onKeyPress={handleKeyPress}
|
onKeyPress={handleKeyPress}
|
||||||
|
|||||||
@@ -46,10 +46,13 @@ export class TabComponent extends React.Component<TabComponentProps> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let className = "toggleSwitch";
|
let className = "toggleSwitch";
|
||||||
|
let ariaselected;
|
||||||
if (index === this.props.currentTabIndex) {
|
if (index === this.props.currentTabIndex) {
|
||||||
className += " selectedToggle";
|
className += " selectedToggle";
|
||||||
|
ariaselected = true;
|
||||||
} else {
|
} else {
|
||||||
className += " unselectedToggle";
|
className += " unselectedToggle";
|
||||||
|
ariaselected = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -57,9 +60,10 @@ export class TabComponent extends React.Component<TabComponentProps> {
|
|||||||
<AccessibleElement
|
<AccessibleElement
|
||||||
as="span"
|
as="span"
|
||||||
className={className}
|
className={className}
|
||||||
role="presentation"
|
role="tab"
|
||||||
onActivated={() => this.setActiveTab(index)}
|
onActivated={() => this.setActiveTab(index)}
|
||||||
aria-label={`Select tab: ${tab.title}`}
|
aria-label={`Select tab: ${tab.title}`}
|
||||||
|
aria-selected={ariaselected}
|
||||||
>
|
>
|
||||||
{tab.title}
|
{tab.title}
|
||||||
</AccessibleElement>
|
</AccessibleElement>
|
||||||
@@ -77,7 +81,11 @@ export class TabComponent extends React.Component<TabComponentProps> {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="tabComponentContainer">
|
<div className="tabComponentContainer">
|
||||||
{!this.props.hideHeader && <div className="tabs tabSwitch">{this.renderTabTitles()}</div>}
|
{!this.props.hideHeader && (
|
||||||
|
<div className="tabs tabSwitch" role="tablist">
|
||||||
|
{this.renderTabTitles()}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div className={className}>{currentTabContent.render()}</div>
|
<div className={className}>{currentTabContent.render()}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -23,12 +23,12 @@ describe("ThroughputInput Pane", () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it("should switch mode properly", () => {
|
it("should switch mode properly", () => {
|
||||||
wrapper.find('[aria-label="Manual database throughput"]').simulate("change");
|
wrapper.find('[id="Manual-input"]').simulate("change");
|
||||||
expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe(
|
expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe(
|
||||||
"Container throughput (400 - unlimited RU/s)"
|
"Container throughput (400 - unlimited RU/s)"
|
||||||
);
|
);
|
||||||
|
|
||||||
wrapper.find('[aria-label="Autoscale database throughput"]').simulate("change");
|
wrapper.find('[id="Autoscale-input"]').simulate("change");
|
||||||
expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe("Container throughput (autoscale)");
|
expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe("Container throughput (autoscale)");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -189,7 +189,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
|||||||
<input
|
<input
|
||||||
id="Autoscale-input"
|
id="Autoscale-input"
|
||||||
className="throughputInputRadioBtn"
|
className="throughputInputRadioBtn"
|
||||||
aria-label="Autoscale database throughput"
|
aria-label={`Autoscale` + " " + getThroughputLabelText()}
|
||||||
aria-required={true}
|
aria-required={true}
|
||||||
checked={isAutoscaleSelected}
|
checked={isAutoscaleSelected}
|
||||||
type="radio"
|
type="radio"
|
||||||
@@ -204,7 +204,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
|||||||
<input
|
<input
|
||||||
id="Manual-input"
|
id="Manual-input"
|
||||||
className="throughputInputRadioBtn"
|
className="throughputInputRadioBtn"
|
||||||
aria-label="Manual database throughput"
|
aria-label={`Manual` + " " + getThroughputLabelText()}
|
||||||
checked={!isAutoscaleSelected}
|
checked={!isAutoscaleSelected}
|
||||||
type="radio"
|
type="radio"
|
||||||
aria-required={true}
|
aria-required={true}
|
||||||
@@ -222,13 +222,15 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
|||||||
<Stack className="throughputInputSpacing">
|
<Stack className="throughputInputSpacing">
|
||||||
<Text variant="small" aria-label="capacity calculator of azure cosmos db">
|
<Text variant="small" aria-label="capacity calculator of azure cosmos db">
|
||||||
Estimate your required RU/s with{" "}
|
Estimate your required RU/s with{" "}
|
||||||
<Link
|
<u style={{ color: "#0078D4" }}>
|
||||||
target="_blank"
|
<Link
|
||||||
href="https://cosmos.azure.com/capacitycalculator/"
|
target="_blank"
|
||||||
aria-label="capacity calculator of azure cosmos db"
|
href="https://cosmos.azure.com/capacitycalculator/"
|
||||||
>
|
aria-label="capacity calculator of azure cosmos db"
|
||||||
capacity calculator
|
>
|
||||||
</Link>
|
capacity calculator
|
||||||
|
</Link>
|
||||||
|
</u>
|
||||||
.
|
.
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
@@ -249,8 +251,9 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
|||||||
onChange={(event, newInput?: string) => onThroughputValueChange(newInput)}
|
onChange={(event, newInput?: string) => onThroughputValueChange(newInput)}
|
||||||
step={AutoPilotUtils.autoPilotIncrementStep}
|
step={AutoPilotUtils.autoPilotIncrementStep}
|
||||||
min={AutoPilotUtils.autoPilotThroughput1K}
|
min={AutoPilotUtils.autoPilotThroughput1K}
|
||||||
|
max={!isSharded ? 10000 : 9000000000000}
|
||||||
value={throughput.toString()}
|
value={throughput.toString()}
|
||||||
aria-label="Max request units per second"
|
ariaLabel="Max request units per second"
|
||||||
required={true}
|
required={true}
|
||||||
errorMessage={throughputError}
|
errorMessage={throughputError}
|
||||||
/>
|
/>
|
||||||
@@ -270,9 +273,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
|||||||
<Stack className="throughputInputSpacing">
|
<Stack className="throughputInputSpacing">
|
||||||
<Text variant="small" aria-label="ruDescription">
|
<Text variant="small" aria-label="ruDescription">
|
||||||
Estimate your required RU/s with
|
Estimate your required RU/s with
|
||||||
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="capacityLink">
|
<u style={{ color: "#0078D4" }}>
|
||||||
capacity calculator
|
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="capacityLink">
|
||||||
</Link>
|
capacity calculator
|
||||||
|
</Link>
|
||||||
|
</u>
|
||||||
.
|
.
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
@@ -295,7 +300,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
|||||||
min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
|
min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
|
||||||
max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
|
max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
|
||||||
value={throughput.toString()}
|
value={throughput.toString()}
|
||||||
aria-label="Max request units per second"
|
ariaLabel="Max request units per second"
|
||||||
required={true}
|
required={true}
|
||||||
errorMessage={throughputError}
|
errorMessage={throughputError}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -659,7 +659,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
|||||||
role="radiogroup"
|
role="radiogroup"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
aria-label="Autoscale database throughput"
|
aria-label="Autoscale Container throughput (autoscale)"
|
||||||
aria-required={true}
|
aria-required={true}
|
||||||
checked={true}
|
checked={true}
|
||||||
className="throughputInputRadioBtn"
|
className="throughputInputRadioBtn"
|
||||||
@@ -676,7 +676,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
|||||||
Autoscale
|
Autoscale
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
aria-label="Manual database throughput"
|
aria-label="Manual Container throughput (autoscale)"
|
||||||
aria-required={true}
|
aria-required={true}
|
||||||
checked={false}
|
checked={false}
|
||||||
className="throughputInputRadioBtn"
|
className="throughputInputRadioBtn"
|
||||||
@@ -712,301 +712,309 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
|||||||
>
|
>
|
||||||
Estimate your required RU/s with
|
Estimate your required RU/s with
|
||||||
|
|
||||||
<StyledLinkBase
|
<u
|
||||||
aria-label="capacity calculator of azure cosmos db"
|
style={
|
||||||
href="https://cosmos.azure.com/capacitycalculator/"
|
Object {
|
||||||
target="_blank"
|
"color": "#0078D4",
|
||||||
|
}
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<LinkBase
|
<StyledLinkBase
|
||||||
aria-label="capacity calculator of azure cosmos db"
|
aria-label="capacity calculator of azure cosmos db"
|
||||||
href="https://cosmos.azure.com/capacitycalculator/"
|
href="https://cosmos.azure.com/capacitycalculator/"
|
||||||
styles={[Function]}
|
|
||||||
target="_blank"
|
target="_blank"
|
||||||
theme={
|
|
||||||
Object {
|
|
||||||
"disableGlobalClassNames": false,
|
|
||||||
"effects": Object {
|
|
||||||
"elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
|
|
||||||
"elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
|
|
||||||
"elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
|
|
||||||
"elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
|
|
||||||
"roundedCorner2": "2px",
|
|
||||||
"roundedCorner4": "4px",
|
|
||||||
"roundedCorner6": "6px",
|
|
||||||
},
|
|
||||||
"fonts": Object {
|
|
||||||
"large": Object {
|
|
||||||
"MozOsxFontSmoothing": "grayscale",
|
|
||||||
"WebkitFontSmoothing": "antialiased",
|
|
||||||
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
|
||||||
"fontSize": "18px",
|
|
||||||
"fontWeight": 400,
|
|
||||||
},
|
|
||||||
"medium": Object {
|
|
||||||
"MozOsxFontSmoothing": "grayscale",
|
|
||||||
"WebkitFontSmoothing": "antialiased",
|
|
||||||
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
|
||||||
"fontSize": "14px",
|
|
||||||
"fontWeight": 400,
|
|
||||||
},
|
|
||||||
"mediumPlus": Object {
|
|
||||||
"MozOsxFontSmoothing": "grayscale",
|
|
||||||
"WebkitFontSmoothing": "antialiased",
|
|
||||||
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
|
||||||
"fontSize": "16px",
|
|
||||||
"fontWeight": 400,
|
|
||||||
},
|
|
||||||
"mega": Object {
|
|
||||||
"MozOsxFontSmoothing": "grayscale",
|
|
||||||
"WebkitFontSmoothing": "antialiased",
|
|
||||||
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
|
||||||
"fontSize": "68px",
|
|
||||||
"fontWeight": 600,
|
|
||||||
},
|
|
||||||
"small": Object {
|
|
||||||
"MozOsxFontSmoothing": "grayscale",
|
|
||||||
"WebkitFontSmoothing": "antialiased",
|
|
||||||
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
|
||||||
"fontSize": "12px",
|
|
||||||
"fontWeight": 400,
|
|
||||||
},
|
|
||||||
"smallPlus": Object {
|
|
||||||
"MozOsxFontSmoothing": "grayscale",
|
|
||||||
"WebkitFontSmoothing": "antialiased",
|
|
||||||
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
|
||||||
"fontSize": "12px",
|
|
||||||
"fontWeight": 400,
|
|
||||||
},
|
|
||||||
"superLarge": Object {
|
|
||||||
"MozOsxFontSmoothing": "grayscale",
|
|
||||||
"WebkitFontSmoothing": "antialiased",
|
|
||||||
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
|
||||||
"fontSize": "42px",
|
|
||||||
"fontWeight": 600,
|
|
||||||
},
|
|
||||||
"tiny": Object {
|
|
||||||
"MozOsxFontSmoothing": "grayscale",
|
|
||||||
"WebkitFontSmoothing": "antialiased",
|
|
||||||
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
|
||||||
"fontSize": "10px",
|
|
||||||
"fontWeight": 400,
|
|
||||||
},
|
|
||||||
"xLarge": Object {
|
|
||||||
"MozOsxFontSmoothing": "grayscale",
|
|
||||||
"WebkitFontSmoothing": "antialiased",
|
|
||||||
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
|
||||||
"fontSize": "20px",
|
|
||||||
"fontWeight": 600,
|
|
||||||
},
|
|
||||||
"xLargePlus": Object {
|
|
||||||
"MozOsxFontSmoothing": "grayscale",
|
|
||||||
"WebkitFontSmoothing": "antialiased",
|
|
||||||
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
|
||||||
"fontSize": "24px",
|
|
||||||
"fontWeight": 600,
|
|
||||||
},
|
|
||||||
"xSmall": Object {
|
|
||||||
"MozOsxFontSmoothing": "grayscale",
|
|
||||||
"WebkitFontSmoothing": "antialiased",
|
|
||||||
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
|
||||||
"fontSize": "10px",
|
|
||||||
"fontWeight": 400,
|
|
||||||
},
|
|
||||||
"xxLarge": Object {
|
|
||||||
"MozOsxFontSmoothing": "grayscale",
|
|
||||||
"WebkitFontSmoothing": "antialiased",
|
|
||||||
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
|
||||||
"fontSize": "28px",
|
|
||||||
"fontWeight": 600,
|
|
||||||
},
|
|
||||||
"xxLargePlus": Object {
|
|
||||||
"MozOsxFontSmoothing": "grayscale",
|
|
||||||
"WebkitFontSmoothing": "antialiased",
|
|
||||||
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
|
||||||
"fontSize": "32px",
|
|
||||||
"fontWeight": 600,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"isInverted": false,
|
|
||||||
"palette": Object {
|
|
||||||
"accent": "#0078d4",
|
|
||||||
"black": "#000000",
|
|
||||||
"blackTranslucent40": "rgba(0,0,0,.4)",
|
|
||||||
"blue": "#0078d4",
|
|
||||||
"blueDark": "#002050",
|
|
||||||
"blueLight": "#00bcf2",
|
|
||||||
"blueMid": "#00188f",
|
|
||||||
"green": "#107c10",
|
|
||||||
"greenDark": "#004b1c",
|
|
||||||
"greenLight": "#bad80a",
|
|
||||||
"magenta": "#b4009e",
|
|
||||||
"magentaDark": "#5c005c",
|
|
||||||
"magentaLight": "#e3008c",
|
|
||||||
"neutralDark": "#201f1e",
|
|
||||||
"neutralLight": "#edebe9",
|
|
||||||
"neutralLighter": "#f3f2f1",
|
|
||||||
"neutralLighterAlt": "#faf9f8",
|
|
||||||
"neutralPrimary": "#323130",
|
|
||||||
"neutralPrimaryAlt": "#3b3a39",
|
|
||||||
"neutralQuaternary": "#d2d0ce",
|
|
||||||
"neutralQuaternaryAlt": "#e1dfdd",
|
|
||||||
"neutralSecondary": "#605e5c",
|
|
||||||
"neutralSecondaryAlt": "#8a8886",
|
|
||||||
"neutralTertiary": "#a19f9d",
|
|
||||||
"neutralTertiaryAlt": "#c8c6c4",
|
|
||||||
"orange": "#d83b01",
|
|
||||||
"orangeLight": "#ea4300",
|
|
||||||
"orangeLighter": "#ff8c00",
|
|
||||||
"purple": "#5c2d91",
|
|
||||||
"purpleDark": "#32145a",
|
|
||||||
"purpleLight": "#b4a0ff",
|
|
||||||
"red": "#e81123",
|
|
||||||
"redDark": "#a4262c",
|
|
||||||
"teal": "#008272",
|
|
||||||
"tealDark": "#004b50",
|
|
||||||
"tealLight": "#00b294",
|
|
||||||
"themeDark": "#005a9e",
|
|
||||||
"themeDarkAlt": "#106ebe",
|
|
||||||
"themeDarker": "#004578",
|
|
||||||
"themeLight": "#c7e0f4",
|
|
||||||
"themeLighter": "#deecf9",
|
|
||||||
"themeLighterAlt": "#eff6fc",
|
|
||||||
"themePrimary": "#0078d4",
|
|
||||||
"themeSecondary": "#2b88d8",
|
|
||||||
"themeTertiary": "#71afe5",
|
|
||||||
"white": "#ffffff",
|
|
||||||
"whiteTranslucent40": "rgba(255,255,255,.4)",
|
|
||||||
"yellow": "#ffb900",
|
|
||||||
"yellowDark": "#d29200",
|
|
||||||
"yellowLight": "#fff100",
|
|
||||||
},
|
|
||||||
"rtl": undefined,
|
|
||||||
"semanticColors": Object {
|
|
||||||
"accentButtonBackground": "#0078d4",
|
|
||||||
"accentButtonText": "#ffffff",
|
|
||||||
"actionLink": "#323130",
|
|
||||||
"actionLinkHovered": "#201f1e",
|
|
||||||
"blockingBackground": "#FDE7E9",
|
|
||||||
"blockingIcon": "#FDE7E9",
|
|
||||||
"bodyBackground": "#ffffff",
|
|
||||||
"bodyBackgroundChecked": "#edebe9",
|
|
||||||
"bodyBackgroundHovered": "#f3f2f1",
|
|
||||||
"bodyDivider": "#edebe9",
|
|
||||||
"bodyFrameBackground": "#ffffff",
|
|
||||||
"bodyFrameDivider": "#edebe9",
|
|
||||||
"bodyStandoutBackground": "#faf9f8",
|
|
||||||
"bodySubtext": "#605e5c",
|
|
||||||
"bodyText": "#323130",
|
|
||||||
"bodyTextChecked": "#000000",
|
|
||||||
"buttonBackground": "#ffffff",
|
|
||||||
"buttonBackgroundChecked": "#c8c6c4",
|
|
||||||
"buttonBackgroundCheckedHovered": "#edebe9",
|
|
||||||
"buttonBackgroundDisabled": "#f3f2f1",
|
|
||||||
"buttonBackgroundHovered": "#f3f2f1",
|
|
||||||
"buttonBackgroundPressed": "#edebe9",
|
|
||||||
"buttonBorder": "#8a8886",
|
|
||||||
"buttonBorderDisabled": "#f3f2f1",
|
|
||||||
"buttonText": "#323130",
|
|
||||||
"buttonTextChecked": "#201f1e",
|
|
||||||
"buttonTextCheckedHovered": "#000000",
|
|
||||||
"buttonTextDisabled": "#a19f9d",
|
|
||||||
"buttonTextHovered": "#201f1e",
|
|
||||||
"buttonTextPressed": "#201f1e",
|
|
||||||
"cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
|
|
||||||
"cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
|
|
||||||
"cardStandoutBackground": "#ffffff",
|
|
||||||
"defaultStateBackground": "#faf9f8",
|
|
||||||
"disabledBackground": "#f3f2f1",
|
|
||||||
"disabledBodySubtext": "#c8c6c4",
|
|
||||||
"disabledBodyText": "#a19f9d",
|
|
||||||
"disabledBorder": "#c8c6c4",
|
|
||||||
"disabledSubtext": "#d2d0ce",
|
|
||||||
"disabledText": "#a19f9d",
|
|
||||||
"errorBackground": "#FDE7E9",
|
|
||||||
"errorIcon": "#A80000",
|
|
||||||
"errorText": "#a4262c",
|
|
||||||
"focusBorder": "#605e5c",
|
|
||||||
"infoBackground": "#f3f2f1",
|
|
||||||
"infoIcon": "#605e5c",
|
|
||||||
"inputBackground": "#ffffff",
|
|
||||||
"inputBackgroundChecked": "#0078d4",
|
|
||||||
"inputBackgroundCheckedHovered": "#005a9e",
|
|
||||||
"inputBorder": "#605e5c",
|
|
||||||
"inputBorderHovered": "#323130",
|
|
||||||
"inputFocusBorderAlt": "#0078d4",
|
|
||||||
"inputForegroundChecked": "#ffffff",
|
|
||||||
"inputIcon": "#0078d4",
|
|
||||||
"inputIconDisabled": "#a19f9d",
|
|
||||||
"inputIconHovered": "#005a9e",
|
|
||||||
"inputPlaceholderBackgroundChecked": "#deecf9",
|
|
||||||
"inputPlaceholderText": "#605e5c",
|
|
||||||
"inputText": "#323130",
|
|
||||||
"inputTextHovered": "#201f1e",
|
|
||||||
"link": "#0078d4",
|
|
||||||
"linkHovered": "#004578",
|
|
||||||
"listBackground": "#ffffff",
|
|
||||||
"listHeaderBackgroundHovered": "#f3f2f1",
|
|
||||||
"listHeaderBackgroundPressed": "#edebe9",
|
|
||||||
"listItemBackgroundChecked": "#edebe9",
|
|
||||||
"listItemBackgroundCheckedHovered": "#e1dfdd",
|
|
||||||
"listItemBackgroundHovered": "#f3f2f1",
|
|
||||||
"listText": "#323130",
|
|
||||||
"listTextColor": "#323130",
|
|
||||||
"menuBackground": "#ffffff",
|
|
||||||
"menuDivider": "#c8c6c4",
|
|
||||||
"menuHeader": "#0078d4",
|
|
||||||
"menuIcon": "#0078d4",
|
|
||||||
"menuItemBackgroundChecked": "#edebe9",
|
|
||||||
"menuItemBackgroundHovered": "#f3f2f1",
|
|
||||||
"menuItemBackgroundPressed": "#edebe9",
|
|
||||||
"menuItemText": "#323130",
|
|
||||||
"menuItemTextHovered": "#201f1e",
|
|
||||||
"messageLink": "#005A9E",
|
|
||||||
"messageLinkHovered": "#004578",
|
|
||||||
"messageText": "#323130",
|
|
||||||
"primaryButtonBackground": "#0078d4",
|
|
||||||
"primaryButtonBackgroundDisabled": "#f3f2f1",
|
|
||||||
"primaryButtonBackgroundHovered": "#106ebe",
|
|
||||||
"primaryButtonBackgroundPressed": "#005a9e",
|
|
||||||
"primaryButtonBorder": "transparent",
|
|
||||||
"primaryButtonText": "#ffffff",
|
|
||||||
"primaryButtonTextDisabled": "#d2d0ce",
|
|
||||||
"primaryButtonTextHovered": "#ffffff",
|
|
||||||
"primaryButtonTextPressed": "#ffffff",
|
|
||||||
"severeWarningBackground": "#FED9CC",
|
|
||||||
"severeWarningIcon": "#D83B01",
|
|
||||||
"smallInputBorder": "#605e5c",
|
|
||||||
"successBackground": "#DFF6DD",
|
|
||||||
"successIcon": "#107C10",
|
|
||||||
"successText": "#107C10",
|
|
||||||
"variantBorder": "#edebe9",
|
|
||||||
"variantBorderHovered": "#a19f9d",
|
|
||||||
"warningBackground": "#FFF4CE",
|
|
||||||
"warningHighlight": "#ffb900",
|
|
||||||
"warningIcon": "#797775",
|
|
||||||
"warningText": "#323130",
|
|
||||||
},
|
|
||||||
"spacing": Object {
|
|
||||||
"l1": "20px",
|
|
||||||
"l2": "32px",
|
|
||||||
"m": "16px",
|
|
||||||
"s1": "8px",
|
|
||||||
"s2": "4px",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<a
|
<LinkBase
|
||||||
aria-label="capacity calculator of azure cosmos db"
|
aria-label="capacity calculator of azure cosmos db"
|
||||||
className="ms-Link root-60"
|
|
||||||
href="https://cosmos.azure.com/capacitycalculator/"
|
href="https://cosmos.azure.com/capacitycalculator/"
|
||||||
onClick={[Function]}
|
styles={[Function]}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
|
theme={
|
||||||
|
Object {
|
||||||
|
"disableGlobalClassNames": false,
|
||||||
|
"effects": Object {
|
||||||
|
"elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
|
||||||
|
"elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
|
||||||
|
"elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
|
||||||
|
"elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
|
||||||
|
"roundedCorner2": "2px",
|
||||||
|
"roundedCorner4": "4px",
|
||||||
|
"roundedCorner6": "6px",
|
||||||
|
},
|
||||||
|
"fonts": Object {
|
||||||
|
"large": Object {
|
||||||
|
"MozOsxFontSmoothing": "grayscale",
|
||||||
|
"WebkitFontSmoothing": "antialiased",
|
||||||
|
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
||||||
|
"fontSize": "18px",
|
||||||
|
"fontWeight": 400,
|
||||||
|
},
|
||||||
|
"medium": Object {
|
||||||
|
"MozOsxFontSmoothing": "grayscale",
|
||||||
|
"WebkitFontSmoothing": "antialiased",
|
||||||
|
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
||||||
|
"fontSize": "14px",
|
||||||
|
"fontWeight": 400,
|
||||||
|
},
|
||||||
|
"mediumPlus": Object {
|
||||||
|
"MozOsxFontSmoothing": "grayscale",
|
||||||
|
"WebkitFontSmoothing": "antialiased",
|
||||||
|
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
||||||
|
"fontSize": "16px",
|
||||||
|
"fontWeight": 400,
|
||||||
|
},
|
||||||
|
"mega": Object {
|
||||||
|
"MozOsxFontSmoothing": "grayscale",
|
||||||
|
"WebkitFontSmoothing": "antialiased",
|
||||||
|
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
||||||
|
"fontSize": "68px",
|
||||||
|
"fontWeight": 600,
|
||||||
|
},
|
||||||
|
"small": Object {
|
||||||
|
"MozOsxFontSmoothing": "grayscale",
|
||||||
|
"WebkitFontSmoothing": "antialiased",
|
||||||
|
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
||||||
|
"fontSize": "12px",
|
||||||
|
"fontWeight": 400,
|
||||||
|
},
|
||||||
|
"smallPlus": Object {
|
||||||
|
"MozOsxFontSmoothing": "grayscale",
|
||||||
|
"WebkitFontSmoothing": "antialiased",
|
||||||
|
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
||||||
|
"fontSize": "12px",
|
||||||
|
"fontWeight": 400,
|
||||||
|
},
|
||||||
|
"superLarge": Object {
|
||||||
|
"MozOsxFontSmoothing": "grayscale",
|
||||||
|
"WebkitFontSmoothing": "antialiased",
|
||||||
|
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
||||||
|
"fontSize": "42px",
|
||||||
|
"fontWeight": 600,
|
||||||
|
},
|
||||||
|
"tiny": Object {
|
||||||
|
"MozOsxFontSmoothing": "grayscale",
|
||||||
|
"WebkitFontSmoothing": "antialiased",
|
||||||
|
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
||||||
|
"fontSize": "10px",
|
||||||
|
"fontWeight": 400,
|
||||||
|
},
|
||||||
|
"xLarge": Object {
|
||||||
|
"MozOsxFontSmoothing": "grayscale",
|
||||||
|
"WebkitFontSmoothing": "antialiased",
|
||||||
|
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
||||||
|
"fontSize": "20px",
|
||||||
|
"fontWeight": 600,
|
||||||
|
},
|
||||||
|
"xLargePlus": Object {
|
||||||
|
"MozOsxFontSmoothing": "grayscale",
|
||||||
|
"WebkitFontSmoothing": "antialiased",
|
||||||
|
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
||||||
|
"fontSize": "24px",
|
||||||
|
"fontWeight": 600,
|
||||||
|
},
|
||||||
|
"xSmall": Object {
|
||||||
|
"MozOsxFontSmoothing": "grayscale",
|
||||||
|
"WebkitFontSmoothing": "antialiased",
|
||||||
|
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
||||||
|
"fontSize": "10px",
|
||||||
|
"fontWeight": 400,
|
||||||
|
},
|
||||||
|
"xxLarge": Object {
|
||||||
|
"MozOsxFontSmoothing": "grayscale",
|
||||||
|
"WebkitFontSmoothing": "antialiased",
|
||||||
|
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
||||||
|
"fontSize": "28px",
|
||||||
|
"fontWeight": 600,
|
||||||
|
},
|
||||||
|
"xxLargePlus": Object {
|
||||||
|
"MozOsxFontSmoothing": "grayscale",
|
||||||
|
"WebkitFontSmoothing": "antialiased",
|
||||||
|
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
|
||||||
|
"fontSize": "32px",
|
||||||
|
"fontWeight": 600,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"isInverted": false,
|
||||||
|
"palette": Object {
|
||||||
|
"accent": "#0078d4",
|
||||||
|
"black": "#000000",
|
||||||
|
"blackTranslucent40": "rgba(0,0,0,.4)",
|
||||||
|
"blue": "#0078d4",
|
||||||
|
"blueDark": "#002050",
|
||||||
|
"blueLight": "#00bcf2",
|
||||||
|
"blueMid": "#00188f",
|
||||||
|
"green": "#107c10",
|
||||||
|
"greenDark": "#004b1c",
|
||||||
|
"greenLight": "#bad80a",
|
||||||
|
"magenta": "#b4009e",
|
||||||
|
"magentaDark": "#5c005c",
|
||||||
|
"magentaLight": "#e3008c",
|
||||||
|
"neutralDark": "#201f1e",
|
||||||
|
"neutralLight": "#edebe9",
|
||||||
|
"neutralLighter": "#f3f2f1",
|
||||||
|
"neutralLighterAlt": "#faf9f8",
|
||||||
|
"neutralPrimary": "#323130",
|
||||||
|
"neutralPrimaryAlt": "#3b3a39",
|
||||||
|
"neutralQuaternary": "#d2d0ce",
|
||||||
|
"neutralQuaternaryAlt": "#e1dfdd",
|
||||||
|
"neutralSecondary": "#605e5c",
|
||||||
|
"neutralSecondaryAlt": "#8a8886",
|
||||||
|
"neutralTertiary": "#a19f9d",
|
||||||
|
"neutralTertiaryAlt": "#c8c6c4",
|
||||||
|
"orange": "#d83b01",
|
||||||
|
"orangeLight": "#ea4300",
|
||||||
|
"orangeLighter": "#ff8c00",
|
||||||
|
"purple": "#5c2d91",
|
||||||
|
"purpleDark": "#32145a",
|
||||||
|
"purpleLight": "#b4a0ff",
|
||||||
|
"red": "#e81123",
|
||||||
|
"redDark": "#a4262c",
|
||||||
|
"teal": "#008272",
|
||||||
|
"tealDark": "#004b50",
|
||||||
|
"tealLight": "#00b294",
|
||||||
|
"themeDark": "#005a9e",
|
||||||
|
"themeDarkAlt": "#106ebe",
|
||||||
|
"themeDarker": "#004578",
|
||||||
|
"themeLight": "#c7e0f4",
|
||||||
|
"themeLighter": "#deecf9",
|
||||||
|
"themeLighterAlt": "#eff6fc",
|
||||||
|
"themePrimary": "#0078d4",
|
||||||
|
"themeSecondary": "#2b88d8",
|
||||||
|
"themeTertiary": "#71afe5",
|
||||||
|
"white": "#ffffff",
|
||||||
|
"whiteTranslucent40": "rgba(255,255,255,.4)",
|
||||||
|
"yellow": "#ffb900",
|
||||||
|
"yellowDark": "#d29200",
|
||||||
|
"yellowLight": "#fff100",
|
||||||
|
},
|
||||||
|
"rtl": undefined,
|
||||||
|
"semanticColors": Object {
|
||||||
|
"accentButtonBackground": "#0078d4",
|
||||||
|
"accentButtonText": "#ffffff",
|
||||||
|
"actionLink": "#323130",
|
||||||
|
"actionLinkHovered": "#201f1e",
|
||||||
|
"blockingBackground": "#FDE7E9",
|
||||||
|
"blockingIcon": "#FDE7E9",
|
||||||
|
"bodyBackground": "#ffffff",
|
||||||
|
"bodyBackgroundChecked": "#edebe9",
|
||||||
|
"bodyBackgroundHovered": "#f3f2f1",
|
||||||
|
"bodyDivider": "#edebe9",
|
||||||
|
"bodyFrameBackground": "#ffffff",
|
||||||
|
"bodyFrameDivider": "#edebe9",
|
||||||
|
"bodyStandoutBackground": "#faf9f8",
|
||||||
|
"bodySubtext": "#605e5c",
|
||||||
|
"bodyText": "#323130",
|
||||||
|
"bodyTextChecked": "#000000",
|
||||||
|
"buttonBackground": "#ffffff",
|
||||||
|
"buttonBackgroundChecked": "#c8c6c4",
|
||||||
|
"buttonBackgroundCheckedHovered": "#edebe9",
|
||||||
|
"buttonBackgroundDisabled": "#f3f2f1",
|
||||||
|
"buttonBackgroundHovered": "#f3f2f1",
|
||||||
|
"buttonBackgroundPressed": "#edebe9",
|
||||||
|
"buttonBorder": "#8a8886",
|
||||||
|
"buttonBorderDisabled": "#f3f2f1",
|
||||||
|
"buttonText": "#323130",
|
||||||
|
"buttonTextChecked": "#201f1e",
|
||||||
|
"buttonTextCheckedHovered": "#000000",
|
||||||
|
"buttonTextDisabled": "#a19f9d",
|
||||||
|
"buttonTextHovered": "#201f1e",
|
||||||
|
"buttonTextPressed": "#201f1e",
|
||||||
|
"cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
|
||||||
|
"cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
|
||||||
|
"cardStandoutBackground": "#ffffff",
|
||||||
|
"defaultStateBackground": "#faf9f8",
|
||||||
|
"disabledBackground": "#f3f2f1",
|
||||||
|
"disabledBodySubtext": "#c8c6c4",
|
||||||
|
"disabledBodyText": "#a19f9d",
|
||||||
|
"disabledBorder": "#c8c6c4",
|
||||||
|
"disabledSubtext": "#d2d0ce",
|
||||||
|
"disabledText": "#a19f9d",
|
||||||
|
"errorBackground": "#FDE7E9",
|
||||||
|
"errorIcon": "#A80000",
|
||||||
|
"errorText": "#a4262c",
|
||||||
|
"focusBorder": "#605e5c",
|
||||||
|
"infoBackground": "#f3f2f1",
|
||||||
|
"infoIcon": "#605e5c",
|
||||||
|
"inputBackground": "#ffffff",
|
||||||
|
"inputBackgroundChecked": "#0078d4",
|
||||||
|
"inputBackgroundCheckedHovered": "#005a9e",
|
||||||
|
"inputBorder": "#605e5c",
|
||||||
|
"inputBorderHovered": "#323130",
|
||||||
|
"inputFocusBorderAlt": "#0078d4",
|
||||||
|
"inputForegroundChecked": "#ffffff",
|
||||||
|
"inputIcon": "#0078d4",
|
||||||
|
"inputIconDisabled": "#a19f9d",
|
||||||
|
"inputIconHovered": "#005a9e",
|
||||||
|
"inputPlaceholderBackgroundChecked": "#deecf9",
|
||||||
|
"inputPlaceholderText": "#605e5c",
|
||||||
|
"inputText": "#323130",
|
||||||
|
"inputTextHovered": "#201f1e",
|
||||||
|
"link": "#0078d4",
|
||||||
|
"linkHovered": "#004578",
|
||||||
|
"listBackground": "#ffffff",
|
||||||
|
"listHeaderBackgroundHovered": "#f3f2f1",
|
||||||
|
"listHeaderBackgroundPressed": "#edebe9",
|
||||||
|
"listItemBackgroundChecked": "#edebe9",
|
||||||
|
"listItemBackgroundCheckedHovered": "#e1dfdd",
|
||||||
|
"listItemBackgroundHovered": "#f3f2f1",
|
||||||
|
"listText": "#323130",
|
||||||
|
"listTextColor": "#323130",
|
||||||
|
"menuBackground": "#ffffff",
|
||||||
|
"menuDivider": "#c8c6c4",
|
||||||
|
"menuHeader": "#0078d4",
|
||||||
|
"menuIcon": "#0078d4",
|
||||||
|
"menuItemBackgroundChecked": "#edebe9",
|
||||||
|
"menuItemBackgroundHovered": "#f3f2f1",
|
||||||
|
"menuItemBackgroundPressed": "#edebe9",
|
||||||
|
"menuItemText": "#323130",
|
||||||
|
"menuItemTextHovered": "#201f1e",
|
||||||
|
"messageLink": "#005A9E",
|
||||||
|
"messageLinkHovered": "#004578",
|
||||||
|
"messageText": "#323130",
|
||||||
|
"primaryButtonBackground": "#0078d4",
|
||||||
|
"primaryButtonBackgroundDisabled": "#f3f2f1",
|
||||||
|
"primaryButtonBackgroundHovered": "#106ebe",
|
||||||
|
"primaryButtonBackgroundPressed": "#005a9e",
|
||||||
|
"primaryButtonBorder": "transparent",
|
||||||
|
"primaryButtonText": "#ffffff",
|
||||||
|
"primaryButtonTextDisabled": "#d2d0ce",
|
||||||
|
"primaryButtonTextHovered": "#ffffff",
|
||||||
|
"primaryButtonTextPressed": "#ffffff",
|
||||||
|
"severeWarningBackground": "#FED9CC",
|
||||||
|
"severeWarningIcon": "#D83B01",
|
||||||
|
"smallInputBorder": "#605e5c",
|
||||||
|
"successBackground": "#DFF6DD",
|
||||||
|
"successIcon": "#107C10",
|
||||||
|
"successText": "#107C10",
|
||||||
|
"variantBorder": "#edebe9",
|
||||||
|
"variantBorderHovered": "#a19f9d",
|
||||||
|
"warningBackground": "#FFF4CE",
|
||||||
|
"warningHighlight": "#ffb900",
|
||||||
|
"warningIcon": "#797775",
|
||||||
|
"warningText": "#323130",
|
||||||
|
},
|
||||||
|
"spacing": Object {
|
||||||
|
"l1": "20px",
|
||||||
|
"l2": "32px",
|
||||||
|
"m": "16px",
|
||||||
|
"s1": "8px",
|
||||||
|
"s2": "4px",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
>
|
>
|
||||||
capacity calculator
|
<a
|
||||||
</a>
|
aria-label="capacity calculator of azure cosmos db"
|
||||||
</LinkBase>
|
className="ms-Link root-60"
|
||||||
</StyledLinkBase>
|
href="https://cosmos.azure.com/capacitycalculator/"
|
||||||
|
onClick={[Function]}
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
capacity calculator
|
||||||
|
</a>
|
||||||
|
</LinkBase>
|
||||||
|
</StyledLinkBase>
|
||||||
|
</u>
|
||||||
.
|
.
|
||||||
</span>
|
</span>
|
||||||
</Text>
|
</Text>
|
||||||
@@ -1640,10 +1648,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</Stack>
|
</Stack>
|
||||||
<StyledTextFieldBase
|
<StyledTextFieldBase
|
||||||
aria-label="Max request units per second"
|
ariaLabel="Max request units per second"
|
||||||
errorMessage=""
|
errorMessage=""
|
||||||
id="autoscaleRUValueField"
|
id="autoscaleRUValueField"
|
||||||
key=".0:$.2"
|
key=".0:$.2"
|
||||||
|
max={9000000000000}
|
||||||
min={1000}
|
min={1000}
|
||||||
onChange={[Function]}
|
onChange={[Function]}
|
||||||
required={true}
|
required={true}
|
||||||
@@ -1663,10 +1672,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
|||||||
value="4000"
|
value="4000"
|
||||||
>
|
>
|
||||||
<TextFieldBase
|
<TextFieldBase
|
||||||
aria-label="Max request units per second"
|
ariaLabel="Max request units per second"
|
||||||
deferredValidationTime={200}
|
deferredValidationTime={200}
|
||||||
errorMessage=""
|
errorMessage=""
|
||||||
id="autoscaleRUValueField"
|
id="autoscaleRUValueField"
|
||||||
|
max={9000000000000}
|
||||||
min={1000}
|
min={1000}
|
||||||
onChange={[Function]}
|
onChange={[Function]}
|
||||||
required={true}
|
required={true}
|
||||||
@@ -1961,8 +1971,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
|||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
aria-invalid={false}
|
aria-invalid={false}
|
||||||
|
aria-label="Max request units per second"
|
||||||
className="ms-TextField-field field-64"
|
className="ms-TextField-field field-64"
|
||||||
id="autoscaleRUValueField"
|
id="autoscaleRUValueField"
|
||||||
|
max={9000000000000}
|
||||||
min={1000}
|
min={1000}
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
onChange={[Function]}
|
onChange={[Function]}
|
||||||
|
|||||||
@@ -3,11 +3,11 @@
|
|||||||
.treeComponent {
|
.treeComponent {
|
||||||
.nodeItem {
|
.nodeItem {
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: 1px dashed @AccentMedium;
|
outline: 2px @AccentMedium;
|
||||||
}
|
}
|
||||||
|
|
||||||
.treeNodeHeader {
|
.treeNodeHeader {
|
||||||
padding: @SmallSpace 2px;
|
margin: 1px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
|
|||||||
onClick={this.props.toggleExpandGraph}
|
onClick={this.props.toggleExpandGraph}
|
||||||
role="button"
|
role="button"
|
||||||
aria-expanded={this.props.isTabsContentExpanded}
|
aria-expanded={this.props.isTabsContentExpanded}
|
||||||
aria-name="View graph in full screen"
|
aria-label="View graph in full screen"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}
|
src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}
|
||||||
|
|||||||
@@ -403,6 +403,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
|||||||
content={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
|
content={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
|
||||||
>
|
>
|
||||||
<Icon
|
<Icon
|
||||||
|
role="button"
|
||||||
iconName="Info"
|
iconName="Info"
|
||||||
className="panelInfoIcon"
|
className="panelInfoIcon"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
|
|||||||
@@ -172,6 +172,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
|
|||||||
ariaLabel="Unique identifier for the container and used for id-based routing through REST and all SDKs."
|
ariaLabel="Unique identifier for the container and used for id-based routing through REST and all SDKs."
|
||||||
className="panelInfoIcon"
|
className="panelInfoIcon"
|
||||||
iconName="Info"
|
iconName="Info"
|
||||||
|
role="button"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
/>
|
/>
|
||||||
</StyledTooltipHostBase>
|
</StyledTooltipHostBase>
|
||||||
|
|||||||
@@ -92,6 +92,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
className={active ? "active tabList" : "tabList"}
|
className={active ? "active tabList" : "tabList"}
|
||||||
|
style={active ? { fontWeight: "bolder" } : {}}
|
||||||
title={useObservable(tab?.tabPath || ko.observable(""))}
|
title={useObservable(tab?.tabPath || ko.observable(""))}
|
||||||
aria-selected={active}
|
aria-selected={active}
|
||||||
aria-expanded={active}
|
aria-expanded={active}
|
||||||
|
|||||||
Reference in New Issue
Block a user