Merge pull request #1967 from Wai-Technologies/users/nitin/bug-1620-issue-identified-in-unit-testing

Resolved bug 1620 : Design System > Components > Issues identified during Unit Testing of Slider, Text Editor, Tabs, Text Area, Video Player

Author: nitinsonawane123

raaghu-elements/src/rds-icon/Icons.tsx

@@ -84,8 +84,7 @@
   .tooltip {
     position: absolute;
     top: -20px;
-    // transform: translateX(-50%);
-    transform: translate(-6px, 15px);
+    transform: translate(-8px, 15px);
     background-color: #333;
     font-size: 12px;
     white-space: nowrap;

raaghu-elements/src/rds-slider/rds-slider.scss

@@ -27,22 +27,38 @@
 
 /* Flap */
 .flap {
-    background-color: #9747ff;
-    color: #fff;
-    position: relative;
+  background-color: #9747ff;
+  color: #fff;
+  position: relative;
 }
 
 .flap::after {
-    content: "";
-    position: absolute;
-    bottom: -8px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-top: 10px solid #9747ff;
+  content: "";
+  position: absolute;
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid #9747ff;
+} 
+
+.flap-disabled::after {
+  border-top-color: #b987ff !important; 
+  pointer-events: none;
+  user-select: none;
+  opacity: 1.5;
+  color: #999 !important; 
+}
+
+ .flap-hover:hover::after {
+  border-top-color: #ebdcff !important;
+}
+
+.theme-dark .tab-group svg {
+  color: rgb(173 165 165) !important;
 }
 
 /* Pill */
@@ -140,12 +156,14 @@
   height: 16px;
 }
 
+/* Base styling for vertical flap */
 .vertical-flap {
   background: #9747ff;
   color: #fff;
   position: relative;
 }
- 
+
+/* Creates the arrow using borders */
 .vertical-flap::after {
   content: "";
   position: absolute;
@@ -159,6 +177,27 @@
   border-bottom: 18px solid transparent;
 }
 
+/* Disabled flap */
+.vertical-flap-disabled {
+  background: #d8c9ed; /* Optional: adjust background if needed */
+  color: #999 !important;
+  pointer-events: none;
+  user-select: none;
+  opacity: 0.6;
+}
+
+/* Disabled arrow */
+.vertical-flap-disabled::after {
+  border-left-color: #d8c9ed !important;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
+
+/* Hover state: arrow color changes on hover */
+.vertical-flap-hover:hover::after {
+  border-left-color: #ebdcff !important;
+}
+
 .vertical-pill {
   background: #9747ff;
   color: #fff;
@@ -225,7 +264,7 @@
   pointer-events: none;
   user-select: none;
   opacity: 0.5;
-  background-color: #ebdcff;
+  background-color: #d8c9ed;
   color: #999;
 }
 

raaghu-elements/src/rds-tab-group/rds-tab-group.css

@@ -37,11 +37,11 @@ const meta: Meta =  {
       control: { type: "select" },
     },
     leftIcon :{
-      options: ["user_tab","plus","pencil","edit"],
+      options: ["user_tab","plus_new","pencil","edit"],
       control: { type: "select" },
     },
     rightIcon :{
-      options: ["user_tab","plus","pencil","edit"],
+      options: ["user_tab","plus_new","pencil","edit"],
       control: { type: "select" },
     },
     state: {
@@ -77,7 +77,7 @@ export const Default : Story = {
     showLeftIcon: true,
     leftIcon: "user_tab",
     showRightIcon: true,
-    rightIcon: "plus",
+    rightIcon: "plus_new",
     icon: "cancel",
   }
 } satisfies Story;

raaghu-elements/src/rds-tab-group/rds-tab-group.stories.tsx

@@ -74,7 +74,13 @@ const RdsTabGroup = (props: RdsTabGroupProps) => {
     return (
       <div
         style={{ marginLeft: props.type === TabType.Vertical ? level * 20 : 0 }}
-        className={`tab-level ${props.state === TabState.Hover ? "tab-group-hover" : ""} ${props.layout === "Pill" ? "tab-group-pill" : ""} ${props.type === TabType.Vertical ? (props.layout ? layoutClassesForVertical[props.layout] : "") : (props.layout ? layoutClassesForHorizontal[props.layout] : "")}`}
+        className={`tab-level ${props.state === TabState.Hover ? "tab-group-hover" : ""} ${props.layout === "Pill" ? "tab-group-pill" : ""} 
+        ${props.layout === "Flap" && props.state === TabState.Hover  ? "flap-hover" : ""} 
+        ${props.layout === "Pill" ? "tab-group-pill" : ""} 
+        ${props.layout === "Flap" && props.state === TabState.Disabled  ? "flap-disabled" : ""}
+         ${props.layout === "Vertical-Flap" && props.state === TabState.Hover  ? "vertical-flap-hover" : ""} 
+        ${props.layout === "Vertical-Flap" && props.state === TabState.Disabled  ? "vertical-flap-disabled" : ""}  
+        ${props.type === TabType.Vertical ? (props.layout ? layoutClassesForVertical[props.layout] : "") : (props.layout ? layoutClassesForHorizontal[props.layout] : "")}`}
       >
         {tabs.map((item, index) => (
           <div key={index} className={props.type === TabType.Horizontal ? "d-inline-block" : ""}>