fix: add wrapper to toggle_button (#821)

- Add #812 
  - Change `toggle_button` to use a wrapper, like the other buttons
  - Update `UI-all-components-render-2` E2E test to reflect text being
wrapped

plugins/ui/src/js/src/elements/ToggleButton.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  ToggleButton as DHCToggleButton,
+  ToggleButtonProps as DHCToggleButtonProps,
+} from '@deephaven/components';
+import { useButtonProps } from './hooks/useButtonProps';
+import { SerializedButtonEventProps } from './model/SerializedPropTypes';
+
+export function ToggleButton(
+  props: SerializedButtonEventProps<DHCToggleButtonProps>
+): JSX.Element {
+  const buttonProps = useButtonProps(props);
+
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <DHCToggleButton {...buttonProps} />;
+}
+
+export default ToggleButton;

plugins/ui/src/js/src/elements/index.ts

@@ -23,5 +23,6 @@ export * from './Tabs';
 export * from './TabPanels';
 export * from './TextField';
 export * from './TextArea';
+export * from './ToggleButton';
 export * from './UITable/UITable';
 export * from './utils';

plugins/ui/src/js/src/widget/WidgetUtils.tsx

@@ -21,7 +21,6 @@ import {
   Switch,
   TabList,
   Text,
-  ToggleButton,
   View,
 } from '@deephaven/components';
 import { ValueOf } from '@deephaven/utils';
@@ -67,6 +66,7 @@ import {
   TabPanels,
   TextField,
   TextArea,
+  ToggleButton,
   UITable,
   Tabs,
 } from '../elements';