Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[OUI Docs] Doc site header clean up #118

Closed
wants to merge 6 commits into from
Closed

[OUI Docs] Doc site header clean up #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
88ccd0e
Removes Figma link/icon
bandinib-amzn Nov 8, 2022
4a089f6
Removes Codesandbox link/icon
bandinib-amzn Nov 9, 2022
cc8ba0a
Removes Sketch link/icon
bandinib-amzn Nov 9, 2022
4214190
Removes Cascadia options from theme dropdown
bandinib-amzn Nov 9, 2022
53952a0
Removes Babelfish
bandinib-amzn Nov 9, 2022
4864785
Changes logoElastic to logoOUI
bandinib-amzn Nov 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 2 additions & 35 deletions src-docs/src/components/guide_page/guide_page_header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,8 @@ import { OuiPopover } from '../../../../src/components/popover';
import { useIsWithinBreakpoints } from '../../../../src/services/hooks';
import { OuiButtonEmpty } from '../../../../src/components/button';

// @ts-ignore Not TS
import { CodeSandboxLink } from '../../components/codesandbox/link';
import logoOUI from '../../images/logo-oui.svg';
import {
GuideThemeSelector,
GuideSketchLink,
GuideFigmaLink,
} from '../guide_theme_selector';
import { GuideThemeSelector } from '../guide_theme_selector';

const pkg = require('../../../../package.json');

Expand Down Expand Up @@ -92,25 +86,6 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
);
}

function renderCodeSandbox() {
const label = 'Codesandbox';
return isMobileSize ? (
<CodeSandboxLink key="codesandbox">
<OuiButtonEmpty size="s" flush="both" iconType="logoCodesandbox">
{label}
</OuiButtonEmpty>
</CodeSandboxLink>
) : (
<OuiToolTip content="Codesandbox" key="codesandbox">
<CodeSandboxLink>
<OuiHeaderSectionItemButton aria-label="Codesandbox">
<OuiIcon type="logoCodesandbox" aria-hidden="true" />
</OuiHeaderSectionItemButton>
</CodeSandboxLink>
</OuiToolTip>
);
}

const [mobilePopoverIsOpen, setMobilePopoverIsOpen] = useState(false);

function renderMobileMenu() {
Expand All @@ -128,12 +103,7 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
button={button}
isOpen={mobilePopoverIsOpen}
closePopover={() => setMobilePopoverIsOpen(false)}>
<div className="guideOptionsPopover">
{renderGithub()}
<GuideSketchLink />
<GuideFigmaLink />
{renderCodeSandbox()}
</div>
<div className="guideOptionsPopover">{renderGithub()}</div>
</OuiPopover>
);
}
Expand All @@ -152,9 +122,6 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
selectedLocale={selectedLocale}
/>,
renderGithub(),
<GuideSketchLink key="sketch" />,
<GuideFigmaLink key="figma" />,
renderCodeSandbox(),
];

