From 9927c3b5406719cb0181487b39fdb1a17cca8302 Mon Sep 17 00:00:00 2001
From: lakeside76 <51127601+lakeside76@users.noreply.github.com>
Date: Wed, 3 Jul 2024 17:05:41 +0200
Subject: [PATCH] fix(OptionsTile): fix styling of summary and chevron when
 nesting OptionsTile (#5612)

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

* fix(OptionsTile): fix linting issues
---
 .../src/components/OptionsTile/_options-tile.scss    | 12 ++++++------
 .../src/components/OptionsTile/OptionsTile.tsx       | 11 ++++++++++-
 2 files changed, 16 insertions(+), 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
index e2a358d14d..266e2da90e 100644
--- 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
index 4783b2d317..412aecd0ae 100644
--- 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>
             }