Update the TechPreview component to also accept custom text (#2377)

* chore: Update the TechPreview component to also accept custom text * chore: Fix the linter warning and clean up CSS a bit
spectrocloud · Mar 7, 2024 · 10d31dc · 10d31dc
1 parent eb717d1
commit 10d31dc
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 11 deletions.
diff --git a/src/css/custom.scss b/src/css/custom.scss
@@ -209,7 +209,7 @@ p img.markdown-image {
   border-radius: 1vw;
 }
 
-.custom-admonition {
-  border: 1px solid var(--custom-important-color);
-  background-color: var(--custom-alert-bg-color);
+.admonition-tech-preview {
+  border: 1px solid var(--custom-purple-important-color);
+  background-color: var(--custom-purple-alert-bg-color);
 }
diff --git a/src/css/dark-mode.scss b/src/css/dark-mode.scss
@@ -29,8 +29,8 @@ html[data-theme="dark"] {
   --ifm-color-warning-dark: #ffc832;
   --ifm-alert-padding-horizontal: 1.5rem;
   --custom-table-header-color: #1c202b;
-  --custom-important-color: #7d77ca;
-  --custom-alert-bg-color: #1a173b;
+  --custom-purple-important-color: #7d77ca;
+  --custom-purple-alert-bg-color: #1a173b;
 
   .theme-last-updated {
     color: var(--ifm-font-color-base);

diff --git a/src/css/light-mode.scss b/src/css/light-mode.scss
@@ -26,8 +26,8 @@ html[data-theme="light"] {
   --ifm-color-warning-dark: #a8882f;
   --ifm-alert-padding-horizontal: 1.5rem;
   --custom-table-header-color: #f7f7f7;
-  --custom-important-color: #7d77ca;
-  --custom-alert-bg-color: #dcdaf9;
+  --custom-purple-important-color: #7d77ca;
+  --custom-purple-alert-bg-color: #dcdaf9;
 
   .theme-doc-sidebar-item-category-level-1 .menu__list-item {
     .menu__link:hover {

diff --git a/src/theme/Admonition/Icon/TechPreview.js b/src/theme/Admonition/Icon/TechPreview.js
@@ -2,6 +2,6 @@ import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFlag } from "@fortawesome/free-solid-svg-icons";
 
-export default function IconTechPreview(props) {
+export default function IconTechPreview() {
   return <FontAwesomeIcon icon={faFlag} />;
 }
diff --git a/src/theme/Admonition/Type/TechPreview.js b/src/theme/Admonition/Type/TechPreview.js
@@ -4,7 +4,7 @@ import Translate from "@docusaurus/Translate";
 import AdmonitionLayout from "@theme/Admonition/Layout";
 import IconTechPreview from "../Icon/TechPreview";
 
-const infimaClassName = "alert custom-admonition";
+const infimaClassName = "alert admonition-tech-preview";
 
 const defaultProps = {
   icon: <IconTechPreview />,
@@ -16,12 +16,15 @@ const defaultProps = {
       tech preview
     </Translate>
   ),
+  defaultText:
+    "This is a Tech Preview feature and is subject to change. Do not use this feature in production workloads.",
 };
 
 export default function AdmonitionTypeTechPreview(props) {
+  const text = props.children || defaultProps.defaultText;
   return (
-    <AdmonitionLayout {...defaultProps} {...props} className={clsx(infimaClassName, props.className)}>
-      {"This is a Tech Preview feature and is subject to change. Do not use this feature in production workloads."}
+    <AdmonitionLayout {...defaultProps} className={clsx(infimaClassName, props.className)}>
+      {text}
     </AdmonitionLayout>
   );
 }