feat(PPDSE-2360): feat-2360-vertical-volume-control-gap (#371)

* feat(PPDSE-2360): feat-2360-added-space * feat(PPDSE-2360): feat-2360-added-open prop * feat(PPDSE-2360): feat-2360-removed open prop * feat(PPDSE-2360): feat-2360-tidied up * feat(PPDSE-2360): feat-2360-spaceBetween prop bacl * feat(PPDSE-2360): feat-2360-removed padding from button * feat(PPDSE-2360): feat-2360-added mouseleave on slider * feat(PPDSE-2360): feat-2360-added mouseonleave bk * feat(PPDSE-2360): feat-2360-getcomponentoverrides added * feat(PPDSE-2360): feat-2360-updated other story * feat(PPDSE-2360): feat-2360-updated vertical stories * feat(PPDSE-2360): feat-2360-added extra story * feat(PPDSE-2360): feat-2360-changed types * feat(PPDSE-2360): feat-2360-updated stories
newscorp-ghfb · Sep 23, 2022 · 9b53810 · 9b53810
1 parent efaaeda
commit 9b53810
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 20 deletions.
diff --git a/src/audio-player-composable/__tests__/audio-player-composable.stories.tsx b/src/audio-player-composable/__tests__/audio-player-composable.stories.tsx
@@ -157,6 +157,18 @@ const myCustomTheme = createTheme({
     },
   },
 });
