Skip to content

Commit

Permalink
feat(popover): add translucent and angleClassName props
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Sep 1, 2021
1 parent ec936eb commit a097703
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 8 deletions.
20 changes: 12 additions & 8 deletions src/react/components/Popover.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const Popover = forwardRef((props, ref) => {
const {
component = 'div',
className,
angleClassName = '',
colors: colorsProp,
size = 'w-64',
opened,
Expand All @@ -27,6 +28,7 @@ const Popover = forwardRef((props, ref) => {
targetY,
targetWidth,
targetHeight,
translucent = true,

ios,
material,
Expand Down Expand Up @@ -77,12 +79,11 @@ const Popover = forwardRef((props, ref) => {
base: {
common: cls(
'transition-transform-opacity duration-300 z-40 no-safe-areas',
colors.bg,
positionClass('fixed', className),
size
),
ios: 'rounded-xl',
material: 'rounded shadow-lg',
ios: '',
material: '',
opened: '',
closed: {
common: 'opacity-0 pointer-events-none',
Expand All @@ -91,13 +92,16 @@ const Popover = forwardRef((props, ref) => {
},
},
inner: {
common: 'overflow-hidden relative',
ios: 'rounded-xl',
material: 'rounded',
common: cls('overflow-hidden relative', colors.bg),
ios: cls('rounded-xl', translucent && 'translucent'),
material: 'rounded shadow-lg',
},
angleWrap: {
common: '',
ios: 'absolute w-6.5 h-6.5 z-50 overflow-hidden',
common: cls(angleClassName || ''),
ios: cls(
'absolute w-6.5 h-6.5 z-50 overflow-hidden',
translucent && 'opacity-80'
),
bottom: 'top-full',
top: 'bottom-full',
left: 'right-full',
Expand Down
11 changes: 11 additions & 0 deletions src/types/Popover.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,17 @@ interface Props {
*/
bg?: string;
};
/**
* Makes Popover background translucent (with `backdrop-filter: blur`) in iOS theme
*
* @default true
*/
translucent?: boolean;
/**
* Additional css class to add on "angle"/"corner" element
*
*/
angleClassName?: string;
/**
* Tailwind CSS size classes
*
Expand Down

0 comments on commit a097703

Please sign in to comment.