From 6e37eac2c9749232feb0855b78c1e1ffbc6a7454 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Turan?= Date: Mon, 21 Aug 2023 14:11:44 +0300 Subject: [PATCH] Related #4360, #4602 - For Misc, Button components --- components/doc/badge/buttondoc.js | 8 ++-- components/lib/passthrough/tailwind/index.js | 12 +++-- components/lib/progressbar/ProgressBar.js | 22 ++++----- components/lib/progressbar/ProgressBarBase.js | 2 +- components/lib/progressbar/progressbar.d.ts | 4 +- components/lib/skeleton/Skeleton.js | 4 +- components/lib/skeleton/SkeletonBase.js | 2 +- components/lib/speeddial/SpeedDial.js | 26 +++++----- components/lib/speeddial/SpeedDialBase.js | 48 ++++--------------- components/lib/splitbutton/SplitButton.js | 2 + 10 files changed, 54 insertions(+), 76 deletions(-) diff --git a/components/doc/badge/buttondoc.js b/components/doc/badge/buttondoc.js index 0c3fba7483..6551eed5f7 100644 --- a/components/doc/badge/buttondoc.js +++ b/components/doc/badge/buttondoc.js @@ -9,7 +9,7 @@ export function ButtonDoc(props) { - `, @@ -24,7 +24,7 @@ export default function ButtonDemo() { - @@ -42,7 +42,7 @@ export default function ButtonDemo() { - @@ -60,7 +60,7 @@ export default function ButtonDemo() { - diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index 95cb8b6ac9..192c14671b 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -626,7 +626,7 @@ const Tailwind = { button: { root: ({ parent }) => ({ className: classNames('w-16 !h-16 !rounded-full justify-center z-10', { - 'rotate-45': parent.state.d_visible + 'rotate-45': parent.state.visible }) }), label: { @@ -652,8 +652,8 @@ const Tailwind = { }, mask: ({ state }) => ({ className: classNames('absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0', { - 'opacity-0': !state.d_visible, - 'pointer-events-none opacity-100 transition-opacity duration-400 ease-in-out': state.d_visible + 'opacity-0': !state.visible, + 'pointer-events-none opacity-100 transition-opacity duration-400 ease-in-out': state.visible }) }) }, @@ -667,6 +667,10 @@ const Tailwind = { }), icon: 'mr-2' }, + menu: { + className: classNames('outline-none', 'm-0 p-0 list-none') + }, + menulist: 'relative', menubutton: { root: ({ parent }) => ({ className: classNames('rounded-l-none', { 'rounded-r-full': parent.props.rounded }) @@ -1522,7 +1526,7 @@ const Tailwind = { 'w-16 h-16 text-2xl': props.size == 'xlarge' } // { - // '-ml-4 border-2 border-white dark:border-gray-900': parent.instance.$css !== undefined + // '-ml-4 border-2 border-white dark:border-gray-900': parent.instance !== undefined // } ) }), diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js index c7fe37554f..10cc6ba0c4 100644 --- a/components/lib/progressbar/ProgressBar.js +++ b/components/lib/progressbar/ProgressBar.js @@ -8,7 +8,7 @@ export const ProgressBar = React.memo( React.forwardRef((inProps, ref) => { const context = React.useContext(PrimeReactContext); const props = ProgressBarBase.getProps(inProps, context); - const { ptm, cx, sx, isUnstyled } = ProgressBarBase.setMetaData({ + const { ptm, cx, isUnstyled } = ProgressBarBase.setMetaData({ props }); @@ -29,8 +29,6 @@ export const ProgressBar = React.memo( const label = createLabel(); const rootProps = mergeProps( { - id: props.id, - ref: elementRef, className: cx('root'), style: props.style, role: 'progressbar', @@ -44,7 +42,7 @@ export const ProgressBar = React.memo( const valueProps = mergeProps( { className: cx('value'), - style: sx('value') + style: { width: props.value + '%', display: 'flex', backgroundColor: props.color } }, ptm('value') ); @@ -57,7 +55,7 @@ export const ProgressBar = React.memo( ); return ( -
+
{label != null &&
{label}
}
); @@ -66,8 +64,6 @@ export const ProgressBar = React.memo( const createIndeterminate = () => { const rootProps = mergeProps( { - id: props.id, - ref: elementRef, className: classNames(props.className, cx('root')), style: props.style, role: 'progressbar' @@ -76,24 +72,24 @@ export const ProgressBar = React.memo( ptm('root') ); - const indeterminateContainerProps = mergeProps( + const containerProps = mergeProps( { - className: cx('indeterminateContainer') + className: cx('container') }, - ptm('indeterminateContainer') + ptm('container') ); const valueProps = mergeProps( { className: cx('value'), - style: sx('value') + style: { backgroundColor: props.color } }, ptm('value') ); return ( -
-
+
+
diff --git a/components/lib/progressbar/ProgressBarBase.js b/components/lib/progressbar/ProgressBarBase.js index 31defd6190..810028f2aa 100644 --- a/components/lib/progressbar/ProgressBarBase.js +++ b/components/lib/progressbar/ProgressBarBase.js @@ -5,7 +5,7 @@ const classes = { root: ({ props }) => (props.mode === 'indeterminate' ? classNames('p-progressbar p-component p-progressbar-indeterminate') : classNames('p-progressbar p-component p-progressbar-determinate')), value: 'p-progressbar-value p-progressbar-value-animate', label: 'p-progressbar-label', - indeterminateContainer: 'p-progressbar-indeterminate-container' + container: 'p-progressbar-indeterminate-container' }; const styles = ` diff --git a/components/lib/progressbar/progressbar.d.ts b/components/lib/progressbar/progressbar.d.ts index b0af57d7a3..e4990c206d 100644 --- a/components/lib/progressbar/progressbar.d.ts +++ b/components/lib/progressbar/progressbar.d.ts @@ -29,9 +29,9 @@ export interface ProgressBarPassThroughOptions { */ root?: ProgressBarPassThroughType>; /** - * Uses to pass attributes to the indeterminate container's DOM element. + * Uses to pass attributes to the container's DOM element. */ - indeterminateContainer?: ProgressBarPassThroughType>; + container?: ProgressBarPassThroughType>; /** * Uses to pass attributes to the value's DOM element. */ diff --git a/components/lib/skeleton/Skeleton.js b/components/lib/skeleton/Skeleton.js index 09ecf63891..6b123c5d38 100644 --- a/components/lib/skeleton/Skeleton.js +++ b/components/lib/skeleton/Skeleton.js @@ -21,11 +21,13 @@ export const Skeleton = React.memo( getElement: () => elementRef.current })); + const style = props.size ? { width: props.size, height: props.size, borderRadius: props.borderRadius } : { width: props.width, height: props.height, borderRadius: props.borderRadius }; + const rootProps = mergeProps( { ref: elementRef, className: classNames(props.className, cx('root')), - style: sx('root') + style: { ...style, ...sx('root') } }, SkeletonBase.getOtherProps(props), ptm('root') diff --git a/components/lib/skeleton/SkeletonBase.js b/components/lib/skeleton/SkeletonBase.js index d3d13d43b2..85b73a0c98 100644 --- a/components/lib/skeleton/SkeletonBase.js +++ b/components/lib/skeleton/SkeletonBase.js @@ -46,7 +46,7 @@ const styles = ` `; const inlineStyles = { - root: ({ props }) => (props.size ? { width: props.size, height: props.size, borderRadius: props.borderRadius } : { width: props.width, height: props.height, borderRadius: props.borderRadius }) + root: { position: 'relative' } }; export const SkeletonBase = ComponentBase.extend({ diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js index 1c77abfef4..67b4d1e080 100644 --- a/components/lib/speeddial/SpeedDial.js +++ b/components/lib/speeddial/SpeedDial.js @@ -14,18 +14,19 @@ export const SpeedDial = React.memo( const [visibleState, setVisibleState] = React.useState(false); const context = React.useContext(PrimeReactContext); const props = SpeedDialBase.getProps(inProps, context); - const { ptm, cx, sx, isUnstyled } = SpeedDialBase.setMetaData({ + const visible = props.onVisibleChange ? props.visible : visibleState; + const metadata = { props, state: { - visible: visibleState + visible } - }); + }; + const { ptm, cx, sx, isUnstyled } = SpeedDialBase.setMetaData(metadata); useHandleStyle(SpeedDialBase.css.styles, isUnstyled, { name: 'speeddial' }); const isItemClicked = React.useRef(false); const elementRef = React.useRef(null); const listRef = React.useRef(null); - const visible = props.onVisibleChange ? props.visible : visibleState; const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({ type: 'click', @@ -216,7 +217,7 @@ export const SpeedDial = React.memo( { key: index, className: cx('menuitem'), - style: sx('item', { index, getItemStyle }), + style: getItemStyle(index), role: 'none' }, ptm('menuitem') @@ -234,7 +235,8 @@ export const SpeedDial = React.memo( const menuProps = mergeProps( { ref: listRef, - className: cx('list'), + className: cx('menu'), + style: sx('menu'), role: 'menu' }, ptm('menu') @@ -267,8 +269,11 @@ export const SpeedDial = React.memo( onClick: (e) => onClick(e), disabled: props.disabled, 'aria-label': props['aria-label'], - pt: props.pt && props.pt.button ? props.pt.button : {}, - unstyled: props.unstyled + pt: ptm('button'), + unstyled: props.unstyled, + __parentMetadata: { + parent: metadata + } }); const content =