+const volumeTheme = createTheme({
+  name: 'my-custom-volume-theme',
+  overrides: {
+    stylePresets: {
+      customPointerStylePreset: {
+        base: {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+  },
+});
 
 const VerticalContainer = styled.div`
   display: inline-flex;
@@ -429,7 +441,18 @@ const AudioPlayerInlineLive = (props: Partial<AudioPlayerComposableProps>) => (
       justifyContent="flex-start"
     >
       <AudioPlayerPlayPauseButton size="small" />
-      <AudioPlayerVolumeControl layout="vertical" muteButtonSize="small" />
+      <AudioPlayerVolumeControl
+        layout="vertical"
+        overrides={{
+          popover: {
+            pointer: {
+              size: 'sizing080',
+              stylePreset: 'customPointerStylePreset',
+            },
+          },
+        }}
+        muteButtonSize="small"
+      />
       <Flag overrides={{stylePreset: `flagMinimalInformative`}}>
         <IconFilledGraphicEq />
         Live
@@ -645,7 +668,18 @@ export const StoryAudioSubComponents = () => {
           <GridLayoutItem>
             <StorybookSubHeading>Vertical Volume Control</StorybookSubHeading>
             <VerticalContainer>
-              <AudioPlayerVolumeControl layout="vertical" />
+              <AudioPlayerVolumeControl
+                layout="vertical"
+                overrides={{
+                  popover: {
+                    distance: 'space050',
+                    pointer: {
+                      size: 'sizing080',
+                      stylePreset: 'customPointerStylePreset',
+                    },
+                  },
+                }}
+              />
             </VerticalContainer>
           </GridLayoutItem>
           <GridLayoutItem column="1/-1">
@@ -1026,6 +1060,28 @@ export const StoryAudioPlayerOverrides = () => {
           />
         </AudioPlayerComposable>
       </ThemeProvider>
+      <ThemeProvider theme={volumeTheme}>
+        <StorybookSubHeading>
+          Volume control vertical with distance between button and slider
+        </StorybookSubHeading>
+        <AudioPlayerComposable
+          src={AUDIO_SRC}
+          ariaLandmark="audio player distance between iconbutton and slider"
+        >
+          <AudioPlayerVolumeControl
+            layout="vertical"
+            overrides={{
+              popover: {
+                distance: 'space050',
+                pointer: {
+                  size: 'sizing080',
+                  stylePreset: 'customPointerStylePreset',
+                },
+              },
+            }}
+          />
+        </AudioPlayerComposable>
+      </ThemeProvider>
     </StyledPage>
   );
 };
@@ -1313,6 +1369,22 @@ export const StoryAudioPlayerVolumeControlLayout = () => {
 
         <StorybookSubHeading>Volume control vertical</StorybookSubHeading>
         <AudioPlayerVolumeControl layout="vertical" />
+        <StorybookSubHeading>
+          Volume control vertical-no pointer and hover in between button and
+          popover
+        </StorybookSubHeading>
+        <AudioPlayerVolumeControl
+          layout="vertical"
+          overrides={{
+            popover: {
+              distance: 'space050',
+              pointer: {
+                size: 'sizing080',
+                stylePreset: 'customPointerStylePreset',
+              },
+            },
+          }}
+        />
       </AudioPlayerComposable>
     </StyledPage>
   );

diff --git a/src/audio-player-composable/components/volume-control/defaults.ts b/src/audio-player-composable/components/volume-control/defaults.ts
@@ -23,6 +23,7 @@ export default {
       stylePreset: 'iconButtonMinimalPrimary',
     },
     popover: {
+      distance: 'space030',
       stylePreset: 'audioPlayerVolumeControlPopover',
       content: {
         paddingBlock: 'space030',

diff --git a/src/audio-player-composable/components/volume-control/types.ts b/src/audio-player-composable/components/volume-control/types.ts
@@ -23,7 +23,7 @@ export interface AudioPlayerVolumeControlOverridesProps {
     stylePreset?: MQ<string>;
     muteButtonIcon: Override<MuteButtonIconProps>;
   };
-  popover?: PopoverProps['overrides'];
+  popover?: Override<PopoverProps>;
 }
 
 export interface AudioPlayerVolumeControlProps {

diff --git a/src/audio-player-composable/components/volume-control/volume-control.tsx b/src/audio-player-composable/components/volume-control/volume-control.tsx
@@ -22,7 +22,8 @@ import {mergeBreakpointObject} from '../../../utils/merge-breakpoint-object';
 import {filterOutFalsyProperties} from '../../../utils/filter-object';
 import {getTransitionDuration} from '../../../utils';
 import {getTransitionClassName} from '../../../utils/get-transition-class-name';
-import {Popover} from '../../../popover';
+import {Popover, PopoverProps} from '../../../popover';
+import {getComponentOverrides} from '../../../utils/overrides';
 
 const ThemelessAudioPlayerVolumeControl = React.forwardRef<
   HTMLDivElement,
@@ -129,9 +130,30 @@ const ThemelessAudioPlayerVolumeControl = React.forwardRef<
       overrides={sliderOverrides}
     />
   );
-
   const popoverOverrides = getPopoverOverrides(theme, overrides);
 
+  const popoverContent = (
+    <StyledVolumeSliderPopupContainer overrides={overrides}>
+      {sliderComponent}
+    </StyledVolumeSliderPopupContainer>
+  );
+  const DefaultPopover = Popover;
+  const [PopoverComponent, popoverProps] = getComponentOverrides(
+    /* istanbul ignore next  */
+    overrides?.popover,
+    DefaultPopover,
+    {
+      id: 'volume-control-slider-popup',
+      open: layout === 'vertical' && open,
+      hidePointer: false,
+      content: popoverContent,
+      overrides: popoverOverrides,
+      header: undefined,
+      closePosition: 'none',
+      disableFocusManagement: true,
+    },
+  );
+
   return (
     <StyledGridLayout
       ref={ref}
@@ -146,20 +168,7 @@ const ThemelessAudioPlayerVolumeControl = React.forwardRef<
       overrides={overrides}
     >
       <GridLayoutItem area="muteButton">
-        <Popover
-          hidePointer
-          open={layout === 'vertical' && open}
-          content={
-            <StyledVolumeSliderPopupContainer overrides={overrides}>
-              {sliderComponent}
-            </StyledVolumeSliderPopupContainer>
-          }
-          id="volume-control-slider-popup"
-          header={undefined}
-          closePosition="none"
-          disableFocusManagement
-          overrides={popoverOverrides}
-        >
+        <PopoverComponent {...(popoverProps as PopoverProps)}>
           <MuteButton
             volume={volume}
             unMutedVolume={unMutedVolume}
@@ -168,7 +177,7 @@ const ThemelessAudioPlayerVolumeControl = React.forwardRef<
             muteKeyboardShortcuts={keyboardShortcuts?.muteToggle}
             overrides={buttonOverrides}
           />
-        </Popover>
+        </PopoverComponent>
       </GridLayoutItem>
       {useSliderContainer && (
         <GridLayoutItem area="slider">

diff --git a/src/theme/__tests__/__snapshots__/theme.test.ts.snap b/src/theme/__tests__/__snapshots__/theme.test.ts.snap
@@ -1442,6 +1442,7 @@ Object {
         "paddingBlock": "space030",
         "paddingInline": "space030",
       },
+      "distance": "space030",
       "stylePreset": "audioPlayerVolumeControlPopover",
     },
     "slider": Object {