Refactor #4602 - for Toolbar

primefaces · Jul 5, 2023 · f63a77f · f63a77f
1 parent 6bc739c
commit f63a77f
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 27 deletions.
diff --git a/components/lib/toolbar/Toolbar.css b/components/lib/toolbar/Toolbar.css
diff --git a/components/lib/toolbar/Toolbar.js b/components/lib/toolbar/Toolbar.js
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { classNames, ObjectUtils, mergeProps } from '../utils/Utils';
-import { ToolbarBase } from './ToolbarBase';
 import { PrimeReactContext } from '../api/Api';
+import { useStyle } from '../hooks/Hooks';
+import { ObjectUtils, mergeProps } from '../utils/Utils';
+import { ToolbarBase } from './ToolbarBase';
 
 export const Toolbar = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -14,7 +15,9 @@ export const Toolbar = React.memo(
         const center = ObjectUtils.getJSXElement(props.center, props);
         const end = ObjectUtils.getJSXElement(props.right || props.end, props);
 
-        const { ptm } = ToolbarBase.setMetaData({
+        useStyle(ToolbarBase.css.styles, { name: 'primereact_toolbar_style' });
+
+        const { ptm, cx } = ToolbarBase.setMetaData({
             props
         });
 
@@ -25,21 +28,21 @@ export const Toolbar = React.memo(
 
         const startProps = mergeProps(
             {
-                className: 'p-toolbar-group-start p-toolbar-group-left'
+                className: cx('start')
             },
             ptm('start')
         );
 
         const centerProps = mergeProps(
             {
-                className: 'p-toolbar-group-center'
+                className: cx('center')
             },
             ptm('center')
         );
 
         const endProps = mergeProps(
             {
-                className: 'p-toolbar-group-end p-toolbar-group-right'
+                className: cx('end')
             },
             ptm('end')
         );
@@ -49,7 +52,7 @@ export const Toolbar = React.memo(
                 id: props.id,
                 ref: elementRef,
                 style: props.style,
-                className: classNames('p-toolbar p-component', props.className),
+                className: cx('root'),
                 role: 'toolbar'
             },
             ToolbarBase.getOtherProps(props),

diff --git a/components/lib/toolbar/ToolbarBase.js b/components/lib/toolbar/ToolbarBase.js
@@ -1,4 +1,5 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/utils';
 
 export const ToolbarBase = ComponentBase.extend({
     defaultProps: {
@@ -12,5 +13,34 @@ export const ToolbarBase = ComponentBase.extend({
         center: null,
         end: null,
         children: undefined
+    },
+    css: {
+        classes: {
+            root: ({ props }) => classNames('p-toolbar p-component', props.className),
+            start: 'p-toolbar-group-start p-toolbar-group-left',
+            center: 'p-toolbar-group-center',
+            end: 'p-toolbar-group-end p-toolbar-group-right'
+        },
+        styles: `
+        .p-toolbar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
+        }
+        
+        .p-toolbar-group-start,
+        .p-toolbar-group-center,
+        .p-toolbar-group-end {
+            display: flex;
+            align-items: center;
+        }
+        
+        .p-toolbar-group-left,
+        .p-toolbar-group-right {
+            display: flex;
+            align-items: center;
+        }
+        `
     }
 });
diff --git a/components/lib/toolbar/toolbar.d.ts b/components/lib/toolbar/toolbar.d.ts
@@ -79,6 +79,11 @@ export interface ToolbarProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
      * @type {ToolbarPassThroughOptions}
      */
     pt?: ToolbarPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/styles/primereact.css b/styles/primereact.css
@@ -54,7 +54,6 @@
 @import "../components/lib/tabview/TabView.css";
 /*@import '../components/lib/terminal/Terminal.css';*/
 @import "../components/lib/tieredmenu/TieredMenu.css";
-@import "../components/lib/toolbar/Toolbar.css";
 @import "../components/lib/tooltip/Tooltip.css";
 @import "../components/lib/tree/Tree.css";
 @import "../components/lib/treetable/TreeTable.css";