fix(react): popover caret is not hidden when caret prop is false

carbon-design-system · Dec 3, 2023 · 5117dc2 · 5117dc2
1 parent f8cc9c8
commit 5117dc2
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -85,7 +85,6 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
-
 <table>
   <tr>
     <td align="center"><a href="https://github.com/tay1orjones"><img src="https://avatars0.githubusercontent.com/u/3360588?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Taylor Jones</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=tay1orjones" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=tay1orjones" title="Documentation">📖</a> <a href="#a11y-tay1orjones" title="Accessibility">️️️️♿️</a></td>
@@ -260,10 +259,11 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/Nirajsah"><img src="https://avatars.githubusercontent.com/u/51414373?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Niraj Sah</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Nirajsah" title="Code">💻</a></td>
+    <td align="center"><a href="https://www.davidpadilla.dev/"><img src="https://avatars.githubusercontent.com/u/25573926?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David Padilla</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=cesardlinx" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/allisonishida"><img src="https://avatars.githubusercontent.com/u/22247062?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Allison Ishida</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=allisonishida" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/alewitt2"><img src="https://avatars.githubusercontent.com/u/48691328?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alex Lewitt</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=alewitt2" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/kuri-sun"><img src="https://avatars.githubusercontent.com/u/62743644?v=4?s=100" width="100px;" alt=""/><br /><sub><b>HaRuki</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=kuri-sun" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=kuri-sun" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/Tresau-IBM"><img src="https://avatars.githubusercontent.com/u/148357638?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tresau-IBM</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Tresau-IBM" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/kuri-sun"><img src="https://avatars.githubusercontent.com/u/62743644?v=4?s=100" width="100px;" alt=""/><br /><sub><b>HaRuki</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=kuri-sun" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=kuri-sun" title="Documentation">📖</a></td>
   </tr>
 </table>
 

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6055,9 +6055,6 @@ Map {
   "PopoverContent" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
-      "caret": Object {
-        "type": "bool",
-      },
       "children": Object {
         "type": "node",
       },

diff --git a/packages/react/src/components/Popover/Popover.stories.js b/packages/react/src/components/Popover/Popover.stories.js
@@ -68,7 +68,7 @@ const PlaygroundStory = (props) => {
       <div className="playground-trigger">
         <CheckboxIcon />
       </div>
-      <PopoverContent className="p-3" caret={caret}>
+      <PopoverContent className="p-3">
         <h2 className="popover-title">Available storage</h2>
         <p className="popover-details">
           This server has 150 GB of block storage remaining.

diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx
@@ -418,13 +418,11 @@ Popover.propTypes = {
   open: PropTypes.bool.isRequired,
 };
 
-export type PopoverContentProps = {
-  caret?: boolean | null | undefined;
-} & React.HTMLAttributes<HTMLSpanElement>;
+export type PopoverContentProps = React.HTMLAttributes<HTMLSpanElement>;
 
 function PopoverContentRenderFunction(
   // eslint-disable-next-line react/prop-types
-  { className, children, caret = true, ...rest }: PopoverContentProps,
+  { className, children, ...rest }: PopoverContentProps,
   forwardRef: React.ForwardedRef<HTMLSpanElement>
 ) {
   const prefix = usePrefix();
@@ -435,22 +433,14 @@ function PopoverContentRenderFunction(
       <span className={cx(`${prefix}--popover-content`, className)} ref={ref}>
         {children}
       </span>
-      <span
-        className={`${prefix}--popover-caret${
-          !caret ? ` ${prefix}--popover-caret-close` : ''
-        }`}
-      />
+      <span className={`${prefix}--popover-caret`} />
     </span>
   );
 }
 
 export const PopoverContent = React.forwardRef(PopoverContentRenderFunction);
 
 PopoverContent.propTypes = {
-  /**
-   * Provide whether caret should be visible or not.
-   */
-  caret: PropTypes.bool,
   /**
    * Provide elements to be rendered inside of the component
    */

diff --git a/packages/styles/scss/components/popover/_popover.scss b/packages/styles/scss/components/popover/_popover.scss
@@ -172,7 +172,7 @@ $popover-caret-height: custom-property.get-var(
     will-change: transform;
   }
 
-  .#{$prefix}--popover--open
+  .#{$prefix}--popover--caret.#{$prefix}--popover--open
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
     display: block;
@@ -184,12 +184,6 @@ $popover-caret-height: custom-property.get-var(
     display: none;
   }
 
-  .#{$prefix}--popover--open
-    > .#{$prefix}--popover
-    > .#{$prefix}--popover-caret-close {
-    display: none;
-  }
-
   //-----------------------------------------------------------------------------
   // Bottom
   //-----------------------------------------------------------------------------