fix(OptionsTile): fix styling of summary and chevron when nesting Opt…

…ionsTile (#5612) * fix(OptionsTile): fix styling of summary and chevron when nesting OptionsTile * fix(OptionsTile): fix linting issues
carbon-design-system · Jul 3, 2024 · 9927c3b · 9927c3b
1 parent af3dd32
commit 9927c3b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/packages/ibm-products-styles/src/components/OptionsTile/_options-tile.scss b/packages/ibm-products-styles/src/components/OptionsTile/_options-tile.scss
@@ -163,18 +163,18 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
   overflow: hidden;
 }
 
-.#{$block-class}:not(.#{$block-class}--closing)
-  > details[open]
-  .#{$block-class}__summary,
+.#{$block-class}__summary.#{$block-class}__summary--open:not(
+    .#{$block-class}__summary--closing
+  ),
 .#{$block-class}__summary--hidden {
   height: 0;
   margin-top: 0;
   opacity: 0;
 }
 
-.#{$block-class}:not(.#{$block-class}--closing)
-  > details[open]
-  .#{$block-class}__chevron {
+.#{$block-class}__chevron.#{$block-class}__chevron--open:not(
+    .#{$block-class}__chevron--closing
+  ) {
   transform: rotate(180deg);
 }
 

diff --git a/packages/ibm-products/src/components/OptionsTile/OptionsTile.tsx b/packages/ibm-products/src/components/OptionsTile/OptionsTile.tsx
@@ -276,6 +276,12 @@ export let OptionsTile = React.forwardRef(
       let Icon: CarbonIconType | null = null;
       let text = summary;
       const summaryClasses = [`${blockClass}__summary`];
+      if (closing) {
+        summaryClasses.push(`${blockClass}__summary--closing`)
+      }
+      if (isOpen) {
+        summaryClasses.push(`${blockClass}__summary--open`)
+      }
 
       if (invalid) {
         Icon = WarningFilled;
@@ -348,7 +354,10 @@ export let OptionsTile = React.forwardRef(
                */
               /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
               <summary className={`${blockClass}__header`} onClick={toggle}>
-                <ChevronDown size={16} className={`${blockClass}__chevron`} />
+                <ChevronDown size={16} className={cx(`${blockClass}__chevron`, {
+                  [`${blockClass}__chevron--open`]: isOpen,
+                  [`${blockClass}__chevron--closing`]: closing
+                })} />
                 {renderTitle()}
               </summary>
             }