changed buildCss class name in _collapsible.tsx to match the class na…

…me in the ruby file and added on hover state to icon
powerhome · Oct 14, 2022 · 93a1a48 · 93a1a48
1 parent daa28eb
commit 93a1a48
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_collapsible/_collapsible.scss b/playbook/app/pb_kits/playbook/pb_collapsible/_collapsible.scss
@@ -1,3 +1,5 @@
+@import "./tokens/colors";
+
 [class^=pb_collapsible_kit] {
   .toggle-content {
     display: none;
@@ -12,4 +14,7 @@
     display: block;
     height: auto;
   }
+  .icon_wrapper:hover {
+      color: $primary
+  }
 }
diff --git a/playbook/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx b/playbook/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx
@@ -53,7 +53,7 @@ const Collapsible = ({
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_collapsible'),
+    buildCss('pb_collapsible_kit'),
     className,
     globalProps(props, { padding })
   )

diff --git a/playbook/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx b/playbook/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx
@@ -24,10 +24,11 @@ const Icon = ({ collapsed }: IconProps) => {
 
   return (
     <div
+        className="icon_wrapper"
         key={direction}
         style={{ verticalAlign: 'middle' }}
     >
-      <i className={`far fa-chevron-${direction} fa-fw`} />
+      <i className={`far fa-chevron-${direction} fa-fw icon_wrapper`} />
     </div>
   )
 }