ui(components): migrates to new toolbar ui components and Numeric for Input InputRange and InputDoubleRange (#4728)

Co-authored-by: sedghi <ar.sedghi@gmail.com>

platform/ui/src/components/SplitButton/SplitButton.tsx

@@ -31,7 +31,7 @@ const classes = {
       isActive
         ? isExpanded
           ? 'border-primary-dark !bg-primary-dark hover:border-primary-dark !text-primary-light'
-          : 'border-primary-light bg-primary-light rounded-md'
+          : 'border-primary-light bg-primary-light !text-black rounded-md'
         : `focus:!text-black focus:!rounded-md focus:!border-primary-light focus:!bg-primary-light ${isExpanded ? 'border-primary-dark bg-primary-dark !text-primary-light' : 'border-secondary-dark bg-secondary-dark group-hover/button:border-primary-dark group-hover/button:text-primary-light hover:!bg-primary-dark hover:border-primary-dark focus:!text-black'}`
     ),
   Secondary: ({ isExpanded, primary }) =>

platform/ui/src/components/ToolbarButton/ToolbarButton.tsx

@@ -76,6 +76,7 @@ ToolbarButton.propTypes = {
   commands: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
   onInteraction: PropTypes.func,
   icon: PropTypes.string.isRequired,
+  disabledText: PropTypes.string,
   label: PropTypes.string.isRequired,
   /** Tooltip content can be replaced for a customized content by passing a node to this value. */
   dropdownContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),

platform/ui/src/components/Toolbox/Toolbox.tsx

@@ -31,7 +31,7 @@ function Toolbox({
 
   useEffect(() => {
     const currentButtonIdsStr = JSON.stringify(
-      toolbarButtons.map(button => {
+      toolbarButtons?.map(button => {
         const { id, componentProps } = button;
         if (componentProps.items?.length) {
           return componentProps.items.map(item => `${item.id}-${item.disabled}`);

platform/ui/src/components/Toolbox/ToolboxUI.tsx

@@ -55,7 +55,7 @@ function ToolboxUI(props: withAppTypes) {
       <>
         <div className="flex flex-col bg-black">
           <div className="bg-primary-dark mt-0.5 flex flex-wrap py-2">
-            {toolbarButtons.map((toolDef, index) => {
+            {toolbarButtons?.map((toolDef, index) => {
               if (!toolDef) {
                 return null;
               }