Skip to content

Commit de3cfc2

Browse files
cee-chencee-chen
committed
Add support for beta/new badges to subitems in nav and subheadings
1 parent a09a0d7 commit de3cfc2

5 files changed

Lines changed: 54 additions & 24 deletions

File tree

‎src-docs/src/components/guide_page/_guide_page.scss‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,9 @@
4242
}
4343

4444
.guideSideNav__itemBadge {
45-
margin-inline: $euiSizeXS;
46-
}
47-
48-
// Shift the margin on the badge when selected and the dropdown arrow no longer shows
49-
.euiSideNavItemButton-isSelected .guideSideNav__itemBadge {
50-
margin-right: 0;
45+
margin-inline-start: $euiSizeXS;
46+
// Decrease distance from right side to allow for longer titles and sub-items
47+
margin-inline-end: -$euiSizeS;
5148
}
5249
}
5350

‎src-docs/src/components/guide_page/guide_page_chrome.js‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,24 @@ export class GuidePageChrome extends Component {
4141
});
4242
};
4343

44+
renderSideNavBadge = ({ isBeta, isNew }) => {
45+
if (isBeta) {
46+
return (
47+
<EuiBadge color="warning" className="guideSideNav__itemBadge">
48+
BETA
49+
</EuiBadge>
50+
);
51+
}
52+
if (isNew) {
53+
return (
54+
<EuiBadge color="accent" className="guideSideNav__itemBadge">
55+
NEW
56+
</EuiBadge>
57+
);
58+
}
59+
return undefined;
60+
};
61+
4462
scrollNavSectionIntoView = () => {
4563
// wait a bit for react to blow away and re-create the DOM
4664
// then scroll the selected nav section into view
@@ -80,7 +98,7 @@ export class GuidePageChrome extends Component {
8098
return;
8199
}
82100

83-
return subSectionsWithTitles.map(({ title, sections }) => {
101+
return subSectionsWithTitles.map(({ title, isBeta, isNew, sections }) => {
84102
const id = slugify(title);
85103

86104
const subSectionHref = `${href}/${id}`;
@@ -115,6 +133,7 @@ export class GuidePageChrome extends Component {
115133
: '',
116134
items: subItems,
117135
forceOpen: !!searchTerm || isCurrentlyOpenSubSection,
136+
icon: this.renderSideNavBadge({ isBeta, isNew }),
118137
};
119138
});
120139
};
@@ -146,16 +165,6 @@ export class GuidePageChrome extends Component {
146165

147166
const href = `#/${path}`;
148167

149-
const badge = isBeta ? (
150-
<EuiBadge color="warning" className="guideSideNav__itemBadge">
151-
BETA
152-
</EuiBadge>
153-
) : isNew ? (
154-
<EuiBadge color="accent" className="guideSideNav__itemBadge">
155-
NEW
156-
</EuiBadge>
157-
) : undefined;
158-
159168
let visibleName = name;
160169
if (searchTerm) {
161170
visibleName = (
@@ -176,7 +185,7 @@ export class GuidePageChrome extends Component {
176185
isSelected: item.path === this.props.currentRoute.path,
177186
forceOpen: !!(searchTerm && hasMatchingSubItem),
178187
className: 'guideSideNav__item',
179-
icon: badge,
188+
icon: this.renderSideNavBadge({ isBeta, isNew }),
180189
};
181190
});
182191

‎src-docs/src/components/guide_section/guide_section.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ export interface GuideSectionProps
3535
> {
3636
id?: string;
3737
title?: string;
38+
isBeta?: boolean;
39+
isNew?: boolean;
3840
text?: ReactNode;
3941
source?: any[];
4042
demo?: ReactNode;
@@ -83,6 +85,8 @@ export const GuideSectionCodeTypesMap = {
8385
export const GuideSection: FunctionComponent<GuideSectionProps> = ({
8486
id,
8587
title,
88+
isBeta,
89+
isNew,
8690
text,
8791
demo,
8892
fullScreen,
@@ -210,7 +214,13 @@ export const GuideSection: FunctionComponent<GuideSectionProps> = ({
210214
className={classNames('guideSection', className)}
211215
>
212216
<EuiSpacer size={(color || title) && isLargeBreakpoint ? 'xxl' : 'xs'} />
213-
<GuideSectionExampleText title={title} id={id} wrapText={wrapText}>
217+
<GuideSectionExampleText
218+
title={title}
219+
id={id}
220+
isBeta={isBeta}
221+
isNew={isNew}
222+
wrapText={wrapText}
223+
>
214224
{text}
215225
</GuideSectionExampleText>
216226

‎src-docs/src/components/guide_section/guide_section_parts/guide_section_text.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,40 @@
11
import React, { FunctionComponent, ReactNode } from 'react';
2-
import { EuiSpacer } from '../../../../../src/components/spacer';
3-
import { EuiTitle } from '../../../../../src/components/title';
4-
import { EuiText } from '../../../../../src/components/text';
2+
3+
import {
4+
EuiSpacer,
5+
EuiTitle,
6+
EuiText,
7+
EuiBetaBadge,
8+
} from '../../../../../src/components';
59

610
export const LANGUAGES = ['javascript', 'html'] as const;
711

812
type GuideSectionExampleText = {
913
title?: ReactNode;
1014
id?: string;
15+
isBeta?: boolean;
16+
isNew?: boolean;
1117
children?: ReactNode;
1218
wrapText?: boolean;
1319
};
1420

1521
export const GuideSectionExampleText: FunctionComponent<
1622
GuideSectionExampleText
17-
> = ({ title, id, children, wrapText = true }) => {
23+
> = ({ title, id, isBeta, isNew, children, wrapText = true }) => {
1824
let titleNode;
1925

2026
if (title) {
27+
const badge = (isBeta || isNew) && (
28+
<EuiBetaBadge label={isBeta ? 'Beta' : 'New'} color="accent" size="s" />
29+
);
30+
2131
titleNode = (
2232
<>
2333
<EuiTitle>
24-
<h2 id={id}>{title}</h2>
34+
<h2 id={id}>
35+
{title}
36+
{badge && <>&emsp;{badge}</>}
37+
</h2>
2538
</EuiTitle>
2639
<EuiSpacer size="m" />
2740
</>

‎src-docs/src/views/provider/provider_example.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@ export const ProviderExample = {
139139
},
140140
{
141141
title: 'Component defaults',
142+
isBeta: true,
142143
text: (
143144
<EuiText>
144145
<EuiCallOut title="Beta status" iconType="beta">

0 commit comments

Comments
 (0)