[LOOM-1284][BpkFlare] Fix class 2 CSS issues for BpkFlare

.eslintrc

@@ -138,8 +138,10 @@
               "Prop {{prop}} is forbidden. See https://github.com/Skyscanner/eslint-plugin-rules?tab=readme-ov-file#forbid-component-props",
             "allowedFor": [
               "BpkSelectableChip", // allowed for prop that is part of the classnames applied to the BpkSelectableChip
+              "CornerRadius", // allowed for a prop that is passed down in the BpkContentBubble as partof BpkFlare to a generated element and necessary to continue supporting svgClassName
               "InnerContainer", // allowed for a prop that is passed down in the BpkMobileScrollContainer to a generated element
               "ListElements",  // allowed for a prop that is passed down in BpkList to the conditional list elements
+              "Pointer", // allowed for a prop that is passed down in the BpkFlareBar to a generated element and necessary to continue supporting svgClassName
               "ScrimBpkModalInner", // allowed for a prop that is passed in BpkModal down to a scrim wrapped BpkModalInner component.
               "Slider" // allowed for a prop that is passed in BpkSlider down to the react-slider component.
             ]

examples/bpk-component-flare/examples.js

@@ -73,14 +73,6 @@ const FlareBarExample = () => (
   />
 );
 
-const FlareBarRoundedExample = () => (
-  <BpkFlareBar
-    className={getClassName('bpk-flare-stories__flare-bar')}
-    rounded
-    svgClassName={getClassName('bpk-flare-stories__flare-bar--svg')}
-  />
-);
-
 const ContentBubbleFullWithImageExample = () => (
   <BpkContentBubble
     className={getClassName(
@@ -104,6 +96,19 @@ const ContentBubbleFullWithContentExample = () => (
   />
 );
 
+const ContentBubbleRoundedExample = () => (
+  <div className={getClassName('bpk-flare-stories__container')}>
+    <BpkContentBubble
+    className={getClassName(
+      'bpk-flare-stories__content-bubble',
+    )}
+    rounded
+    flareProps={{svgClassName: getClassName('bpk-flare-stories__flare-bar--svg')}}
+    content={content}
+  />
+</div>
+);
+
 const ContentBubbleStandaloneExample = () => (
   <BpkContentBubble
     className={getClassName('bpk-flare-stories__content-bubble')}
@@ -124,7 +129,7 @@ const ContentBubbleFixedHeightExample = () => (
   />
 );
 
-const ContentBubblePointerHiddenExample = () => (
+const ContentBubblePointerHiddenRoundedExample = () => (
   <BpkContentBubble
     className={getClassName(
       'bpk-flare-stories__content-bubble',
@@ -133,27 +138,27 @@ const ContentBubblePointerHiddenExample = () => (
       'bpk-flare-stories__content-bubble--fixed-height',
     )}
     style={{ height: '45rem' }}
-    rounded={false}
+    rounded
     showPointer={false}
     content={contentShort}
   />
 );
 
 const MixedExample = () => (
   <div>
-    <ContentBubbleStandaloneExample />
+    <ContentBubbleRoundedExample />
     <ContentBubbleFixedHeightExample />
     <ContentBubbleFullWithContentExample />
   </div>
 );
 
 export {
   FlareBarExample,
-  FlareBarRoundedExample,
   ContentBubbleFullWithImageExample,
   ContentBubbleFullWithContentExample,
+  ContentBubbleRoundedExample,
   ContentBubbleStandaloneExample,
   ContentBubbleFixedHeightExample,
-  ContentBubblePointerHiddenExample,
+  ContentBubblePointerHiddenRoundedExample,
   MixedExample,
 };

examples/bpk-component-flare/examples.module.scss

@@ -21,6 +21,10 @@
 .bpk-flare-stories {
   padding: tokens.bpk-spacing-xl();
 
+  &__container {
+    background-color: tokens.$bpk-core-primary-day;
+  }
+
   &__flare-bar {
     width: 100%;
     margin-bottom: 2rem;

examples/bpk-component-flare/stories.js

@@ -22,12 +22,12 @@ import BpkFlareBar from '../../packages/bpk-component-flare/src/BpkFlareBar';
 
 import {
   FlareBarExample,
-  FlareBarRoundedExample,
   ContentBubbleFullWithImageExample,
   ContentBubbleFullWithContentExample,
+  ContentBubbleRoundedExample,
   ContentBubbleStandaloneExample,
   ContentBubbleFixedHeightExample,
-  ContentBubblePointerHiddenExample,
+  ContentBubblePointerHiddenRoundedExample,
   MixedExample,
 } from './examples';
 
@@ -41,19 +41,19 @@ export default {
 
 export const BpkFlareBarDefault = FlareBarExample;
 
-export const BpkFlareBarRounded = FlareBarRoundedExample;
-
 export const BpkContentBubbleFullWidthWithBackgroundImage =
   ContentBubbleFullWithImageExample;
 
 export const BpkContentBubbleFullWidthWithContent =
   ContentBubbleFullWithContentExample;
 
+export const BpkContentBubbleRounded = ContentBubbleRoundedExample;
+
 export const BpkContentBubbleStandalone = ContentBubbleStandaloneExample;
 
 export const BpkContentBubbleFixedHeight = ContentBubbleFixedHeightExample;
 
-export const BpkContentBubblePointerHidden = ContentBubblePointerHiddenExample;
+export const BpkContentBubblePointerHiddenRounded = ContentBubblePointerHiddenRoundedExample;
 
 export const VisualTest = MixedExample;
 export const VisualTestWithZoom = VisualTest.bind({});

packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap

@@ -273,35 +273,40 @@ exports[`BpkDialog should render with flare dialog 2`] = `
             >
               <div
                 class="bpk-content-bubble__content-wrapper"
-              />
-              <div
-                class="bpk-flare-bar__container bpk-content-bubble__pointer"
               >
                 <svg
-                  class="bpk-flare-bar__curve"
-                  viewBox="0 0 14832 55"
-                >
-                  <path
-                    d="M7501.307 8.517l-68.043 39.341c-10.632 6.185-23.795 6.185-34.528 0l-68.144-39.34c-8.91-5.173-18.988-8.215-29.316-8.518H0v55h14832V0H7530.671a63.604 63.604 0 00-29.364 8.517z"
-                  />
-                </svg>
-                <svg
-                  class="bpk-flare-bar__rounded-corner"
+                  class="bpk-content-bubble__rounded-corner"
                   viewBox="0 0 75 75"
                 >
                   <path
                     d="M0 0v75h75C37.5 75 0 37.5 0 0z"
                   />
                 </svg>
                 <svg
-                  class="bpk-flare-bar__rounded-corner bpk-flare-bar__rounded-corner--trailing"
+                  class="bpk-content-bubble__rounded-corner bpk-content-bubble__rounded-corner--trailing"
                   viewBox="0 0 75 75"
                 >
                   <path
                     d="M0 0v75h75C37.5 75 0 37.5 0 0z"
                   />
                 </svg>
               </div>
+              <div
+                class="bpk-content-bubble__pointer"
+              >
+                <div
+                  class="bpk-flare-bar__container"
+                >
+                  <svg
+                    class="bpk-flare-bar__curve"
+                    viewBox="0 0 14832 55"
+                  >
+                    <path
+                      d="M7501.307 8.517l-68.043 39.341c-10.632 6.185-23.795 6.185-34.528 0l-68.144-39.34c-8.91-5.173-18.988-8.215-29.316-8.518H0v55h14832V0H7530.671a63.604 63.604 0 00-29.364 8.517z"
+                    />
+                  </svg>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -372,35 +377,40 @@ exports[`BpkDialog should render with flare dialog with flareClassName 2`] = `
             >
               <div
                 class="bpk-content-bubble__content-wrapper"
-              />
-              <div
-                class="bpk-flare-bar__container bpk-content-bubble__pointer"
               >
                 <svg
-                  class="bpk-flare-bar__curve"
-                  viewBox="0 0 14832 55"
-                >
-                  <path
-                    d="M7501.307 8.517l-68.043 39.341c-10.632 6.185-23.795 6.185-34.528 0l-68.144-39.34c-8.91-5.173-18.988-8.215-29.316-8.518H0v55h14832V0H7530.671a63.604 63.604 0 00-29.364 8.517z"
-                  />
-                </svg>
-                <svg
-                  class="bpk-flare-bar__rounded-corner"
+                  class="bpk-content-bubble__rounded-corner"
                   viewBox="0 0 75 75"
                 >
                   <path
                     d="M0 0v75h75C37.5 75 0 37.5 0 0z"
                   />
                 </svg>
                 <svg
-                  class="bpk-flare-bar__rounded-corner bpk-flare-bar__rounded-corner--trailing"
+                  class="bpk-content-bubble__rounded-corner bpk-content-bubble__rounded-corner--trailing"
                   viewBox="0 0 75 75"
                 >
                   <path
                     d="M0 0v75h75C37.5 75 0 37.5 0 0z"
                   />
                 </svg>
               </div>
+              <div
+                class="bpk-content-bubble__pointer"
+              >
+                <div
+                  class="bpk-flare-bar__container"
+                >
+                  <svg
+                    class="bpk-flare-bar__curve"
+                    viewBox="0 0 14832 55"
+                  >
+                    <path
+                      d="M7501.307 8.517l-68.043 39.341c-10.632 6.185-23.795 6.185-34.528 0l-68.144-39.34c-8.91-5.173-18.988-8.215-29.316-8.518H0v55h14832V0H7530.671a63.604 63.604 0 00-29.364 8.517z"
+                    />
+                  </svg>
+                </div>
+              </div>
             </div>
           </div>
           <div

packages/bpk-component-flare/src/BpkContentBubble.js

@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import { cssModules } from '../../bpk-react-utils';
 
 import BpkFlareBar from './BpkFlareBar';
+import CornerRadius from './__generated__/js/corner-radius';
 
 import STYLES from './bpk-content-bubble.module.scss';
 
@@ -61,6 +62,18 @@ const BpkContentBubble = (props) => {
   if (className) {
     wrapperClassNames.push(className);
   }
+  const leftCornerRadiusClassNames = [
+    getClassName('bpk-content-bubble__rounded-corner'),
+  ];
+  const rightCornerRadiusClassNames = [
+    getClassName('bpk-content-bubble__rounded-corner'),
+    getClassName('bpk-content-bubble__rounded-corner--trailing'),
+  ];
+
+  if (flareProps?.svgClassName) {
+    leftCornerRadiusClassNames.push(flareProps.svgClassName);
+    rightCornerRadiusClassNames.push(flareProps.svgClassName);
+  }
 
   if (contentClassName) {
     contentClassNames.push(contentClassName);
@@ -69,15 +82,23 @@ const BpkContentBubble = (props) => {
   return (
     <div className={wrapperClassNames.join(' ')} {...rest}>
       <div className={getClassName('bpk-content-bubble__container')}>
-        <div className={contentClassNames.join(' ')}>{content && content}</div>
+        <div className={contentClassNames.join(' ')}>
+          {content && content}
+          {/* These rounded svgs are required as the container background extends into the flare meaning that when we "round" the container the rounded bottom corners are hidden by the flare. */}
+          {rounded && showPointer && (
+          <CornerRadius className={leftCornerRadiusClassNames.join(' ')} />
+          )}
+          {rounded && showPointer && (
+            <CornerRadius className={rightCornerRadiusClassNames.join(' ')} />
+          )}
+        </div>
         {showPointer && (
-          <BpkFlareBar
-            rounded={rounded}
-            // TODO: className to be removed
-            // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-            className={getClassName('bpk-content-bubble__pointer')}
-            {...flareProps}
-          />
+          <div className={getClassName('bpk-content-bubble__pointer')}>
+            <BpkFlareBar
+              rounded={rounded}
+              {...flareProps}
+            />
+          </div>
         )}
       </div>
     </div>

packages/bpk-component-flare/src/BpkFlareBar.js

@@ -20,7 +20,6 @@ import PropTypes from 'prop-types';
 
 import { cssModules } from '../../bpk-react-utils';
 
-import CornerRadius from './__generated__/js/corner-radius';
 import Pointer from './__generated__/js/pointer';
 
 import STYLES from './bpk-flare-bar.module.scss';
@@ -36,38 +35,14 @@ const BpkFlareBar = (props) => {
   }
 
   const curveClassNames = [getClassName('bpk-flare-bar__curve')];
-  const leftCornerRadiusClassNames = [
-    getClassName('bpk-flare-bar__rounded-corner'),
-  ];
-  const rightCornerRadiusClassNames = [
-    getClassName('bpk-flare-bar__rounded-corner'),
-    getClassName('bpk-flare-bar__rounded-corner--trailing'),
-  ];
+
   if (svgClassName) {
     curveClassNames.push(svgClassName);
-    leftCornerRadiusClassNames.push(svgClassName);
-    rightCornerRadiusClassNames.push(svgClassName);
   }
 
   return (
     <div className={classNames.join(' ')} {...rest}>
-      <Pointer
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        className={curveClassNames.join(' ')} 
-      />
-      {rounded && (
-        <CornerRadius
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        className={leftCornerRadiusClassNames.join(' ')} />
-      )}
-      {rounded && (
-        <CornerRadius
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        className={rightCornerRadiusClassNames.join(' ')} />
-      )}
+      <Pointer className={curveClassNames.join(' ')} />
     </div>
   );
 };