return (
Expand Down
16 changes: 0 additions & 16 deletions src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,10 @@ import {
OuiContextMenuItem,
} from '../../../../src/components/context_menu';
import { OuiPopover } from '../../../../src/components/popover';
import { OuiHorizontalRule } from '../../../../src/components/horizontal_rule';
import { useIsWithinBreakpoints } from '../../../../src/services/hooks/useIsWithinBreakpoints';
import { OUI_THEME, OUI_THEMES } from '../../../../src/themes';

import { ThemeContext } from '../with_theme';
// @ts-ignore Not TS
import { GuideLocaleSelector } from '../guide_locale_selector';

type GuideThemeSelectorProps = {
onToggleLocale: () => {};
Expand All @@ -45,8 +42,6 @@ export const GuideThemeSelector: React.FunctionComponent<GuideThemeSelectorProps
// @ts-ignore Context has no type
const GuideThemeSelectorComponent: React.FunctionComponent<GuideThemeSelectorProps> = ({
context,
onToggleLocale,
selectedLocale,
}) => {
const isMobileSize = useIsWithinBreakpoints(['xs', 's']);
const [isPopoverOpen, setPopover] = useState(false);
Expand Down Expand Up @@ -102,17 +97,6 @@ const GuideThemeSelectorComponent: React.FunctionComponent<GuideThemeSelectorPro
panelPaddingSize="none"
anchorPosition="downRight">
<OuiContextMenuPanel size="s" items={items} />
{location.host.includes('803') && (
<>
<OuiHorizontalRule margin="none" />
<div style={{ padding: 8 }}>
<GuideLocaleSelector
onToggleLocale={onToggleLocale}
selectedLocale={selectedLocale}
/>
</div>
</>
)}
</OuiPopover>
);
};
2 changes: 1 addition & 1 deletion src-docs/src/views/card/playground.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const cardConfig = () => {
propsToUse.icon = {
...propsToUse.icon,
type: PropTypes.ReactNode,
value: '<OuiIcon type="logoElastic" size="xl" />',
value: '<OuiIcon type="logoOUI" size="xl" />',
};

propsToUse.children = {
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ const CollapsibleNavAll = () => {

const leftSectionItems = [
collapsibleNav,
<OuiHeaderLogo href={exitPath} iconType="logoElastic">
<OuiHeaderLogo href={exitPath} iconType="logoOUI">
Elastic
</OuiHeaderLogo>,
];
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/collapsible_nav/collapsible_nav_group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default () => (
<OuiCollapsibleNavGroup
data-test-subj="TEST"
title="Nav group"
iconType="logoElastic">
iconType="logoOUI">
<OuiText size="s" color="subdued">
<p>
This is a nice group with a heading supplied via{' '}
Expand All @@ -38,7 +38,7 @@ export default () => (
background="light"
title="Nav group"
isCollapsible={true}
iconType="logoElastic"
iconType="logoOUI"
initialIsOpen={true}>
<OuiText size="s" color="subdued">
<p>
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/header/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import { htmlIdGenerator } from '../../../../src/services';
export default () => {
const renderLogo = () => (
<OuiHeaderLogo
iconType="logoElastic"
iconType="logoOUI"
href="#"
onClick={(e) => e.preventDefault()}
aria-label="Go to home page"
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/header/header_elastic_pattern.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@ export default ({ theme }) => {
sections={[
{
items: [
<OuiHeaderLogo iconType="logoElastic" href="">
<OuiHeaderLogo iconType="logoOUI" href="">
Elastic
</OuiHeaderLogo>,
deploymentMenu,
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/header/header_sections.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
export default () => {
const renderLogo = (
<OuiHeaderLogo
iconType="logoElastic"
iconType="logoOUI"
href="#"
onClick={(e) => e.preventDefault()}
aria-label="Go to home page"
Expand Down
4 changes: 1 addition & 3 deletions src-docs/src/views/header/header_stacked.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,7 @@ export default () => {
position={isFixed ? 'fixed' : 'static'}
sections={[
{
items: [
<OuiHeaderLogo iconType="logoElastic">Elastic</OuiHeaderLogo>,
],
items: [<OuiHeaderLogo iconType="logoOUI">Elastic</OuiHeaderLogo>],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should references to Elastic in these files be changed to OpenSearch, or is that out of the scope of this PR?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be OpenSearch UI, and this makes me think we actually need an OUI logo. The team has explored some options, we should put them forward

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@BSFishy @kgcreative elastic reference removal is in my PR, and the OUI logo is in an upcoming PR. The to-do list on the original issue is accurate.

Copy link
Contributor

@KrooshalUX KrooshalUX Nov 17, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additionally, there may be merge conflicts between our PRs as I believe @bandinib-amzn originally included some of the elastic removal - I am not sure if those commits have been rolled back or not though. Will connect with @bandinib-amzn when I am not out of pocket.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@KrooshalUX which elastic removal are we talking about? This PR includes only proposed changes from #111. Did I mistakenly remove other elastic reference? I'm not sure which commit needs to be rolled back.

borders: 'none',
},
{
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/icon/logos.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const iconTypes = [
'logoCode',
'logoCloud',
'logoCloudEnterprise',
'logoElastic',
'logoOUI',
'logoElasticStack',
'logoElasticsearch',
'logoEnterpriseSearch',
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/notification_event/notification_event_flexible.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const notificationEventsData = [
{
id: 'news',
type: 'News',
iconType: 'logoElastic',
iconType: 'logoOUI',
iconAriaLabel: 'Elastic',
time: '3 min ago',
badgeColor: 'accent',
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/notification_event/notification_event_props_methods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default () => {
<div className="guideDemo__notificationEventHighlight">
<CircleIndicator name="B" />
<OuiIcon
type="logoElastic"
type="logoOUI"
className="guideDemo__notificationEventIcon"
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/notification_event/notifications_feed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const notificationEventsData = [
{
id: 'news-01',
type: 'News',
iconType: 'logoElastic',
iconType: 'logoOUI',
iconAriaLabel: 'Elastic',
time: '6 min ago',
badgeColor: 'accent',
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/page/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default () => (
<OuiPageSideBar>SideBar nav</OuiPageSideBar>
<OuiPageBody>
<OuiPageHeader
iconType="logoElastic"
iconType="logoOUI"
pageTitle="Page title"
rightSideItems={[
<OuiButton fill>Add something</OuiButton>,
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/page/page_bottom_bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default ({ button = <></>, content, sideNav, bottomBar }) => {
<OuiPageHeader
bottomBorder
restrictWidth
iconType="logoElastic"
iconType="logoOUI"
pageTitle="Page title"
rightSideItems={[button]}
/>
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/page/page_bottom_bar_template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default ({ button = <></>, content, sideNav, bottomBar }) => {
<OuiPageTemplate
pageSideBar={sideNav}
pageHeader={{
iconType: 'logoElastic',
iconType: 'logoOUI',
pageTitle: 'Page title',
rightSideItems: [button],
}}
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/page/page_centered_content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default ({ button = <></>, content, sideNav }) => (
<OuiPageBody panelled>
<OuiPageHeader
restrictWidth
iconType="logoElastic"
iconType="logoOUI"
pageTitle="Page title"
rightSideItems={[button]}
/>
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/page/page_centered_content_template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default ({ button = <></>, content, sideNav }) => (
pageContentProps={{ paddingSize: 'none' }}
pageSideBar={sideNav}
pageHeader={{
iconType: 'logoElastic',
iconType: 'logoOUI',
pageTitle: 'Page title',
rightSideItems: [button],
}}>
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/page/page_custom_content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default ({ button = <></> }) => (
<OuiPage paddingSize="l">
<OuiPageBody>
<OuiPageHeader
iconType="logoElastic"
iconType="logoOUI"
pageTitle="Page title"
rightSideItems={[button, <OuiButton>Do something</OuiButton>]}
bottomBorder
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/page/page_custom_content_template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default ({ button = <></> }) => (
restrictWidth={false}
template="empty"
pageHeader={{
iconType: 'logoElastic',
iconType: 'logoOUI',
pageTitle: 'Page title',
rightSideItems: [button, <OuiButton>Do something</OuiButton>],
}}>
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/page/page_new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default ({ button = <></>, content, sideNav }) => (
<OuiPageBody panelled>
<OuiPageHeader
restrictWidth
iconType="logoElastic"
iconType="logoOUI"
pageTitle="Page title"
rightSideItems={[button]}
tabs={[{ label: 'Tab 1', isSelected: true }, { label: 'Tab 2' }]}
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/page/page_restricting_width.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default ({ button = <></>, content, sideNav }) => {
<OuiPageBody panelled>
<OuiPageHeader
restrictWidth={'75%'}
iconType="logoElastic"
iconType="logoOUI"
pageTitle="Page title"
rightSideItems={[button]}
description="Restricting the width to 75%."
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/page/page_restricting_width_template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default ({ button = <></>, content, sideNav }) => {
pageSideBar={sideNav}
restrictWidth="75%"
pageHeader={{
iconType: 'logoElastic',
iconType: 'logoOUI',
pageTitle: 'Page title',
rightSideItems: [button],
description: 'Restricting the width to 75%.',
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/page/page_simple_empty_content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default ({ button = <></>, content }) => (
<OuiPageBody>
<OuiPageHeader
restrictWidth
iconType="logoElastic"
iconType="logoOUI"
pageTitle="Page title"
rightSideItems={[button]}
paddingSize="l"
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/page/page_simple_empty_content_template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default ({ button = <></>, content }) => (
template="centeredContent"
pageContentProps={{ paddingSize: 'none' }}
pageHeader={{
iconType: 'logoElastic',
iconType: 'logoOUI',
pageTitle: 'Page title',
rightSideItems: [button],
}}>
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/page/page_template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default ({ button = <></>, content, sideNav }) => {
pageSideBar={sideNav}
bottomBar={showBottomBar ? 'Bottom bar' : undefined}
pageHeader={{
iconType: 'logoElastic',
iconType: 'logoOUI',
pageTitle: 'Page title',
rightSideItems: [button],
tabs: [
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/tables/actions/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ export const Table = () => {
{
name: 'Elastic.co',
description: 'Go to elastic.co',
icon: 'logoElastic',
icon: 'logoOUI',
type: 'icon',
href: 'https://elastic.co',
target: '_blank',
Expand Down
6 changes: 3 additions & 3 deletions src/components/header/__snapshots__/header_logo.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ exports[`OuiHeaderLogo is rendered 1`] = `
<span
aria-label="Elastic"
class="ouiHeaderLogo__icon"
data-ouiicon-type="logoElastic"
data-ouiicon-type="logoOUI"
/>
</a>
`;
Expand All @@ -24,7 +24,7 @@ exports[`OuiHeaderLogo renders href 1`] = `
<span
aria-label="Elastic"
class="ouiHeaderLogo__icon"
data-ouiicon-type="logoElastic"
data-ouiicon-type="logoOUI"
/>
</a>
`;
Expand All @@ -38,7 +38,7 @@ exports[`OuiHeaderLogo renders href with rel 1`] = `
<span
aria-label="Elastic"
class="ouiHeaderLogo__icon"
data-ouiicon-type="logoElastic"
data-ouiicon-type="logoOUI"
/>
</a>
`;
Expand Down
2 changes: 1 addition & 1 deletion src/components/header/header_logo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export type OuiHeaderLogoProps = CommonProps &
};

export const OuiHeaderLogo: FunctionComponent<OuiHeaderLogoProps> = ({
iconType = 'logoElastic',
iconType = 'logoOUI',
iconTitle = 'Elastic',
href,
rel,
Expand Down
2 changes: 1 addition & 1 deletion src/components/icon/__snapshots__/icon.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4274,7 +4274,7 @@ exports[`OuiIcon props type logoDropwizard is rendered 1`] = `
</svg>
`;

exports[`OuiIcon props type logoElastic is rendered 1`] = `
exports[`OuiIcon props type logoOUI is rendered 1`] = `
<svg
aria-hidden="true"
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
Expand Down
2 changes: 1 addition & 1 deletion src/components/icon/icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ const typeToPathMap = {
logoCouchbase: 'logo_couchbase',
logoDocker: 'logo_docker',
logoDropwizard: 'logo_dropwizard',
logoElastic: 'logo_elastic',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we keep this for the sake of backwards compatibility? Do we know if anyone else is using this?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this change is in scope of this PR - there are several edits to the logos file that I am tracking as part of the meta issue for compliance.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As per last task (Change logoElastic to logoOUI) from #111, I changed all logoElastic references to logoOUI. Does it mean that in this PR we should just update logoElastic to logoOUI and keep name of logo which is logo_elastic as it is in this PR?

logoOUI: 'logo_oui',
logoElasticsearch: 'logo_elasticsearch',
logoElasticStack: 'logo_elastic_stack',
logoEnterpriseSearch: 'logo_enterprise_search',
Expand Down
Loading