mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-23 10:51:30 +00:00
Compare commits
13 Commits
documentdb
...
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 {
|
||||
font-style: italic;
|
||||
}
|
||||
.querydropdown.placeholderVisible::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: #403f3f;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.querydropdown:hover {
|
||||
background-color: @AccentLow;
|
||||
@@ -3087,3 +3091,4 @@ a:link {
|
||||
background: white;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
@@ -142,7 +142,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
|
||||
{...imageProps}
|
||||
src={EditIcon}
|
||||
alt="editEntity"
|
||||
id="editEntity"
|
||||
onClick={onEditEntity}
|
||||
tabIndex={0}
|
||||
onKeyPress={handleKeyPress}
|
||||
|
||||
@@ -46,10 +46,13 @@ export class TabComponent extends React.Component<TabComponentProps> {
|
||||
}
|
||||
|
||||
let className = "toggleSwitch";
|
||||
let ariaselected;
|
||||
if (index === this.props.currentTabIndex) {
|
||||
className += " selectedToggle";
|
||||
ariaselected = true;
|
||||
} else {
|
||||
className += " unselectedToggle";
|
||||
ariaselected = false;
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -57,9 +60,10 @@ export class TabComponent extends React.Component<TabComponentProps> {
|
||||
<AccessibleElement
|
||||
as="span"
|
||||
className={className}
|
||||
role="presentation"
|
||||
role="tab"
|
||||
onActivated={() => this.setActiveTab(index)}
|
||||
aria-label={`Select tab: ${tab.title}`}
|
||||
aria-selected={ariaselected}
|
||||
>
|
||||
{tab.title}
|
||||
</AccessibleElement>
|
||||
@@ -77,7 +81,11 @@ export class TabComponent extends React.Component<TabComponentProps> {
|
||||
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
|
||||
@@ -23,12 +23,12 @@ describe("ThroughputInput Pane", () => {
|
||||
});
|
||||
|
||||
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(
|
||||
"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)");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -189,7 +189,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
||||
<input
|
||||
id="Autoscale-input"
|
||||
className="throughputInputRadioBtn"
|
||||
aria-label="Autoscale database throughput"
|
||||
aria-label={`Autoscale` + " " + getThroughputLabelText()}
|
||||
aria-required={true}
|
||||
checked={isAutoscaleSelected}
|
||||
type="radio"
|
||||
@@ -204,7 +204,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
||||
<input
|
||||
id="Manual-input"
|
||||
className="throughputInputRadioBtn"
|
||||
aria-label="Manual database throughput"
|
||||
aria-label={`Manual` + " " + getThroughputLabelText()}
|
||||
checked={!isAutoscaleSelected}
|
||||
type="radio"
|
||||
aria-required={true}
|
||||
@@ -222,13 +222,15 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
||||
<Stack className="throughputInputSpacing">
|
||||
<Text variant="small" aria-label="capacity calculator of azure cosmos db">
|
||||
Estimate your required RU/s with{" "}
|
||||
<Link
|
||||
target="_blank"
|
||||
href="https://cosmos.azure.com/capacitycalculator/"
|
||||
aria-label="capacity calculator of azure cosmos db"
|
||||
>
|
||||
capacity calculator
|
||||
</Link>
|
||||
<u style={{ color: "#0078D4" }}>
|
||||
<Link
|
||||
target="_blank"
|
||||
href="https://cosmos.azure.com/capacitycalculator/"
|
||||
aria-label="capacity calculator of azure cosmos db"
|
||||
>
|
||||
capacity calculator
|
||||
</Link>
|
||||
</u>
|
||||
.
|
||||
</Text>
|
||||
|
||||
@@ -249,8 +251,9 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
||||
onChange={(event, newInput?: string) => onThroughputValueChange(newInput)}
|
||||
step={AutoPilotUtils.autoPilotIncrementStep}
|
||||
min={AutoPilotUtils.autoPilotThroughput1K}
|
||||
max={!isSharded ? 10000 : 9000000000000}
|
||||
value={throughput.toString()}
|
||||
aria-label="Max request units per second"
|
||||
ariaLabel="Max request units per second"
|
||||
required={true}
|
||||
errorMessage={throughputError}
|
||||
/>
|
||||
@@ -270,9 +273,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
||||
<Stack className="throughputInputSpacing">
|
||||
<Text variant="small" aria-label="ruDescription">
|
||||
Estimate your required RU/s with
|
||||
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="capacityLink">
|
||||
capacity calculator
|
||||
</Link>
|
||||
<u style={{ color: "#0078D4" }}>
|
||||
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="capacityLink">
|
||||
capacity calculator
|
||||
</Link>
|
||||
</u>
|
||||
.
|
||||
</Text>
|
||||
|
||||
@@ -295,7 +300,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
||||
min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
|
||||
max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
|
||||
value={throughput.toString()}
|
||||
aria-label="Max request units per second"
|
||||
ariaLabel="Max request units per second"
|
||||
required={true}
|
||||
errorMessage={throughputError}
|
||||
/>
|
||||
|
||||
@@ -659,7 +659,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
||||
role="radiogroup"
|
||||
>
|
||||
<input
|
||||
aria-label="Autoscale database throughput"
|
||||
aria-label="Autoscale Container throughput (autoscale)"
|
||||
aria-required={true}
|
||||
checked={true}
|
||||
className="throughputInputRadioBtn"
|
||||
@@ -676,7 +676,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
||||
Autoscale
|
||||
</label>
|
||||
<input
|
||||
aria-label="Manual database throughput"
|
||||
aria-label="Manual Container throughput (autoscale)"
|
||||
aria-required={true}
|
||||
checked={false}
|
||||
className="throughputInputRadioBtn"
|
||||
@@ -712,301 +712,309 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
||||
>
|
||||
Estimate your required RU/s with
|
||||
|
||||
<StyledLinkBase
|
||||
aria-label="capacity calculator of azure cosmos db"
|
||||
href="https://cosmos.azure.com/capacitycalculator/"
|
||||
target="_blank"
|
||||
<u
|
||||
style={
|
||||
Object {
|
||||
"color": "#0078D4",
|
||||
}
|
||||
}
|
||||
>
|
||||
<LinkBase
|
||||
<StyledLinkBase
|
||||
aria-label="capacity calculator of azure cosmos db"
|
||||
href="https://cosmos.azure.com/capacitycalculator/"
|
||||
styles={[Function]}
|
||||
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"
|
||||
className="ms-Link root-60"
|
||||
href="https://cosmos.azure.com/capacitycalculator/"
|
||||
onClick={[Function]}
|
||||
styles={[Function]}
|
||||
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>
|
||||
</LinkBase>
|
||||
</StyledLinkBase>
|
||||
<a
|
||||
aria-label="capacity calculator of azure cosmos db"
|
||||
className="ms-Link root-60"
|
||||
href="https://cosmos.azure.com/capacitycalculator/"
|
||||
onClick={[Function]}
|
||||
target="_blank"
|
||||
>
|
||||
capacity calculator
|
||||
</a>
|
||||
</LinkBase>
|
||||
</StyledLinkBase>
|
||||
</u>
|
||||
.
|
||||
</span>
|
||||
</Text>
|
||||
@@ -1640,10 +1648,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
||||
</div>
|
||||
</Stack>
|
||||
<StyledTextFieldBase
|
||||
aria-label="Max request units per second"
|
||||
ariaLabel="Max request units per second"
|
||||
errorMessage=""
|
||||
id="autoscaleRUValueField"
|
||||
key=".0:$.2"
|
||||
max={9000000000000}
|
||||
min={1000}
|
||||
onChange={[Function]}
|
||||
required={true}
|
||||
@@ -1663,10 +1672,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
||||
value="4000"
|
||||
>
|
||||
<TextFieldBase
|
||||
aria-label="Max request units per second"
|
||||
ariaLabel="Max request units per second"
|
||||
deferredValidationTime={200}
|
||||
errorMessage=""
|
||||
id="autoscaleRUValueField"
|
||||
max={9000000000000}
|
||||
min={1000}
|
||||
onChange={[Function]}
|
||||
required={true}
|
||||
@@ -1961,8 +1971,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
||||
>
|
||||
<input
|
||||
aria-invalid={false}
|
||||
aria-label="Max request units per second"
|
||||
className="ms-TextField-field field-64"
|
||||
id="autoscaleRUValueField"
|
||||
max={9000000000000}
|
||||
min={1000}
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
.treeComponent {
|
||||
.nodeItem {
|
||||
&:focus {
|
||||
outline: 1px dashed @AccentMedium;
|
||||
outline: 2px @AccentMedium;
|
||||
}
|
||||
|
||||
.treeNodeHeader {
|
||||
padding: @SmallSpace 2px;
|
||||
margin: 1px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
|
||||
onClick={this.props.toggleExpandGraph}
|
||||
role="button"
|
||||
aria-expanded={this.props.isTabsContentExpanded}
|
||||
aria-name="View graph in full screen"
|
||||
aria-label="View graph in full screen"
|
||||
>
|
||||
<img
|
||||
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.`}
|
||||
>
|
||||
<Icon
|
||||
role="button"
|
||||
iconName="Info"
|
||||
className="panelInfoIcon"
|
||||
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."
|
||||
className="panelInfoIcon"
|
||||
iconName="Info"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
/>
|
||||
</StyledTooltipHostBase>
|
||||
|
||||
@@ -92,6 +92,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
|
||||
}
|
||||
}}
|
||||
className={active ? "active tabList" : "tabList"}
|
||||
style={active ? { fontWeight: "bolder" } : {}}
|
||||
title={useObservable(tab?.tabPath || ko.observable(""))}
|
||||
aria-selected={active}
|
||||
aria-expanded={active}
|
||||
|
||||
Reference in New Issue
Block a user