release(toolbar): v0.5.3

index.json

@@ -352,7 +352,7 @@
   },
   "toolbar": {
     "react": true,
-    "version": "0.5.2",
+    "version": "0.5.3",
     "style": true,
     "icon": false,
     "test": true,

src/toolbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toolbar",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Application toolbar",
   "luna": {
     "react": true

src/toolbar/react.tsx

@@ -85,21 +85,23 @@ export const LunaToolbarText: FC<IToolbarTextProps> = (props) => {
 }
 
 interface IToolbarButtonProps extends IToolbarItemProps {
-  content: string | HTMLElement
   onClick: () => void
   state?: IButtonState
 }
 
 export const LunaToolbarButton: FC<IToolbarButtonProps> = (props) => {
   const toolbarButton = useRef<ToolbarButton>()
+  const forceUpdate = useForceUpdate()
 
   useEffect(() => {
     if (props.toolbar) {
       toolbarButton.current = props.toolbar.appendButton(
-        props.content,
+        '',
         props.onClick,
         props.state
       )
+      forceUpdate()
+      setDisabled(toolbarButton.current, props.disabled)
     }
 
     return () => toolbarButton.current?.detach()
@@ -111,7 +113,12 @@ export const LunaToolbarButton: FC<IToolbarButtonProps> = (props) => {
     }
   }, [props.state])
 
-  return null
+  return toolbarButton.current
+    ? createPortal(
+        <>{props.children}</>,
+        toolbarButton.current.container.querySelector('button')!
+      )
+    : null
 }
 
 interface IToolbarSelectProps extends IToolbarItemProps {

src/toolbar/story.js

@@ -91,10 +91,11 @@ const def = story(
             disabled={true}
           />
           <LunaToolbarButton
-            content="Trigger"
             onClick={() => console.log('trigger')}
             state="hover"
-          />
+          >
+            Trigger
+          </LunaToolbarButton>
           <LunaToolbarSpace />
           <LunaToolbarHtml>
             <span