Toggletip: Remove form story and update padding (#75007)

remove form story and update padding

packages/grafana-ui/src/components/Toggletip/Toggletip.story.tsx

@@ -1,16 +1,9 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { SelectableValue } from '@grafana/data';
-
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Button } from '../Button';
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
-import { ButtonSelect } from '../Dropdown/ButtonSelect';
-import { InlineField } from '../Forms/InlineField';
-import { Icon } from '../Icon/Icon';
-import { Input } from '../Input/Input';
-import { Select } from '../Select/Select';
 import mdx from '../Toggletip/Toggletip.mdx';
 
 import { Toggletip } from './Toggletip';
@@ -93,89 +86,6 @@ Basic.args = {
   theme: 'info',
 };
 
-export const HostingMultiElements: StoryFn<typeof Toggletip> = ({ theme, closeButton, placement }) => {
-  const selectOptions: Array<SelectableValue<number>> = [
-    { label: 'Sharilyn Markowitz', value: 1 },
-    { label: 'Naomi Striplin', value: 2 },
-    { label: 'Beau Bevel', value: 3 },
-    { label: 'Garrett Starkes', value: 4 },
-  ];
-  const dropdownOptions: Array<SelectableValue<string>> = [
-    { label: 'Option A', value: 'a' },
-    { label: 'Option B', value: 'b' },
-    { label: 'Option C', value: 'c' },
-  ];
-  const header = (
-    <div>
-      <Icon name="apps" />
-      &nbsp;<strong>Header title with icon</strong>
-    </div>
-  );
-  const body = (
-    <div>
-      <InlineField label="Users" labelWidth={15}>
-        <Select width={20} options={selectOptions} value={2} onChange={() => {}} />
-      </InlineField>
-      <InlineField label="Job Title" labelWidth={15}>
-        <Input value={'Professor'} width={20} />
-      </InlineField>
-      <InlineField label="My Button Select" labelWidth={15}>
-        <ButtonSelect
-          options={dropdownOptions}
-          value={dropdownOptions[2]}
-          variant={'primary'}
-          onChange={() => {}}
-          style={{ width: '160px' }}
-        ></ButtonSelect>
-      </InlineField>
-      <div>
-        <br />
-        <span>Wants to know more?</span>&nbsp;
-        <a href="https://grafana.com/" target="_blank" rel="noreferrer">
-          <Icon name="link" />
-          &nbsp;Click here!
-        </a>
-      </div>
-    </div>
-  );
-  const footer = (
-    <div>
-      <Button type="button" variant="success" onClick={() => alert('Click on Save!')}>
-        Save on footer
-      </Button>
-      &nbsp;
-      <Button type="button" variant="destructive" onClick={() => alert('Click on Delete!')}>
-        Delete
-      </Button>
-    </div>
-  );
-
-  return (
-    <Toggletip
-      title={header}
-      content={body}
-      footer={footer}
-      theme={theme}
-      closeButton={closeButton}
-      placement={placement}
-    >
-      <Button type="button">Click to show Toggletip hosting multiple components!</Button>
-    </Toggletip>
-  );
-};
-
-HostingMultiElements.parameters = {
-  controls: {
-    hideNoControlsWarning: true,
-    exclude: ['title', 'content', 'footer', 'onClose', 'children'],
-  },
-};
-HostingMultiElements.args = {
-  placement: 'top',
-  closeButton: true,
-  theme: 'info',
-};
-
 export const LongContent: StoryFn<typeof Toggletip> = ({
   title,
   content,

packages/grafana-ui/src/components/Toggletip/Toggletip.tsx

@@ -141,14 +141,14 @@ export const getStyles = (theme: GrafanaTheme2) => {
     theme.components.tooltip.background,
     theme.components.tooltip.background,
     theme.components.tooltip.text,
-    { topBottom: 3, rightLeft: 3 }
+    { topBottom: 2, rightLeft: 2 }
   );
   const error = buildTooltipTheme(
     theme,
     theme.colors.error.main,
     theme.colors.error.main,
     theme.colors.error.contrastText,
-    { topBottom: 3, rightLeft: 3 }
+    { topBottom: 2, rightLeft: 2 }
   );
 
   return {