diff --git a/src-docs/src/components/guide_page/guide_page.js b/src-docs/src/components/guide_page/guide_page.js deleted file mode 100644 index 24683c1d55d..00000000000 --- a/src-docs/src/components/guide_page/guide_page.js +++ /dev/null @@ -1,178 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import { Switch, Route, withRouter } from 'react-router-dom'; -import { - EuiBetaBadge, - EuiPageHeader, - EuiPageContent, - EuiPageContentBody, - EuiSpacer, -} from '../../../../src/components'; - -import { LanguageSelector } from '../with_theme'; - -const GuidePageComponent = ({ - children, - title, - intro, - isBeta, - playground, - guidelines, - location, - match, - history, - description, - rightSideItems: _rightSideItems, - tabs: _tabs, - notice, - showThemeLanguageToggle, -}) => { - const betaBadge = isBeta ? ( - - ) : undefined; - - const tabs = [ - { - id: 'examples', - name: 'Examples', - handleClick: () => { - history.push(`${match.path}`); - }, - }, - ]; - - if (guidelines) - tabs.push({ - id: 'guidelines', - name: 'Guidelines', - handleClick: () => { - history.push(`${match.path}/guidelines`); - }, - }); - if (playground) - tabs.push({ - id: 'playground', - name: 'Playground', - handleClick: () => { - history.push(`${match.path}/playground`); - }, - }); - - const isGuideLineView = location.pathname.includes('guidelines'); - const isPlaygroundView = location.pathname.includes('playground'); - - const renderTabs = () => { - if (tabs.length < 2) { - return undefined; - } - - return tabs.map(({ id, handleClick, name }, index) => { - let isSelected = false; - if (id === 'playground') isSelected = isPlaygroundView; - else if (id === 'guidelines') isSelected = isGuideLineView; - else isSelected = !isGuideLineView && !isPlaygroundView; - - return { - onClick: () => { - if (handleClick) handleClick(); - }, - isSelected, - key: index, - label: name, - }; - }); - }; - - const renderNotice = () => { - if (notice) { - return ( - <> - - - {notice} - - - - ); - } - }; - - const rightSideItems = _rightSideItems || []; - if (showThemeLanguageToggle) { - rightSideItems.push(); - } - - return ( - <> - {renderNotice()} - - - {title} {betaBadge} - - } - tabs={renderTabs() || _tabs} - description={description} - rightSideItems={rightSideItems} - bottomBorder - > - {intro} - - - - - - {playground && ( - - - - {playground} - - - )} - {guidelines && ( - - - - {guidelines} - - - )} - {children} - - - - ); -}; - -GuidePageComponent.propTypes = { - children: PropTypes.node, - title: PropTypes.string, - intro: PropTypes.node, - componentLinkTo: PropTypes.string, - isBeta: PropTypes.bool, - playground: PropTypes.node, - guidelines: PropTypes.node, - location: PropTypes.object, - match: PropTypes.object, - history: PropTypes.object, - description: PropTypes.node, - notice: PropTypes.node, - tabs: PropTypes.arrayOf(PropTypes.object), - rightSideItems: PropTypes.arrayOf(PropTypes.node), - showThemeLanguageToggle: PropTypes.bool, -}; - -export const GuidePage = withRouter(GuidePageComponent); diff --git a/src-docs/src/components/guide_page/index.js b/src-docs/src/components/guide_page/index.js index 9d0d6aed863..7d6341dc8cf 100644 --- a/src-docs/src/components/guide_page/index.js +++ b/src-docs/src/components/guide_page/index.js @@ -1,5 +1,3 @@ -export { GuidePage } from './guide_page'; - export { GuidePageChrome } from './guide_page_chrome'; export { GuidePageHeader } from './guide_page_header'; diff --git a/src-docs/src/components/guide_section/guide_section.tsx b/src-docs/src/components/guide_section/guide_section.tsx index 9419f300534..19d9a84371e 100644 --- a/src-docs/src/components/guide_section/guide_section.tsx +++ b/src-docs/src/components/guide_section/guide_section.tsx @@ -10,6 +10,8 @@ import { EuiPageContentBody, EuiPanel, EuiPanelProps, + CommonProps, + useIsWithinBreakpoints, } from '../../../../src'; import { slugify } from '../../../../src/services/string/slugify'; @@ -23,8 +25,9 @@ import { GuideSectionExampleTabs, GuideSectionExampleTabsProps, } from './guide_section_parts/guide_section_tabs'; +import classNames from 'classnames'; -export interface GuideSection { +export interface GuideSection extends CommonProps { id?: string; title?: string; text?: ReactNode; @@ -86,8 +89,10 @@ export const GuideSection: FunctionComponent = ({ snippet, color, children, + className, }) => { const { path } = useRouteMatch(); + const isLargeBreakpoint = useIsWithinBreakpoints(['m', 'l', 'xl']); const [renderingPlayground, setRenderingPlayground] = useState(false); const renderTabs = () => { @@ -184,13 +189,14 @@ export const GuideSection: FunctionComponent = ({ return ( - {color && (children || text || title) && } + {text} @@ -236,6 +242,7 @@ export const GuideSection: FunctionComponent = ({ )} {children} + ); diff --git a/src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx b/src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx index 077651df9fc..e1a5e1b46ea 100644 --- a/src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx +++ b/src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx @@ -5,36 +5,45 @@ import { EuiPageHeader, EuiPageContent, EuiPageContentBody, - EuiSpacer, EuiBetaBadge, + CommonProps, + EuiHorizontalRule, } from '../../../../src/components'; import { LanguageSelector, ThemeContext } from '../with_theme'; +import { GuideSection } from '../guide_section/guide_section'; -export type GuideTabbedPageProps = { - title: string; - location: any; - match: any; +export type GuideTabbedPageProps = CommonProps & { + description?: ReactNode; + guidelines?: ReactNode; history: any; - pages: any; + intro?: ReactNode; isBeta?: boolean; + location: any; + match: any; notice?: ReactNode; - showThemeLanguageToggle?: boolean; - description?: ReactNode; + pages?: any; rightSideItems?: ReactNode[]; + showThemeLanguageToggle?: boolean; + tabs?: any; + title: string; }; const GuideTabbedPageComponent: FunctionComponent = ({ - title, - location, - match, + description, + guidelines, history, - pages, + intro, isBeta, - showThemeLanguageToggle, + location, + match, notice, - description, + pages, rightSideItems: _rightSideItems, + showThemeLanguageToggle, + tabs: _tabs, + title, + children, }) => { const themeContext = useContext(ThemeContext); const currentLanguage = themeContext.themeLanguage; @@ -47,26 +56,101 @@ const GuideTabbedPageComponent: FunctionComponent = ({ /> ); - const tabs: any[] = pages.map((page: any) => { - const id = slugify(page.title); - return { - id: id, - name: page.title, - handleClick: () => { - history.push(`${match.path}/${id}`); + let tabs: + | Array<{ + id: string; + handleClick: () => void; + name: string; + }> + | undefined = undefined; + + if (pages) { + tabs = pages.map((page: any) => { + const id = slugify(page.title); + return { + id: id, + name: page.title, + handleClick: () => { + history.push(`${match.path}/${id}`); + }, + }; + }); + } else if (guidelines) { + tabs = [ + { + id: 'examples', + name: 'Examples', + handleClick: () => { + history.push(`${match.path}`); + }, }, - }; - }); + { + id: 'guidelines', + name: 'Guidelines', + handleClick: () => { + history.push(`${match.path}/guidelines`); + }, + }, + ]; + } + + let pagesRoutes: any[]; + + if (pages) { + pagesRoutes = pages.map((page: any) => { + const pathname = location.pathname; + const id = slugify(page.title); + const firstTabId = slugify(pages[0].title); + + // first nav level redirects to first tab + if (match.path === pathname) { + return ( + + ); + } else { + const PageComponent = page.page; + + return ( + + + + ); + } + }); + } else { + pagesRoutes = [ + guidelines && ( + + {guidelines} + + ), + + {children} + , + ]; + } const renderTabs = () => { - if (tabs.length < 2) { + if (_tabs) { + return _tabs; + } else if (!tabs) { return undefined; } return tabs.map(({ id, handleClick, name }, index) => { const pathname = location.pathname; - const isSelected = pathname.includes(`${match.path}/${id}`); + let isSelected = false; + if (id === 'guidelines') + isSelected = pathname.includes(`${match.path}/guidelines`); + else if (id === 'examples') + isSelected = + !pathname.includes(`${match.path}/`) || pathname.includes('examples'); + else isSelected = pathname.includes(`${match.path}/${id}`); return { onClick: () => { @@ -82,13 +166,11 @@ const GuideTabbedPageComponent: FunctionComponent = ({ const renderNotice = () => { if (!showSass && notice) { return ( - <> - - + +
{notice} - - - +
+ ); } }; @@ -98,35 +180,13 @@ const GuideTabbedPageComponent: FunctionComponent = ({ rightSideItems.push(); } - const pagesRoutes: any[] = pages.map((page: any) => { - const pathname = location.pathname; - const id = slugify(page.title); - const firstTabId = slugify(pages[0].title); - - // first nav level redirects to first tab - if (match.path === pathname) { - return ( - - ); - } else { - const PageComponent = page.page; - - return ( - - - - ); - } - }); - return ( <> {renderNotice()} - + = ({ tabs={renderTabs()} description={description} rightSideItems={rightSideItems} - bottomBorder - /> + > + {intro} + + + = ({ hasBorder={false} borderRadius="none" > - - {pagesRoutes} - + {pagesRoutes} ); diff --git a/src-docs/src/components/index.js b/src-docs/src/components/index.js index d5c7991c3da..53a980ef5aa 100644 --- a/src-docs/src/components/index.js +++ b/src-docs/src/components/index.js @@ -7,7 +7,7 @@ export { export { GuideMarkdownFormat } from './guide_markdown_format'; -export { GuidePage, GuidePageChrome, GuidePageHeader } from './guide_page'; +export { GuidePageChrome, GuidePageHeader } from './guide_page'; export { GuideSectionContainer as GuideSection } from './guide_section/guide_section_container'; diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 6815cf9a03c..d7b175688e3 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -4,7 +4,7 @@ import { slugify } from '../../src/services'; import { createHashHistory } from 'history'; -import { GuidePage, GuideSection, GuideMarkdownFormat } from './components'; +import { GuideSection, GuideMarkdownFormat } from './components'; import { GuideTabbedPage } from './components/guide_tabbed_page'; @@ -307,7 +307,7 @@ const createExample = (example, customTitle) => { const component = () => ( - { {...rest} > {renderedSections} - + ); @@ -328,24 +328,9 @@ const createExample = (example, customTitle) => { }; }; -const createTabbedPage = ({ - title, - pages, - isNew, - description, - showThemeLanguageToggle, - notice, - isBeta, -}) => { +const createTabbedPage = ({ title, pages, isNew, ...rest }) => { const component = () => ( - + ); const pagesSections = pages.map((page, index) => { @@ -377,9 +362,9 @@ const createMarkdownExample = (file, name, intro) => { return { name, component: () => ( - + {file.default} - + ), sections: sections, }; diff --git a/src-docs/src/views/guidelines/accessibility.js b/src-docs/src/views/guidelines/accessibility.js index c02bc0defe2..122e875849b 100644 --- a/src-docs/src/views/guidelines/accessibility.js +++ b/src-docs/src/views/guidelines/accessibility.js @@ -16,6 +16,7 @@ import { EuiAspectRatio, EuiIcon, EuiTextColor, + EuiHorizontalRule, } from '../../../../src/components'; const codeBlockProps = { @@ -296,6 +297,7 @@ export default { + ), }, @@ -410,6 +412,7 @@ export default { + ), }, @@ -503,6 +506,7 @@ export default { + ), }, @@ -664,6 +668,7 @@ export default { + ), }, @@ -762,6 +767,7 @@ export default { }, { title: 'Learning resources', + color: 'subdued', wrapText: false, text: ( <> diff --git a/src-docs/src/views/guidelines/writing_examples.js b/src-docs/src/views/guidelines/writing_examples.js index 405a71f83dd..728d87c8fbc 100644 --- a/src-docs/src/views/guidelines/writing_examples.js +++ b/src-docs/src/views/guidelines/writing_examples.js @@ -1,6 +1,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { GuideRule, GuideRuleExample } from '../../components'; +import { GuideRule, GuideRuleExample, GuideSection } from '../../components'; import { EuiButton, @@ -48,7 +48,7 @@ export const WritingExamples = () => { const modalStyles = { maxWidth: 480, transform: 'scale(.8)' }; return ( - <> +

Buttons

@@ -681,6 +681,6 @@ export const WritingExamples = () => { - + ); }; diff --git a/src-docs/src/views/guidelines/writing_guidelines.js b/src-docs/src/views/guidelines/writing_guidelines.js index 9a8f42f8e78..892b55888f2 100644 --- a/src-docs/src/views/guidelines/writing_guidelines.js +++ b/src-docs/src/views/guidelines/writing_guidelines.js @@ -2,7 +2,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import classNames from 'classnames'; -import { GuideRule, GuideRuleExample } from '../../components'; +import { GuideRule, GuideRuleExample, GuideSection } from '../../components'; import { EuiButton, @@ -83,905 +83,913 @@ const GuideRuleWriting = ({ children, className, ...rest }) => { export const WritingGuidelines = () => { return ( <> - -

- You can have the most beautiful UI, but without{' '} - consistent, easy-to-understand text, you haven’t built the best - user experience. -

- - - - - - - + +

+ You can have the most beautiful UI, but without{' '} + consistent, easy-to-understand text, you haven’t built the + best user experience. +

+ + + + + + + - - - - - - - - - - - - - - - - - -

Capitalization

- - - + +

Capitalization

+ + + - - - Create index patterns - - - - - - Create Index Patterns - - - - - - - - Set up index pattern - - - - - Set Up Index Pattern - - - - - - - - Inventory - Metrics Explorer - - - - - Inventory - Metrics explorer - - - + + + Create index patterns + + + + + + Create Index Patterns + + + + + + + + Set up index pattern + + + + + Set Up Index Pattern + + + + + + + + Inventory + Metrics Explorer + + + + + Inventory + Metrics explorer + + + - + - + - -

Writing style

- + +

Writing style

+ - - - - The Elasticsearch Query DSL builds filters. - - - - - Filters are built using the Elasticsearch Query DSL. - - - - - + + The Elasticsearch Query DSL builds filters. + + + + + Filters are built using the Elasticsearch Query DSL. + + + + + - - -

Edit saved objects

- - - - - -

Edit saved objects

-

- From here, you can edit saved objects. To get started, follow - these steps. -

- - - - - - - - Configure at least one index pattern. - - - - - In order to use Kibana, you must configure at least one index - pattern. - - - - - - - - No active shard records for this cluster. - - - - - There are currently no active shard records for this cluster. - - - - - - - Create component template - - - Create a new component template - - - - - - - -

Addressing the user

- - - - - - You must configure TLS to apply a Platinum license. - - - - + +

Edit saved objects

+ + + + + +

Edit saved objects

+

+ From here, you can edit saved objects. To get started, follow + these steps. +

+ + + + + + + + Configure at least one index pattern. + + + + + In order to use Kibana, you must configure at least one index + pattern. + + + + + + + + No active shard records for this cluster. + + + + + There are currently no active shard records for this cluster. + + + + + + + Create component template + + + Create a new component template + + + + + + + +

Addressing the user

+ + + - - Configuring TLS will be required to apply a Platinum license. - - - - - + + You must configure TLS to apply a Platinum license. + + + + + + Configuring TLS will be required to apply a Platinum license. + + + + + - - - We noticed that you don't have any data in your cluster. Try - our sample data and dashboards or jump in with your own data. - - - - - Let's create a database - Let's create a visualization - ... - - - - - - Explore on my own - - - - - I agree to follow the terms of service - - - - - - - - -

Punctuation

- - - + + We noticed that you don't have any data in your cluster. Try + our sample data and dashboards or jump in with your own data. + + + + + Let's create a database + + Let's create a visualization + + ... + + + + + + Explore on my own + + + + + I agree to follow the terms of service + + + + + + + + +

Punctuation

+ + + - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - - - - - - + + + + + - - - Accepts 1–5. Learn more. - - } + - - - - - - - Index management - - - Update your Elasticsearch indices individually or in bulk - - - - - - - - Didn't find what you were looking for? - - - - - Did not find what you were looking for? - - - - - + + Didn't find what you were looking for? + + + + + Did not find what you were looking for? + + + + + - - - This dashboard is empty. Fill it up! - - - - - Couldn't find any Elasticsearch data! - - - - - - - - -

Messages

- - - + + This dashboard is empty. Fill it up! + + + + + Couldn't find any Elasticsearch data! + + + + + + + + +

Messages

+ + + - - - This dashboard is empty - - -

- To add a visualization, click Add in the menu bar. No - visualizations yet? Go to Visualize to create one. -

- - - - - - Uh-oh! - - -

- This dashboard is empty. To add a visualization, click Add in the - menu bar. No visualizations yet? Go to the Visualize app to create - one. -

- - - - - - - - You need to increase your subscription limit. Please contact - support. - - - - - - Contact support because you need to increase your subscription - limit. - - - - - - - - No data sources. Go to Management to define an index pattern. - - - - - Oops, no data sources. - - - - - - - - Delete this report? + + + This dashboard is empty - - - - Cancel - - - Delete - - - - - - - - - Are you sure you want to delete this report? + +

+ To add a visualization, click Add in the menu bar. No + visualizations yet? Go to Visualize to create one. +

+ + + + + + Uh-oh! - - - - Cancel - - - Delete report - - - - - - - + + + + Delete this report? + + + + + Cancel + + + Delete + + + + + + + + + Are you sure you want to delete this report? + + + + + Cancel + + + Delete report + + + + + + + - - - Save your work before generating a report. - - - - - Please save your work before generating a report. - - - - - - - - Your session has expired. Please log in again. - - - - Please wait. - - - - - - - - - - - - + + Save your work before generating a report. + + + + + Please save your work before generating a report. + + + + + + + + Your session has expired. Please log in again. + + + + Please wait. + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - -

Labels

- - - + + + + + + + + + + + + + + + +

Labels

+ + + - - - {}} - id={htmlIdGenerator()()} - label="Combine values in other bucket" - /> - - - - - - - - {}} - id={htmlIdGenerator()()} - label="Combine other" - /> - - - - - - - - - - - - - - Remove this user? - - - - - Cancel - - - Remove user - - - - - - - - Remove this user? + + + {}} + id={htmlIdGenerator()()} + label="Combine values in other bucket" + /> + + + + + + + + {}} + id={htmlIdGenerator()()} + label="Combine other" + /> + + + + + + + + + + + + + + Remove this user? + + + + + Cancel + + + Remove user + + + + + + + + Remove this user? + + + + + Cancel + + + Ok + + + + + + + + + + +

Be careful with humor

+ + + + + +

+ Your text can be fun as long as it fits the experience—and + doesn't get in the user's way. Clever text can become + annoying when used for frequently performed tasks. Situations where + the user might lose data or otherwise be frustrated are also not + appropriate for humor. +

+ + + + + Odd, exciting, and scary trends and anomalies in your + Elasticsearch data + + + + + + No results found + - - - Cancel - - - Ok - - - - - - - - - - -

Be careful with humor

- - - - - -

- Your text can be fun as long as it fits the experience—and - doesn't get in the user's way. Clever text can become - annoying when used for frequently performed tasks. Situations where - the user might lose data or otherwise be frustrated are also not - appropriate for humor. -

- - - - - Odd, exciting, and scary trends and anomalies in your Elasticsearch - data - - - - - - No results found - - - - -

- Unfortunately, I could not find any results matching your search. - I tried really hard. I looked all over the place and frankly, I - just couldn't find anything good. Help me, help you. -

- - - - - - - - -

- Specific component guidelines -

- - - - - -

- Find specific guidelines and examples by checking component details. -

-
    -
  • - Button -
    • -
  • - Modal -
    • -
  • - - Selection control labels - -
    • -
  • - Toast -
    • -
-

- Need some more writing examples? Check out the{' '} - Examples page. -

- - - - - - - -

Verifying your text

- - - - - - - - - - - - - - - - + +

+ Unfortunately, I could not find any results matching your + search. I tried really hard. I looked all over the place and + frankly, I just couldn't find anything good. Help me, help + you. +

+ + + + + + + +

Verifying your text

+ + + + + + + + + + + + + + + + + + + + +

+ Specific component guidelines +

+ + + + + +

+ Find specific guidelines and examples by checking component details. +

+
    +
  • + Button +
    • +
  • + Modal +
    • +
  • + + Selection control labels + +
    • +
  • + Toast +
    • +
+

+ Need some more writing examples? Check out the{' '} + Examples page. +

+ + ); }; diff --git a/src-docs/src/views/package/changelog.js b/src-docs/src/views/package/changelog.js index 91dc57999d7..78d80ac056d 100644 --- a/src-docs/src/views/package/changelog.js +++ b/src-docs/src/views/package/changelog.js @@ -1,11 +1,8 @@ import React from 'react'; -import { - EuiMarkdownFormat, - EuiPageContentBody, - EuiSpacer, -} from '../../../../src'; -import { GuidePage } from '../../components/guide_page'; +import { EuiMarkdownFormat } from '../../../../src'; +import { GuideSection } from '../../components'; +import { GuideTabbedPage } from '../../components/guide_tabbed_page'; const changelogSource = require('!!raw-loader!../../../../CHANGELOG.md').default.replace( /## \[`main`\].+?##(?= \[`\d)/s, // remove the `main` heading & contents @@ -15,11 +12,10 @@ const changelogSource = require('!!raw-loader!../../../../CHANGELOG.md').default export const Changelog = { name: 'Changelog', component: () => ( - - - + + {changelogSource} - - + + ), }; diff --git a/src-docs/src/views/package/i18n_tokens.js b/src-docs/src/views/package/i18n_tokens.js index 8597d921b62..8d3993c9a1d 100644 --- a/src-docs/src/views/package/i18n_tokens.js +++ b/src-docs/src/views/package/i18n_tokens.js @@ -10,9 +10,9 @@ import { EuiSpacer, EuiText, EuiTitle, - EuiPageContentBody, } from '../../../../src'; -import { GuidePage } from '../../components/guide_page'; +import { GuideTabbedPage } from '../../components/guide_tabbed_page'; +import { GuideSection } from '../../components'; const columns = [ { @@ -61,10 +61,8 @@ const search = { export const I18nTokens = { name: 'I18n tokens', component: () => ( - - - - + + ))} - - + + ), }; diff --git a/src-docs/src/views/responsive/utility_classes_responsive.tsx b/src-docs/src/views/responsive/utility_classes_responsive.tsx index 2774aec945e..a9b0c1e516f 100644 --- a/src-docs/src/views/responsive/utility_classes_responsive.tsx +++ b/src-docs/src/views/responsive/utility_classes_responsive.tsx @@ -22,7 +22,6 @@ export default () => ( breakpoint.

- .eui-hideFor--[size]} type="className" @@ -52,7 +51,6 @@ export default () => ( `} /> - .eui-showFor--[size]} type="className" @@ -80,7 +78,6 @@ export default () => ( `} /> - .eui-showFor--[size]--[display]} type="className" diff --git a/src-docs/src/views/theme/_components/_theme_example.tsx b/src-docs/src/views/theme/_components/_theme_example.tsx index d2be445d0a6..895a2bc858d 100644 --- a/src-docs/src/views/theme/_components/_theme_example.tsx +++ b/src-docs/src/views/theme/_components/_theme_example.tsx @@ -10,6 +10,8 @@ import { useEuiTheme, EuiBadge, logicalCSS, + useIsWithinBreakpoints, + useEuiPaddingCSS, } from '../../../../../src'; import { _EuiSplitPanelInnerProps, @@ -47,6 +49,8 @@ export const ThemeExample: FunctionComponent = ({ props, }) => { const { euiTheme } = useEuiTheme(); + const isLargeBreakpoint = useIsWithinBreakpoints(['m', 'l', 'xl']); + const finalSnippet = snippetLanguage === 'emotion' ? `css\` @@ -57,17 +61,23 @@ export const ThemeExample: FunctionComponent = ({ return ( <> {title && ( @@ -111,10 +121,9 @@ export const ThemeExample: FunctionComponent = ({ {(example || snippet) && ( - ); + return ; }; diff --git a/src-docs/src/views/theme/borders/borders.tsx b/src-docs/src/views/theme/borders/borders.tsx index f174738488a..70866f0fbde 100644 --- a/src-docs/src/views/theme/borders/borders.tsx +++ b/src-docs/src/views/theme/borders/borders.tsx @@ -1,9 +1,8 @@ import React, { useContext, useMemo } from 'react'; -import { EuiCode, EuiSpacer, EuiText } from '../../../../../src/components'; +import { EuiCode, EuiText } from '../../../../../src/components'; -// @ts-ignore Importing from JS -import { GuidePage } from '../../../components/guide_page'; +import { GuideTabbedPage } from '../../../components/guide_tabbed_page'; import { GuideSection } from '../../../components/guide_section/guide_section'; import { ThemeContext } from '../../../components/with_theme'; @@ -89,7 +88,7 @@ export default () => { }, [showSass]); return ( - } @@ -103,12 +102,10 @@ export default () => { >{`${bordersSections[0].title}`} - - {borderContent} - + {showSass ? : } @@ -123,12 +120,10 @@ export default () => {

- - {colorContent} - + {showSass ? : } @@ -139,12 +134,10 @@ export default () => { >{`${bordersSections[2].title}`} - - {widthContent} - + {showSass ? : } @@ -155,14 +148,12 @@ export default () => { >{`${bordersSections[3].title}`} - - {radiusContent} - + {showSass ? : } - + ); }; diff --git a/src-docs/src/views/theme/breakpoints/breakpoints.tsx b/src-docs/src/views/theme/breakpoints/breakpoints.tsx index e9b5c69a333..a70761933a7 100644 --- a/src-docs/src/views/theme/breakpoints/breakpoints.tsx +++ b/src-docs/src/views/theme/breakpoints/breakpoints.tsx @@ -1,10 +1,8 @@ import React, { useContext, useMemo } from 'react'; import { Link } from 'react-router-dom'; - import { EuiSpacer, EuiText } from '../../../../../src'; -// @ts-ignore Importing from JS -import { GuidePage } from '../../../components/guide_page'; +import { GuideTabbedPage } from '../../../components/guide_tabbed_page'; import { GuideSection } from '../../../components/guide_section/guide_section'; import { ThemeContext } from '../../../components/with_theme'; @@ -29,7 +27,7 @@ export default () => { }, [showSass]); return ( - } @@ -57,7 +55,7 @@ export default () => { {baseContent} - {valuesContent} - + {valuesContent} + ); }; diff --git a/src-docs/src/views/theme/color/_color_js.tsx b/src-docs/src/views/theme/color/_color_js.tsx index 01bfd5d4773..b7d527f52c0 100644 --- a/src-docs/src/views/theme/color/_color_js.tsx +++ b/src-docs/src/views/theme/color/_color_js.tsx @@ -8,7 +8,6 @@ import { useEuiBackgroundColorCSS, EuiCode, EuiColorPickerSwatch, - EuiSpacer, EuiText, useEuiBackgroundColor, useEuiPaddingSize, @@ -275,8 +274,6 @@ export const UtilsJS = () => {

- - {'useEuiBackgroundColorCSS()[color]'}} type="style hook" diff --git a/src-docs/src/views/theme/color/colors.tsx b/src-docs/src/views/theme/color/colors.tsx index a738a0ef814..9a0a9370b83 100644 --- a/src-docs/src/views/theme/color/colors.tsx +++ b/src-docs/src/views/theme/color/colors.tsx @@ -4,8 +4,7 @@ import { Link } from 'react-router-dom'; import { EuiCallOut, EuiCode, EuiSpacer, EuiText } from '../../../../../src'; import { GuideSection } from '../../../components/guide_section/guide_section'; -// @ts-ignore Importing from JS -import { GuidePage } from '../../../components/guide_page'; +import { GuideTabbedPage } from '../../../components/guide_tabbed_page'; import { ThemeContext } from '../../../components/with_theme'; import { ThemeNotice } from '../_components/_theme_notice'; @@ -126,7 +125,7 @@ export default () => { }, [showSass]); return ( - } @@ -175,12 +174,10 @@ export default () => {

- - {brandContent} - + {showSass ? : } @@ -205,12 +202,10 @@ export default () => {

- - {textContent} - + {showSass ? : } @@ -225,12 +220,10 @@ export default () => {

- - {shadesContent} - + {showSass ? : } @@ -243,12 +236,10 @@ export default () => {

These are used a lot for special cases.

- - {specialContent} - + {showSass ? : } @@ -264,11 +255,14 @@ export default () => { {utilsContent} - - {showSass ? undefined : } - + {showSass ? undefined : ( + + {' '} + + + )} )} - + ); }; diff --git a/src-docs/src/views/theme/customizing/values.tsx b/src-docs/src/views/theme/customizing/values.tsx index 0c885883faa..a3c404a80ab 100644 --- a/src-docs/src/views/theme/customizing/values.tsx +++ b/src-docs/src/views/theme/customizing/values.tsx @@ -19,8 +19,8 @@ import { EuiThemeProvider, } from '../../../../../src'; -// @ts-ignore Importing from JS -import { GuidePage } from '../../../components'; +import { GuideSection } from '../../../components/guide_section/guide_section'; +import { GuideTabbedPage } from '../../../components/guide_tabbed_page'; import { ThemeNotice } from '../_components/_theme_notice'; import { ThemeContext } from '../../../components/with_theme'; @@ -43,8 +43,6 @@ import Levels from './_levels'; import Focus from './_focus'; import Sass from './_sass'; -import { GuideSection } from '../../../components/guide_section/guide_section'; - // @ts-ignore TODO const JsonFlyout = ({ setIsOpen }) => { const { euiTheme } = useEuiTheme(); @@ -82,13 +80,13 @@ export default () => { return ( - } showThemeLanguageToggle > - + {showSass ? ( ) : ( @@ -127,7 +125,7 @@ export default () => { )} - + {!showSass && ( <> diff --git a/src-docs/src/views/theme/other/_shadow_js.tsx b/src-docs/src/views/theme/other/_shadow_js.tsx index 2e15a32d58e..979d05472cb 100644 --- a/src-docs/src/views/theme/other/_shadow_js.tsx +++ b/src-docs/src/views/theme/other/_shadow_js.tsx @@ -196,7 +196,6 @@ export const ShadowValuesJS = () => { ) } /> - ); }; diff --git a/src-docs/src/views/theme/other/_shadow_sass.tsx b/src-docs/src/views/theme/other/_shadow_sass.tsx index 92e420e770b..f7c3c3076e6 100644 --- a/src-docs/src/views/theme/other/_shadow_sass.tsx +++ b/src-docs/src/views/theme/other/_shadow_sass.tsx @@ -1,9 +1,5 @@ import React from 'react'; -import { - EuiSpacer, - keysOf, - _EuiShadowSizesDescriptions, -} from '../../../../../src'; +import { keysOf, _EuiShadowSizesDescriptions } from '../../../../../src'; import { ThemeExample } from '../_components/_theme_example'; import { ThemeValuesTable } from '../_components/_theme_values_table'; @@ -75,7 +71,6 @@ export const ShadowValuesSass = () => {
)} /> - ); }; diff --git a/src-docs/src/views/theme/other/other.tsx b/src-docs/src/views/theme/other/other.tsx index af2d3bd323e..9dfe253df29 100644 --- a/src-docs/src/views/theme/other/other.tsx +++ b/src-docs/src/views/theme/other/other.tsx @@ -1,7 +1,6 @@ import React, { useContext, useMemo } from 'react'; -// @ts-ignore Importing from JS -import { GuidePage } from '../../../components/guide_page'; +import { GuideTabbedPage } from '../../../components/guide_tabbed_page'; import { ThemeContext } from '../../../components/with_theme'; import { EuiCallOut, EuiCode, EuiSpacer, EuiText } from '../../../../../src'; @@ -120,7 +119,7 @@ export default () => { }, [showSass]); return ( - } @@ -130,11 +129,6 @@ export default () => {

{`${otherSections[0].title}`}

- - - - -

The animation values provide some easy and consistent ways for adding transition or animation effects and @@ -163,18 +157,16 @@ export default () => {

- - {speedContent} - + {showSass ? : } {easeContent} - + {showSass ? : } @@ -183,12 +175,10 @@ export default () => {

{`${otherSections[1].title}`}

- - {shadowContent} - + {showSass ? : } @@ -217,11 +207,9 @@ export default () => { z-index.

- - - {levelsContent} - + {levelsContent} + ); }; diff --git a/src-docs/src/views/theme/sizing/_sizing_js.tsx b/src-docs/src/views/theme/sizing/_sizing_js.tsx index 9919cc73e5c..da681d7c2f6 100644 --- a/src-docs/src/views/theme/sizing/_sizing_js.tsx +++ b/src-docs/src/views/theme/sizing/_sizing_js.tsx @@ -9,7 +9,6 @@ import { logicalCSS, logicalStyle, logicals, - EuiSpacer, EuiText, useEuiPaddingSize, useEuiBackgroundColor, @@ -168,8 +167,6 @@ export const UtilsJS = () => {

- - {'logicalCSS(property, value)'}} type="function" @@ -273,8 +270,6 @@ export const PaddingJS = () => {

- - {'useEuiPaddingCSS(side?)[size]'}} type="style hook" diff --git a/src-docs/src/views/theme/sizing/sizing.tsx b/src-docs/src/views/theme/sizing/sizing.tsx index 974ed63c77d..27e61dda332 100644 --- a/src-docs/src/views/theme/sizing/sizing.tsx +++ b/src-docs/src/views/theme/sizing/sizing.tsx @@ -2,8 +2,7 @@ import React, { useContext, useMemo } from 'react'; import { EuiCallOut, EuiSpacer, EuiText, EuiTitle } from '../../../../../src'; -// @ts-ignore Importing from JS -import { GuidePage } from '../../../components/guide_page'; +import { GuideTabbedPage } from '../../../components/guide_tabbed_page'; import { GuideSection } from '../../../components/guide_section/guide_section'; import { ThemeContext } from '../../../components/with_theme'; @@ -53,13 +52,13 @@ export default () => { }, [showSass]); return ( - } showThemeLanguageToggle > - +

{`${sizingSections[0].title}`}

@@ -83,7 +82,7 @@ export default () => { {scaleContent} - + {showSass ? : } @@ -97,7 +96,7 @@ export default () => { {utilsContent} - +

{`${sizingSections[3].title}`}

@@ -106,6 +105,6 @@ export default () => { {paddingContent} - + ); }; diff --git a/src-docs/src/views/theme/typography/_typography_sass.tsx b/src-docs/src/views/theme/typography/_typography_sass.tsx index 10e389789df..cc1b8c0b682 100644 --- a/src-docs/src/views/theme/typography/_typography_sass.tsx +++ b/src-docs/src/views/theme/typography/_typography_sass.tsx @@ -134,8 +134,6 @@ export const FontValuesSass = () => { }, ]} /> - - ); }; @@ -213,8 +211,6 @@ export const FontWeightValuesSass = () => { }, ]} /> - - ); }; @@ -303,8 +299,6 @@ export const FontScaleValuesSass = () => { }, ]} /> - - ); }; diff --git a/src-docs/src/views/theme/typography/typography.tsx b/src-docs/src/views/theme/typography/typography.tsx index 6c379b7ca41..494894f22a4 100644 --- a/src-docs/src/views/theme/typography/typography.tsx +++ b/src-docs/src/views/theme/typography/typography.tsx @@ -4,14 +4,13 @@ import { Link } from 'react-router-dom'; // @ts-ignore Importing from Sass file import fonts from '!!sass-vars-to-js-loader?preserveKeys=true!../../../../../src/global_styling/variables/_font_weight.scss'; -// @ts-ignore Importing from JS -import { GuidePage } from '../../../components/guide_page'; +import { GuideSection } from '../../../components/guide_section/guide_section'; +import { GuideTabbedPage } from '../../../components/guide_tabbed_page'; import { useEuiTheme, htmlIdGenerator, throttle, - EuiSpacer, EuiText, EuiLink, EuiRange, @@ -21,7 +20,6 @@ import { import { ThemeExample } from '../_components/_theme_example'; import { ThemeNotice } from '../_components/_theme_notice'; import { ThemeContext } from '../../../components/with_theme'; -import { GuideSection } from '../../../components/guide_section/guide_section'; import { FontJS, @@ -86,7 +84,7 @@ export default () => { }, [showSass]); return ( - } @@ -132,12 +130,11 @@ export default () => { components as wrappers of your content instead.

- {scaleContent} - + {showSass ? : } @@ -156,8 +153,6 @@ export default () => {

- - {weightContent} { /> - + {showSass ? : } @@ -215,17 +210,15 @@ export default () => { >{`${typographySections[2].title}`} - - {baseContent} {showSass && ( - + )} - + ); }; diff --git a/src-docs/src/views/utility_classes/utility_classes_example.js b/src-docs/src/views/utility_classes/utility_classes_example.js index f45428012d7..9aec68e349a 100644 --- a/src-docs/src/views/utility_classes/utility_classes_example.js +++ b/src-docs/src/views/utility_classes/utility_classes_example.js @@ -39,23 +39,13 @@ export const UtilityClassesExample = { { title: 'Display', wrapText: false, - text: ( - <> - - - - ), + text: , }, { title: 'Vertical alignment', color: 'subdued', wrapText: false, - text: ( - <> - - - - ), + text: , }, ], };