Skip to content

Commit

Permalink
Merge branch 'main' into rm-eui-chart-theme
Browse files Browse the repository at this point in the history
  • Loading branch information
nickofthyme authored Mar 14, 2024
2 parents 0879994 + f10c46d commit c140830
Show file tree
Hide file tree
Showing 21 changed files with 550 additions and 80 deletions.
7 changes: 7 additions & 0 deletions .storybook/manager-head.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,11 @@
.docblock-argstable code {
white-space: pre-wrap !important;
}

/* make the props table category title better readable; align with props table header */
.docblock-argstable-body tr[title] button + span {
font-size: 13px;
text-transform: initial;
letter-spacing: normal;
}
</style>
39 changes: 38 additions & 1 deletion .storybook/utils.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@
* Side Public License, v 1.
*/

import { hideStorybookControls, disableStorybookControls } from './utils';
import {
hideStorybookControls,
disableStorybookControls,
moveStorybookControlsToCategory,
} from './utils';

describe('hideStorybookControls', () => {
it('outputs the expected `argTypes` object when passed prop name strings', () => {
Expand Down Expand Up @@ -47,3 +51,36 @@ describe('disableStorybookControls', () => {
disableStorybookControls<TestComponentProps>(['hello', 'world', 'error']);
});
});

describe('moveStorybookControlsToCategory', () => {
it('outputs expected `argTypes` object when passed prop name strings and a custom category', () => {
expect(
moveStorybookControlsToCategory(
['isDisabled', 'isLoading', 'isInvalid'],
'New category'
)
).toEqual({
isDisabled: { table: { category: 'New category' } },
isLoading: { table: { category: 'New category' } },
isInvalid: { table: { category: 'New category' } },
});
});

it('sets a default category if none is passed', () => {
expect(
moveStorybookControlsToCategory(['isDisabled', 'isLoading', 'isInvalid'])
).toEqual({
isDisabled: { table: { category: 'Additional' } },
isLoading: { table: { category: 'Additional' } },
isInvalid: { table: { category: 'Additional' } },
});
});

it('throws a typescript error if a generic is passed and the prop names do not match', () => {
type TestProps = { hello: boolean; world: boolean };
// No typescript error
moveStorybookControlsToCategory<TestProps>(['hello', 'world']);
// @ts-expect-error - will fail `yarn lint` if a TS error is *not* produced
moveStorybookControlsToCategory<TestProps>(['hello', 'world', 'error']);
});
});
17 changes: 17 additions & 0 deletions .storybook/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,23 @@ export const disableStorybookControls = <Props>(
};
const DISABLE_CONTROL = { control: false };

/**
* Configure provided args to be listed under a specified
* category in the props table.
*
* Should be passed or spread to `argTypes`
*/
export const moveStorybookControlsToCategory = <Props>(
propNames: Array<keyof Props>,
category = 'Additional'
): Record<keyof Props, ControlCategory> | {} => {
return propNames.reduce(
(obj, name) => ({ ...obj, [name]: { table: { category } } }),
{}
);
};
type ControlCategory = { table: { category: string } };

/**
* parameters configurations
*/
Expand Down
1 change: 1 addition & 0 deletions changelogs/upcoming/7461.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Added the following properties to `EuiButtonGroup`'s `options` configs: `toolTipContent`, `toolTipProps`, and `title`. These new properties allow wrapping buttons in `EuiToolTips`, and additionally customizing or disabling the native browser `title` tooltip.
3 changes: 3 additions & 0 deletions changelogs/upcoming/7462.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**Bug fixes**

- Fixed `EuiFlyout` to not repeatedly remove/add a body class on resize
59 changes: 56 additions & 3 deletions src-docs/src/views/button/button_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,28 @@ const buttonGroupCompressedSnippet = [
/>`,
];

import ButtonGroupToolTips from './button_group_tooltips';
const buttonGroupToolTipsSource = require('!!raw-loader!./button_group_tooltips');
const buttonGroupToolTipsSnippet = [
`<EuiButtonGroup
legend={legend}
options={[
{
id,
label,
toolTipContent,
toolTipProps: {
title,
delay,
position,
},
},
]}
idSelected={idSelected}
onChange={(optionId) => {}}
/>`,
];

export const ButtonExample = {
title: 'Button',
intro: (
Expand Down Expand Up @@ -653,7 +675,7 @@ export const ButtonExample = {
],
text: (
<>
<h3>Icon only button groups</h3>
<h3 id="buttonGroup-isIconOnly">Icon only button groups</h3>
<p>
If you&apos;re just displaying a group of icons, add the prop{' '}
<EuiCode>isIconOnly</EuiCode>.
Expand All @@ -672,10 +694,9 @@ export const ButtonExample = {
code: buttonGroupCompressedSource,
},
],

text: (
<>
<h3>Button groups in forms</h3>
<h3 id="buttonGroup-compressed">Button groups in forms</h3>
<p>
When using button groups within compressed forms, match the form
elements by adding <EuiCode>{'buttonSize="compressed"'}</EuiCode>.
Expand All @@ -697,6 +718,38 @@ export const ButtonExample = {
props: { EuiButtonGroup, EuiButtonGroupOptionProps },
demoPanelProps: { color: 'subdued' },
},
{
source: [
{
type: GuideSectionTypes.JS,
code: buttonGroupToolTipsSource,
},
],
text: (
<>
<h3 id="buttonGroup-toolTipContent">Button group tooltips</h3>
<p>
Buttons within a button group will automatically display a default
browser tooltip containing the button <EuiCode>label</EuiCode> text.
This can be customized or unset via the <EuiCode>title</EuiCode>{' '}
property in your <EuiCode>options</EuiCode> button configuration.
</p>
<p>
To instead display an <EuiCode>EuiToolTip</EuiCode> around your
button(s), pass the <EuiCode>toolTipContent</EuiCode> property. You
can also use <EuiCode>toolTipProps</EuiCode> to customize tooltip
placement, title, and any other prop that{' '}
<Link to="/#/display/tooltip">
<strong>EuiToolTip</strong>
</Link>{' '}
accepts.
</p>
</>
),
demo: <ButtonGroupToolTips />,
snippet: buttonGroupToolTipsSnippet,
props: { EuiButtonGroupOptionProps },
},
],
guidelines: <Guidelines />,
};
41 changes: 41 additions & 0 deletions src-docs/src/views/button/button_group_tooltips.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, { useState } from 'react';

import { EuiButtonGroup } from '../../../../src/components';

export default () => {
const toggleButtons = [
{
id: 'buttonGroup__0',
label: 'Default title',
},
{
id: 'buttonGroup__1',
label: 'Custom tooltip content',
toolTipContent: 'This is a custom tooltip',
},
{
id: 'buttonGroup__2',
label: 'Custom tooltip props',
toolTipContent: 'This is another custom tooltip',
toolTipProps: {
title: 'My custom title',
position: 'right',
},
},
];

const [toggleIdSelected, setToggleIdSelected] = useState('buttonGroup__1');

const onChange = (optionId) => {
setToggleIdSelected(optionId);
};

return (
<EuiButtonGroup
legend="This is a group with tooltips"
options={toggleButtons}
idSelected={toggleIdSelected}
onChange={(id) => onChange(id)}
/>
);
};
9 changes: 8 additions & 1 deletion src/components/accessibility/skip_link/skip_link.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,20 @@
*/

import type { Meta, StoryObj } from '@storybook/react';
import { hideStorybookControls } from '../../../../.storybook/utils';

import {
hideStorybookControls,
moveStorybookControlsToCategory,
} from '../../../../.storybook/utils';
import { EuiSkipLink, EuiSkipLinkProps } from './skip_link';

const meta: Meta<EuiSkipLinkProps> = {
title: 'Utilities/EuiSkipLink',
component: EuiSkipLink,
argTypes: moveStorybookControlsToCategory(
['color', 'fill', 'size'],
'EuiButton props'
),
args: {
// Component defaults
position: 'static',
Expand Down
41 changes: 37 additions & 4 deletions src/components/button/button_group/button_group.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,6 @@ const meta: Meta<EuiButtonGroupProps> = {
options: {
control: 'array',
},
buttonSize: {
control: 'select',
},
},
args: {
// Component defaults
Expand Down Expand Up @@ -109,7 +106,6 @@ const EuiButtonGroupMulti = (props: any) => {
<EuiButtonGroup
type="multi"
{...props}
options={options}
onChange={onChange}
idToSelectedMap={idToSelectedMap}
/>
Expand All @@ -126,3 +122,40 @@ export const MultiSelection: Story = {
},
argTypes: disableStorybookControls(['type']),
};

export const WithTooltips: Story = {
render: ({ ...args }) => <EuiButtonGroupMulti {...args} />,
args: {
legend: 'EuiButtonGroup - tooltip UI testing',
isIconOnly: true, // Start example with icons to demonstrate usefulness of tooltips
options: [
{
id: 'button1',
iconType: 'securitySignal',
label: 'No tooltip',
},
{
id: 'button2',
iconType: 'securitySignalResolved',
label: 'Standard tooltip',
toolTipContent: 'Hello world',
},
{
id: 'customToolTipProps',
iconType: 'securitySignalDetected',
label: 'Custom tooltip',
toolTipContent: 'Custom tooltip position and delay',
toolTipProps: {
position: 'right',
delay: 'long',
title: 'Hello world',
},
// Consumers could also opt to hide titles if preferred
title: '',
},
],
type: 'multi',
idToSelectedMap: { button1: true },
},
argTypes: disableStorybookControls(['type']),
};
4 changes: 3 additions & 1 deletion src/components/button/button_group/button_group.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,10 @@ export const euiButtonGroupButtonsStyles = (euiThemeContext: UseEuiTheme) => {
fullWidth: css`
${logicalCSS('width', '100%')}
.euiButtonGroupButton {
.euiButtonGroupButton,
.euiButtonGroup__tooltipWrapper {
flex: 1;
${logicalCSS('width', '100%')}
}
`,
// Sizes
Expand Down
Loading

0 comments on commit c140830

Please sign in to comment.