Merge branch 'staging' of https://github.com/dothq/scalar into staging

dothq · Jul 20, 2023 · de37114 · de37114
2 parents dc5273b + 86ffb66
commit de37114
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/app/components/ui/Tabs/index.tsx b/app/components/ui/Tabs/index.tsx
@@ -7,6 +7,7 @@ import Button, { ButtonProps } from "../Button";
 export interface Tab {
 	value: string;
 	label: string;
+	disabled?: boolean;
 	children?: any;
 }
 
@@ -38,6 +39,7 @@ export const Tabs = ({
 						colour={rest.colour}
 						fullwidth
 						htmlFor={`tab__${tab.value}`}
+						disabled={tab.disabled || false}
 						as={"label"}
 						style={{
 							"--no-js-pos": "absolute",
@@ -52,7 +54,9 @@ export const Tabs = ({
 						{tab.label}
 					</Button>
 					<div hidden style={{ paddingTop: "45px" }}>
-						{tab.children()}
+						{typeof tab.children == "function"
+							? tab.children()
+							: tab.children}
 					</div>
 				</>
 			))}

diff --git a/ui/foundation/components/button/index.scss b/ui/foundation/components/button/index.scss
@@ -81,3 +81,8 @@
 :root.no-js .fdn-button.no-js + .fdn-button:not(.no-js) {
 	display: none;
 }
+
+.fdn-button[disabled] {
+	opacity: 0.5;
+	pointer-events: none;
+}
diff --git a/ui/foundation/components/tabs/index.scss b/ui/foundation/components/tabs/index.scss
@@ -9,6 +9,10 @@
 	.fdn-tab:hover {
 		--tab-border-bottom: 2px solid var(--fdn-colours-gray);
 	}
+
+	.fdn-tab[disabled] {
+		background-color: var(--fdn-colours-black-secondary);
+	}
 }
 
 :root:not(.no-js) .fdn-tabs {