Skip to content

Commit

Permalink
[EUI+] Split up several component pages into subpages (#8181)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen authored Nov 25, 2024
1 parent 2969bd7 commit 9eb944a
Show file tree
Hide file tree
Showing 37 changed files with 2,283 additions and 1,926 deletions.
7 changes: 1 addition & 6 deletions packages/eui/src/components/flex/flex_group.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,9 @@ export type EuiFlexGroupProps<TComponent extends ElementType = 'div'> =
* such as `'div'` or `'span'`, a React component (a function, a class,
* or an exotic component like `memo()`).
*
* `<EuiFlexGroup>` accepts and forwards all extra props to the custom
* `EuiFlexGroup` accepts and forwards all extra props to the custom
* component.
*
* @example
* // Renders a <button> element
* <EuiFlexGroup component="button">
* Submit form
* </EuiFlexGroup>
* @default "div"
*/
component?: TComponent;
Expand Down
3 changes: 3 additions & 0 deletions packages/website/docs/components/display/badge/_category_.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
link:
type: doc
id: display_badge
108 changes: 3 additions & 105 deletions ...website/docs/components/display/badge.mdx → ...e/docs/components/display/badge/badge.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ id: display_badge
**EuiBadges** are used to focus on important bits of information. Although they will automatically space themselves if you use them in a repetitive fashion it is good form to wrap them using a **EuiBadgeGroup** so that they will wrap when width is constrained (as seen below).

```tsx interactive
import React, { Fragment, useState } from 'react';
import React, { useState } from 'react';
import {
EuiBadge,
EuiFlexItem,
Expand Down Expand Up @@ -45,7 +45,7 @@ export default () => {
const [isDisabled, setDisabled] = useState(false);

return (
<Fragment>
<>
<EuiTitle size="xs">
<h2>Accepted color names</h2>
</EuiTitle>
Expand Down Expand Up @@ -97,7 +97,7 @@ export default () => {
</EuiBadge>
</EuiFlexItem>
</EuiFlexGroup>
</Fragment>
</>
);
};
```
Expand Down Expand Up @@ -310,111 +310,9 @@ export default () => (
);
```

## Beta badge type

The **EuiBetaBadge** was created specifically to call out modules that are not in GA. Generally the labels used are "Beta" or "Lab". They require an extra `tooltipContent` to describe the purpose of the badge. You can pass an optional `title` prop to populate the tooltip title or html title attribute but by default it will use the `label`.

If you pass in an `iconType`, only the icon will be used in the badge itself and the label will be applied as the title. Only use an icon when attaching the beta badge to small components. Beta badges can also be made clickable by passing `href` or `onClick` as needed.

They can also be used in conjunction with [**EuiCards**](/docs/display/card) and [**EuiKeyPadMenuItems**](/docs/navigation/key-pad-menu).

```tsx interactive
import React from 'react';
import { EuiBetaBadge, EuiSpacer, EuiTitle } from '@elastic/eui';
import { css } from '@emotion/react';

const colors = ['hollow', 'accent', 'subdued', 'warning'] as const;

export default () => (
<>
<div
css={css`
display: grid;
align-items: flex-start;
grid: repeat(3, max-content) / repeat(6, max-content);
gap: 0.75rem;
`}
>
{colors.map((item) => (
<>
<EuiBetaBadge
label="Beta"
color={item}
tooltipContent="This module is not GA. Please help us by reporting any bugs."
/>
<EuiBetaBadge
label="Beta"
color={item}
size="s"
tooltipContent="This module is not GA. Please help us by reporting any bugs."
/>
<EuiBetaBadge label="Beta" color={item} iconType="beta" />
<EuiBetaBadge size="s" label="Beta" color={item} iconType="beta" />
<EuiBetaBadge label="Lab" color={item} iconType="beaker" />
<EuiBetaBadge label="Lab" size="s" color={item} iconType="beaker" />
</>
))}
</div>
<EuiSpacer size="s" />
<EuiTitle size="s">
<h3>
Beta badges will also line up nicely with titles &nbsp;
<EuiBetaBadge
label="Lab"
tooltipContent="This module is not GA. Please help us by reporting any bugs."
/>
</h3>
</EuiTitle>
<EuiSpacer />
<EuiTitle size="xs">
<h3>Clickable beta badges</h3>
</EuiTitle>
<EuiSpacer size="s" />
<div
css={css`
display: flex;
align-items: center;
gap: 0.75rem;
`}
>
<EuiBetaBadge
label="Lens"
iconType="lensApp"
onClick={() => alert('Goes to Lens')}
/>
<EuiBetaBadge
label="Basic"
href="http://www.elastic.co/subscriptions"
target="_blank"
/>
</div>
</>
);

```

## Notification badge type

Used to showcase the number of notifications, alerts, or hidden selections. This badge type is commonly used in the [**EuiHeader**](/docs/layout/header) and [**EuiFilterButton**](/docs/forms/filter-group) components.

```tsx interactive
import React from 'react';
import { EuiFlexGroup, EuiNotificationBadge } from '@elastic/eui';

export default () => (
<EuiFlexGroup responsive={false} gutterSize="s">
<EuiNotificationBadge>1</EuiNotificationBadge>
<EuiNotificationBadge color="success">2</EuiNotificationBadge>
<EuiNotificationBadge color="subdued">3</EuiNotificationBadge>
</EuiFlexGroup>
);
```

## Props

import docgen from '@elastic/eui-docgen/dist/components/badge';

<PropTable definition={docgen.EuiBadge} />
<PropTable definition={docgen.EuiBadgeGroup} />
<PropTable definition={docgen.EuiNotificationBadge} />
<PropTable definition={docgen.EuiBetaBadge} />
93 changes: 93 additions & 0 deletions packages/website/docs/components/display/badge/beta_badge.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
---
slug: /display/badge/beta
id: display_badge_beta
---

# Beta badge

The **EuiBetaBadge** was created specifically to call out modules that are not in GA. Generally the labels used are "Beta" or "Lab". They require an extra `tooltipContent` to describe the purpose of the badge. You can pass an optional `title` prop to populate the tooltip title or html title attribute but by default it will use the `label`.

If you pass in an `iconType`, only the icon will be used in the badge itself and the label will be applied as the title. Only use an icon when attaching the beta badge to small components. Beta badges can also be made clickable by passing `href` or `onClick` as needed.

They can also be used in conjunction with [**EuiCards**](/docs/display/card) and [**EuiKeyPadMenuItems**](/docs/navigation/key-pad-menu).

```tsx interactive
import React from 'react';
import { EuiBetaBadge, EuiSpacer, EuiTitle } from '@elastic/eui';
import { css } from '@emotion/react';

const colors = ['hollow', 'accent', 'subdued', 'warning'] as const;

export default () => (
<>
<div
css={css`
display: grid;
align-items: flex-start;
grid: repeat(3, max-content) / repeat(6, max-content);
gap: 0.75rem;
`}
>
{colors.map((item) => (
<>
<EuiBetaBadge
label="Beta"
color={item}
tooltipContent="This module is not GA. Please help us by reporting any bugs."
/>
<EuiBetaBadge
label="Beta"
color={item}
size="s"
tooltipContent="This module is not GA. Please help us by reporting any bugs."
/>
<EuiBetaBadge label="Beta" color={item} iconType="beta" />
<EuiBetaBadge size="s" label="Beta" color={item} iconType="beta" />
<EuiBetaBadge label="Lab" color={item} iconType="beaker" />
<EuiBetaBadge label="Lab" size="s" color={item} iconType="beaker" />
</>
))}
</div>
<EuiSpacer size="s" />
<EuiTitle size="s">
<h3>
Beta badges will also line up nicely with titles &nbsp;
<EuiBetaBadge
label="Lab"
tooltipContent="This module is not GA. Please help us by reporting any bugs."
/>
</h3>
</EuiTitle>
<EuiSpacer />
<EuiTitle size="xs">
<h3>Clickable beta badges</h3>
</EuiTitle>
<EuiSpacer size="s" />
<div
css={css`
display: flex;
align-items: center;
gap: 0.75rem;
`}
>
<EuiBetaBadge
label="Lens"
iconType="lensApp"
onClick={() => alert('Goes to Lens')}
/>
<EuiBetaBadge
label="Basic"
href="http://www.elastic.co/subscriptions"
target="_blank"
/>
</div>
</>
);

```

## Props

import docgen from '@elastic/eui-docgen/dist/components/badge';

<PropTable definition={docgen.EuiBetaBadge} />
27 changes: 27 additions & 0 deletions packages/website/docs/components/display/badge/notification_badge.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
slug: /display/badge/notification
id: display_badge_notification
---

# Notification badge

**EuiNotificationBadge** should be used to showcase the number of notifications, alerts, or hidden selections. This badge type is commonly used in the [**EuiHeader**](/docs/layout/header) and [**EuiFilterButton**](/docs/forms/filter-group) components.

```tsx interactive
import React from 'react';
import { EuiFlexGroup, EuiNotificationBadge } from '@elastic/eui';

export default () => (
<EuiFlexGroup responsive={false} gutterSize="s">
<EuiNotificationBadge>1</EuiNotificationBadge>
<EuiNotificationBadge color="success">2</EuiNotificationBadge>
<EuiNotificationBadge color="subdued">3</EuiNotificationBadge>
</EuiFlexGroup>
);
```

## Props

import docgen from '@elastic/eui-docgen/dist/components/badge';

<PropTable definition={docgen.EuiNotificationBadge} />
99 changes: 48 additions & 51 deletions packages/website/docs/components/display/card.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ For accessibility and heading hierarchy, a card's title element is a `span` by d
import React from 'react';
import { EuiCard, EuiIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';

const icons = ['Beats', 'Cloud', 'Logging', 'Kibana'];
const icons = ['Beats', 'Cloud', 'Kibana'];

const cardNodes = icons.map(function (item, index) {
return (
Expand Down Expand Up @@ -626,62 +626,59 @@ For non-interactive cards, reduce or eliminate the padding as needed to suit you
import React from 'react';
import {
EuiCard,
EuiFlexGroup,
EuiFlexGrid,
EuiFlexItem,
EuiIcon,
EuiSpacer,
} from '@elastic/eui';

export default () => (
<div>
<EuiSpacer size="s" />
<EuiFlexGroup gutterSize="l" wrap>
<EuiFlexItem>
<EuiCard
layout="horizontal"
icon={<EuiIcon size="xl" type="logoLogging" />}
onClick={() => {}}
title="Plain"
display="plain"
description="This one still has a solid background color."
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
icon={<EuiIcon size="xl" type="logoLogging" />}
title="Subdued"
display="subdued"
description="This one has a subdued background color."
onClick={() => {}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
layout="horizontal"
icon={<EuiIcon size="xl" type="logoLogging" />}
title="Transparent"
display="transparent"
description="This one doesn't have a background color anymore."
betaBadgeProps={{
label: 'Beta',
tooltipContent:
'This module is not GA. Please help us by reporting any bugs.',
}}
onClick={() => {}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
icon={<EuiIcon size="xl" type="logoLogging" />}
title="Bordered"
display="plain"
hasBorder
description="This one has a plain background color and border."
onClick={() => {}}
/>
</EuiFlexItem>
</EuiFlexGroup>
</div>
<EuiFlexGrid columns={2}>
<EuiFlexItem>
<EuiCard
layout="horizontal"
icon={<EuiIcon size="xl" type="logoLogging" />}
onClick={() => {}}
title="Plain"
display="plain"
description="This one still has a solid background color."
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
icon={<EuiIcon size="xl" type="logoLogging" />}
title="Subdued"
display="subdued"
description="This one has a subdued background color."
onClick={() => {}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
layout="horizontal"
icon={<EuiIcon size="xl" type="logoLogging" />}
title="Transparent"
display="transparent"
description="This one doesn't have a background color anymore."
betaBadgeProps={{
label: 'Beta',
tooltipContent:
'This module is not GA. Please help us by reporting any bugs.',
}}
onClick={() => {}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
icon={<EuiIcon size="xl" type="logoLogging" />}
title="Bordered"
display="plain"
hasBorder
description="This one has a plain background color and border."
onClick={() => {}}
/>
</EuiFlexItem>
</EuiFlexGrid>
);
```

Expand Down
Loading

0 comments on commit 9eb944a

Please sign in to comment.