feat(docs): refactor & revert

siemens · Oct 30, 2024 · 363df0d · 363df0d
1 parent 6ac1c98
commit 363df0d
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 51 deletions.
diff --git a/packages/documentation/docs/controls/forms/_forms-toggle_styleguide.md b/packages/documentation/docs/controls/forms/_forms-toggle_styleguide.md
@@ -31,5 +31,5 @@ Don't use toggles for actions that are irreversible or have serious consequences
 - [Form field](forms-field.md)
 - [Validation](forms-validation.mdx)
 - [Layout](forms-layout.md)
--  [Checkbox](../checkbox.mdx)
--  [Radio](../radio.mdx)
+- [Checkbox](../checkbox.mdx)
+- [Radio](../radio.mdx)
diff --git a/packages/documentation/docs/controls/forms/forms-validation.mdx b/packages/documentation/docs/controls/forms/forms-validation.mdx
@@ -7,7 +7,7 @@ import TabItem from '@theme/TabItem';
 # Validation
 
 <div className="d-flex gap-2 align-items-center">
-  <DeprecatedTags url='/docs/legacy/checkbox' hasDeprecatedAncestor={true}></DeprecatedTags>
+  <DeprecatedTags url='/docs/legacy/validation' hasDeprecatedAncestor={true}></DeprecatedTags>
 </div>
 
 <br />

diff --git a/packages/documentation/src/components/ApiTableTag/ApiTableTag.css b/packages/documentation/src/components/ApiTableTag/ApiTableTag.css
@@ -6,35 +6,30 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-.ApiTabTagDeprecated {
+.ApiTableTag .Tag {
   display: inline-block;
   position: relative;
 
   align-self: flex-start;
-
   width: auto;
   max-width: 25vw;
-
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-
   cursor: default;
   font-size: 12px;
   background-color: var(--theme-color-primary);
   border-radius: 2px;
   padding: 0.25rem 0.5rem;
-
   color: var(--theme-color-inv-std-text);
   font: var(--theme-text-default-title-single);
-
   margin: 0.5rem 0;
 }
 
-.TagDeprecated {
-  border: 1px solid var(--theme-color-alarm);
+.ApiTableTag .Tag.Tag--Deprecated {
+  background-color: var(--theme-color-alarm);
 }
 
-.TagDeprecated .Tag__Message--Deprecated {
+.ApiTableTag .Tag__Message--Deprecated {
   color: var(--theme-color-alarm-text);
 }
diff --git a/packages/documentation/src/components/Tags/LegacyTag.css b/packages/documentation/src/components/Tags/LegacyTag.css
@@ -16,14 +16,14 @@
 
   gap: 0.25rem;
 
+  border: 1px solid var(--theme-color-primary);
   border-radius: 0.25rem;
   padding: 0.2rem 0.5rem;
 
-  color: var(--theme-color-inv-std-text);
   font: var(--theme-text-default-title-single);
-
-  border: 1px solid var(--theme-color-primary);
-  box-sizing: border-box;
+  color: var(--theme-color-primary);
+  font-size: 12px;
+  line-height: 1.5;
 }
 
 a[href].TagContainer {
@@ -33,17 +33,3 @@ a[href].TagContainer {
 div.TagsContainer > .Docs__Tag {
   margin-right: 0;
 }
-
-.TagDeprecatedContainer {
-  border: 1px solid var(--theme-color-alarm);
-}
-
-.Title {
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--theme-color-primary);
-}
-
-.TagDeprecatedTitle {
-  color: var(--theme-color-alarm);
-}
diff --git a/packages/documentation/src/components/Tags/index.tsx b/packages/documentation/src/components/Tags/index.tsx
@@ -13,27 +13,11 @@ export default function LegacyTag(props: {
           Deprecated since {props.deprecationVersion}
         </span>
       )}
-      <a
-        href={props.url}
-        target="_blank"
-        className={`TagContainer ${
-          props.hasDeprecatedAncestor ? 'TagDeprecatedContainer' : ''
-        }`}
-      >
-        <IxIcon
-          name="open-external"
-          color={props.hasDeprecatedAncestor ? 'color-alarm' : 'color-primary'}
-          size="16"
-        ></IxIcon>
-        <div
-          className={`Title ${
-            props.hasDeprecatedAncestor ? 'TagDeprecatedTitle' : ''
-          }`}
-        >
-          {props.hasDeprecatedAncestor
-            ? 'Show deprecated version'
-            : 'Show latest version'}
-        </div>
+      <a href={props.url} target="_blank" className="TagContainer">
+        <IxIcon name="open-external" color="color-primary" size="16"></IxIcon>
+        {props.hasDeprecatedAncestor
+          ? 'Show deprecated version'
+          : 'Show latest version'}
       </a>
     </div>
   );