Related #4360, #4602 - For Misc, Button components

primefaces · Aug 21, 2023 · 6e37eac · 6e37eac
1 parent c7b61d7
commit 6e37eac
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 76 deletions.
diff --git a/components/doc/badge/buttondoc.js b/components/doc/badge/buttondoc.js
@@ -9,7 +9,7 @@ export function ButtonDoc(props) {
 <Button type="button" label="Emails">
     <Badge value="8"></Badge>
 </Button>
-<Button type="button" label="Messages" icon="pi pi-users" className="p-button-warning">
+<Button type="button" label="Messages" icon="pi pi-users" severity="warning">
     <Badge value="8" severity="danger"></Badge>
 </Button>
             `,
@@ -24,7 +24,7 @@ export default function ButtonDemo() {
             <Button type="button" label="Emails">
                 <Badge value="8"></Badge>
             </Button>
-            <Button type="button" label="Messages" icon="pi pi-users" className="p-button-warning">
+            <Button type="button" label="Messages" icon="pi pi-users" severity="warning">
                 <Badge value="8" severity="danger"></Badge>
             </Button>
         </div>
@@ -42,7 +42,7 @@ export default function ButtonDemo() {
             <Button type="button" label="Emails">
                 <Badge value="8"></Badge>
             </Button>
-            <Button type="button" label="Messages" icon="pi pi-users" className="p-button-warning">
+            <Button type="button" label="Messages" icon="pi pi-users" severity="warning">
                 <Badge value="8" severity="danger"></Badge>
             </Button>
         </div>
@@ -60,7 +60,7 @@ export default function ButtonDemo() {
                 <Button type="button" label="Emails">
                     <Badge value="8"></Badge>
                 </Button>
-                <Button type="button" label="Messages" icon="pi pi-users" className="p-button-warning">
+                <Button type="button" label="Messages" icon="pi pi-users" severity="warning">
                     <Badge value="8" severity="danger"></Badge>
                 </Button>
             </div>

diff --git 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
@@ -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 (
-                <div {...rootProps}>
+                <div id={props.id} ref={elementRef} {...rootProps}>
                     <div {...valueProps}>{label != null && <div {...labelProps}>{label}</div>}</div>
                 </div>
             );
@@ -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 (
-                <div {...rootProps}>
-                    <div {...indeterminateContainerProps}>
+                <div id={props.id} ref={elementRef} {...rootProps}>
+                    <div {...containerProps}>
                         <div {...valueProps}></div>
                     </div>
                 </div>

diff --git 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
@@ -29,9 +29,9 @@ export interface ProgressBarPassThroughOptions {
      */
     root?: ProgressBarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
-     * Uses to pass attributes to the indeterminate container's DOM element.
+     * Uses to pass attributes to the container's DOM element.
      */
-    indeterminateContainer?: ProgressBarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    container?: ProgressBarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the value's DOM element.
      */

diff --git 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
@@ -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
@@ -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 = <Button {...buttonProps} />;
 
@@ -309,17 +314,16 @@ export const SpeedDial = React.memo(
         const mask = createMask();
         const rootProps = mergeProps(
             {
-                id: props.id,
                 className: classNames(props.className, cx('root', { visible })),
-                style: props.style
+                style: { ...props.style, ...sx('root') }
             },
             SpeedDialBase.getOtherProps(props),
             ptm('root')
         );
 
         return (
             <React.Fragment>
-                <div ref={elementRef} {...rootProps}>
+                <div id={props.id} ref={elementRef} {...rootProps}>
                     {button}
                     {list}
                 </div>

diff --git a/components/lib/speeddial/SpeedDialBase.js b/components/lib/speeddial/SpeedDialBase.js
@@ -75,43 +75,6 @@ const styles = `
 .p-speeddial-opened .p-speeddial-rotate {
     transform: rotate(45deg);
 }
-
-/* Direction */
-.p-speeddial-direction-up {
-    align-items: center;
-    flex-direction: column-reverse;
-}
-
-.p-speeddial-direction-up .p-speeddial-list {
-    flex-direction: column-reverse;
-}
-
-.p-speeddial-direction-down {
-    align-items: center;
-    flex-direction: column;
-}
-
-.p-speeddial-direction-down .p-speeddial-list {
-    flex-direction: column;
-}
-
-.p-speeddial-direction-left {
-    justify-content: center;
-    flex-direction: row-reverse;
-}
-
-.p-speeddial-direction-left .p-speeddial-list {
-    flex-direction: row-reverse;
-}
-
-.p-speeddial-direction-right {
-    justify-content: center;
-    flex-direction: row;
-}
-
-.p-speeddial-direction-right .p-speeddial-list {
-    flex-direction: row;
-}
 `;
 
 const classes = {
@@ -131,12 +94,19 @@ const classes = {
         }),
     action: ({ disabled }) => classNames('p-speeddial-action', { 'p-disabled': disabled }),
     actionIcon: ({ _icon }) => classNames('p-speeddial-action-icon', _icon),
-    list: 'p-speeddial-list',
+    menu: 'p-speeddial-list',
     menuitem: 'p-speeddial-item'
 };
 
 const inlineStyles = {
-    menuitem: ({ index, getItemStyle }) => getItemStyle(index)
+    root: ({ props }) => ({
+        alignItems: props.direction === 'up' || props.direction === 'down' ? 'center' : '',
+        justifyContent: props.direction === 'left' || props.direction === 'right' ? 'center' : '',
+        flexDirection: props.direction === 'up' ? 'column-reverse' : props.direction === 'down' ? 'column' : props.direction === 'left' ? 'row-reverse' : props.direction === 'right' ? 'row' : null
+    }),
+    menu: ({ props }) => ({
+        flexDirection: props.direction === 'up' ? 'column-reverse' : props.direction === 'down' ? 'column' : props.direction === 'left' ? 'row-reverse' : props.direction === 'right' ? 'row' : null
+    })
 };
 
 export const SpeedDialBase = ComponentBase.extend({

diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js
@@ -173,6 +173,7 @@ export const SplitButton = React.memo(
                         onClick={props.onClick}
                         disabled={props.disabled}
                         tabIndex={props.tabIndex}
+                        size={props.size}
                         {...props.buttonProps}
                         pt={ptm('button')}
                         __parentMetadata={{
@@ -192,6 +193,7 @@ export const SplitButton = React.memo(
                         aria-haspopup="true"
                         aria-controls={overlayVisibleState ? menuId : null}
                         {...props.menuButtonProps}
+                        size={props.size}
                         pt={ptm('menuButton')}
                         __parentMetadata={{
                             parent: metadata