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.

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

Add workspace icons #1365

Merged
merged 1 commit into from
Aug 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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: 19 additions & 18 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,10 @@

### 📈 Features/Enhancements

- Add V9 Theme ([#1344](https://github.com/opensearch-project/oui/pull/1344))
- Add history icon and alias it as recent ([#1346](https://github.com/opensearch-project/oui/pull/1346))
- Introduce compressed OuiSearchBar ([#1354](https://github.com/opensearch-project/oui/pull/1354))
- Introduce `$ouiLegibilityMaxWidth` variable and `ouiLegibilityMaxWidth` mixin ([#1359](https://github.com/opensearch-project/oui/pull/1359))
- Add new icons for workspaces ([#1365](https://github.com/opensearch-project/oui/pull/1365))

### 🐛 Bug Fixes

- Update styling for empty button and date picker icon ([#1342](https://github.com/opensearch-project/oui/pull/1342))
- Fix height of OuiCombobox when `append` is used ([#1338](https://github.com/opensearch-project/oui/pull/1338))
- Fix `docgenInfo` errors when accessing the props or playground of some docs ([#1355](https://github.com/opensearch-project/oui/pull/1355))

### 🚞 Infrastructure

### 📝 Documentation
Expand All @@ -29,18 +22,32 @@

### 🔩 Tests

## [`1.9.0`](https://github.com/opensearch-project/oui/tree/1.8.1)
## [Unreleased `1.10.0`](https://github.com/opensearch-project/oui/tree/1.10)

### 📈 Features/Enhancements

- Add display type and color to OuiSwitch ([#1332](https://github.com/opensearch-project/oui/pull/1332))
- Add V9 Theme ([#1344](https://github.com/opensearch-project/oui/pull/1344))
- Add history icon and alias it as recent ([#1346](https://github.com/opensearch-project/oui/pull/1346))
- Introduce compressed OuiSearchBar ([#1354](https://github.com/opensearch-project/oui/pull/1354))
- Introduce `$ouiLegibilityMaxWidth` variable and `ouiLegibilityMaxWidth` mixin ([#1359](https://github.com/opensearch-project/oui/pull/1359))

### 🐛 Bug Fixes

- Fix the availability of OuiCompressedSuperDatePicker ([#1325](https://github.com/opensearch-project/oui/pull/1325))
- Fix now button to be secondary in SuperDatePicker ([#1320](https://github.com/opensearch-project/oui/pull/1320))
- Update styling for empty button and date picker icon ([#1342](https://github.com/opensearch-project/oui/pull/1342))
- Fix height of OuiCombobox when `append` is used ([#1338](https://github.com/opensearch-project/oui/pull/1338))
- Fix `docgenInfo` errors when accessing the props or playground of some docs ([#1355](https://github.com/opensearch-project/oui/pull/1355))


## [`1.9.0`](https://github.com/opensearch-project/oui/tree/1.9.0)

### 📈 Features/Enhancements

- Add display type and color to OuiSwitch ([#1332](https://github.com/opensearch-project/oui/pull/1332))

### 🐛 Bug Fixes

- Fix the availability of OuiCompressedSuperDatePicker ([#1325](https://github.com/opensearch-project/oui/pull/1325))

## [`1.8.1`](https://github.com/opensearch-project/oui/tree/1.8.1)

Expand Down Expand Up @@ -108,6 +115,7 @@

- Clean up unused runtime and dev dependencies ([#1135](https://github.com/opensearch-project/oui/pull/1135))

### 🪛 Refactoring

## [`1.6.0`](https://github.com/opensearch-project/oui/tree/1.6.0)

Expand Down Expand Up @@ -153,18 +161,11 @@
- Eliminate screenreader content when copying and pasting data grid table ([#1198](https://github.com/opensearch-project/oui/pull/1198))
- [Next Theme] Set base font size to 18px ([#1221](https://github.com/opensearch-project/oui/pull/1221))
- [Next Theme] Revert `font-weight` of OuiButton to normal from semi-bold ([#1222](https://github.com/opensearch-project/oui/pull/1222))
- Convert shorthand palette colors to full 6-char hex ([#1262](https://github.com/opensearch-project/oui/pull/1262))
- Use small font size consistently in buttons and button groups ([#1281](https://github.com/opensearch-project/oui/pull/1281))
- Use faster animations for modals, popovers, and tooltips ([#1282](https://github.com/opensearch-project/oui/pull/1282))
- Adjust popover and context menu title styles and tooltip padding ([#1283](https://github.com/opensearch-project/oui/pull/1283))
- Remove Button translations and add inset shadow on active ([#1285](https://github.com/opensearch-project/oui/pull/1285))
- Make Super Update Button secondary instead of primary ([#1286](https://github.com/opensearch-project/oui/pull/1286))

### 🐛 Bug Fixes

- Fix bug in OuiButtonContent for showing info tooltip in icon-only buttons when hovered([#1160](https://github.com/opensearch-project/oui/pull/1160))
- Fix playground support check ([#1162](https://github.com/opensearch-project/oui/pull/1162))
- Make a OuiSplitButton with no options present as a button ([#1208](https://github.com/opensearch-project/oui/pull/1208))
- Prevent collapsable button of a resizable from adding to the height when hidden ([#1241](https://github.com/opensearch-project/oui/pull/1241))
- Prevent action buttons of OuiDataGridCell from moving the content ([#1224](https://github.com/opensearch-project/oui/pull/1224))
- Fix vertical alignment and font weight of breadcrumbs that are buttons or links ([#1232](https://github.com/opensearch-project/oui/pull/1232))
Expand Down
11 changes: 11 additions & 0 deletions src-docs/src/views/icon/icon_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ import Ml from './ml';

import Logos from './logos';

import Workspace from './workspace';

import IconSizes from './icon_sizes';

import IconColors from './icon_colors';
Expand Down Expand Up @@ -115,6 +117,15 @@ export const IconExample = {
),
demo: <Logos />,
},
{
title: 'Workspaces',
text: (
<p>
Workspace logos are usually displayed at <OuiCode>16x16</OuiCode> or above.
</p>
),
demo: <Workspace />,
},
{
title: 'Apps',
text: (
Expand Down
61 changes: 61 additions & 0 deletions src-docs/src/views/icon/workspace.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/*
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/

import React from 'react';

import {
OuiFlexGrid,
OuiFlexItem,
OuiIcon,
OuiPanel,
OuiCodeBlock,
OuiCopy,
OuiSpacer,
} from '../../../../src/components';

const iconTypes = [
'wsAnalytics',
'wsEssentials',
'wsObservability',
'wsSearch',
'wsSecurityAnalytics',
'wsSelector',
];

export default () => (
<>
<OuiCodeBlock language="html" isCopyable paddingSize="m">
{'<OuiIcon type="wsSelector" />'}
</OuiCodeBlock>
<OuiSpacer />
<OuiFlexGrid direction="column" columns={3}>
{iconTypes.map((iconType) => (
<OuiFlexItem key={iconType}>
<OuiCopy
display="block"
textToCopy={iconType}
afterMessage={`${iconType} copied`}>
{(copy) => (
<OuiPanel
hasShadow={false}
hasBorder={false}
onClick={copy}
paddingSize="s">
<OuiIcon className="oui-alignMiddle" type={iconType} /> &emsp;{' '}
<small>{iconType}</small>
</OuiPanel>
)}
</OuiCopy>
</OuiFlexItem>
))}
</OuiFlexGrid>
</>
);
103 changes: 103 additions & 0 deletions src/components/icon/__snapshots__/icon.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -10358,6 +10358,109 @@ exports[`OuiIcon props type wrench is rendered 1`] = `
</svg>
`;

exports[`OuiIcon props type wsAnalytics is rendered 1`] = `
<svg
aria-hidden="true"
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 8.7h4.2v5.6H1V8.7Zm9.8-3.5H15v9.1h-4.2V5.2ZM5.9 1.7h4.2v12.6H5.9V1.7Zm-3.5 8.4v2.8h1.4v-2.8H2.4Zm4.9-7v9.8h1.4V3.1H7.3Zm4.9 3.5v6.3h1.4V6.6h-1.4Z"
/>
</svg>
`;

exports[`OuiIcon props type wsEssentials is rendered 1`] = `
<svg
aria-hidden="true"
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.552 11.929h.734V8.357h1.428v3.572h.734c.094-.859.532-1.567 1.243-2.341.08-.088.594-.62.655-.695a4.286 4.286 0 1 0-6.693-.001c.061.076.576.609.655.695.712.775 1.15 1.483 1.244 2.342Zm.02 1.428v.714h2.857v-.714H6.57ZM3.538 9.785a5.714 5.714 0 1 1 8.922.002c-.444.552-1.604 1.427-1.604 2.499v1.785c0 .79-.64 1.429-1.428 1.429H6.57c-.789 0-1.428-.64-1.428-1.429v-1.785c0-1.072-1.161-1.948-1.604-2.5Z"
/>
</svg>
`;

exports[`OuiIcon props type wsObservability is rendered 1`] = `
<svg
aria-hidden="true"
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.819 9.366v-.003a3.09 3.09 0 0 0-.153-.356L12.16 3.303a.724.724 0 0 0-.151-.22 2.171 2.171 0 0 0-3.073 0 .724.724 0 0 0-.212.511v1.267H7.276V3.594a.724.724 0 0 0-.212-.512 2.172 2.172 0 0 0-3.073 0 .724.724 0 0 0-.15.22L1.333 9.008a2.87 2.87 0 0 0-.153.356v.003a3.138 3.138 0 1 0 6.095 1.047V6.309h1.448v4.104a3.137 3.137 0 1 0 6.095-1.047ZM5.103 4.033a.724.724 0 0 1 .725-.073v3.81a3.132 3.132 0 0 0-2.167-.46l1.442-3.277Zm-.965 8.07a1.69 1.69 0 1 1 0-3.38 1.69 1.69 0 0 1 0 3.38Zm6.034-8.143a.728.728 0 0 1 .725.073l1.44 3.278a3.132 3.132 0 0 0-2.166.46l.001-3.811Zm1.69 8.143a1.69 1.69 0 1 1 0-3.38 1.69 1.69 0 0 1 0 3.38Z"
/>
</svg>
`;

exports[`OuiIcon props type wsSearch is rendered 1`] = `
<svg
aria-hidden="true"
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.048 11.074 15 14.025l-.975.975-2.951-2.952A6.205 6.205 0 0 1 1 7.202 6.205 6.205 0 0 1 7.203 1a6.205 6.205 0 0 1 4.845 10.074Zm-1.382-.512a4.823 4.823 0 0 0-3.463-8.184 4.823 4.823 0 0 0-4.825 4.825 4.823 4.823 0 0 0 8.184 3.463l.104-.104ZM8.015 4.567a1.379 1.379 0 1 0 1.823 1.824 2.758 2.758 0 1 1-5.392.812 2.757 2.757 0 0 1 3.569-2.636Z"
/>
</svg>
`;

exports[`OuiIcon props type wsSecurityAnalytics is rendered 1`] = `
<svg
aria-hidden="true"
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m8 .5 5.602 1.245c.312.07.534.346.534.666V9.22a4.09 4.09 0 0 1-1.821 3.403L8 15.5l-4.315-2.877A4.09 4.09 0 0 1 1.864 9.22V2.41c0-.319.222-.596.534-.665L8 .5Zm0 1.397-4.773 1.06V9.22c0 .912.456 1.763 1.215 2.269L8 13.86l3.558-2.372a2.727 2.727 0 0 0 1.215-2.27V2.959L8 1.896ZM8 4.59a1.364 1.364 0 0 1 .683 2.544l-.001 2.91H7.318v-2.91A1.363 1.363 0 0 1 8 4.592Z"
/>
</svg>
`;

exports[`OuiIcon props type wsSelector is rendered 1`] = `
<svg
aria-hidden="true"
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.438 2.655a2 2 0 0 0-2.829 2.829c.217.216.544.382.958.496.409.114.866.167 1.305.185a9.903 9.903 0 0 0 1.22-.028 9.834 9.834 0 0 0 .033-1.215A5.82 5.82 0 0 0 5.94 3.62c-.115-.413-.282-.743-.503-.964Zm1.107 3.936.494.074v-.004l.002-.008.004-.03.014-.108c.01-.092.025-.223.038-.384.025-.32.046-.763.027-1.248a6.81 6.81 0 0 0-.22-1.532c-.14-.505-.372-1.015-.759-1.403a3 3 0 1 0-4.243 4.243c.385.384.894.613 1.398.753.507.14 1.047.2 1.53.22a10.9 10.9 0 0 0 1.745-.073l.03-.004h.008l.002-.001h.001l-.071-.495Zm0 0 .071.495.368-.054.055-.367-.494-.074Zm6.728-3.936a2 2 0 0 0-2.828 0c-.213.214-.373.534-.48.937-.106.4-.15.847-.16 1.275a9.361 9.361 0 0 0 .054 1.202 9.645 9.645 0 0 0 1.203.055c.428-.01.875-.054 1.275-.16.403-.107.723-.267.936-.48a2 2 0 0 0 0-2.829Zm-3.859 3.86-.493.084v-.004l-.002-.008-.005-.03a9.692 9.692 0 0 1-.06-.484c-.03-.315-.06-.75-.049-1.228a6.54 6.54 0 0 1 .193-1.51c.133-.498.356-1.003.74-1.387a3 3 0 0 1 4.242 4.243c-.383.384-.889.607-1.387.74a6.555 6.555 0 0 1-1.51.193 10.361 10.361 0 0 1-1.712-.11l-.03-.004-.007-.002H9.33l.084-.493Zm0 0-.084.493-.35-.06-.059-.35.493-.083ZM6.616 8.792l-.071.495.494-.075v.004l.002.009.004.03.014.107c.01.092.025.223.038.384.025.32.046.764.027 1.249a6.81 6.81 0 0 1-.22 1.531c-.14.506-.372 1.016-.759 1.403a3 3 0 0 1-4.243-4.242c.385-.385.894-.614 1.398-.753a6.864 6.864 0 0 1 1.53-.22 10.903 10.903 0 0 1 1.745.072l.03.004.008.001h.003Zm-.071.495.494-.075-.055-.367-.368-.053-.071.495Zm-.452.454a9.93 9.93 0 0 0-1.221-.029 5.907 5.907 0 0 0-1.305.185c-.414.115-.741.28-.958.497a2 2 0 0 0 2.829 2.828c.22-.22.388-.55.503-.964a5.82 5.82 0 0 0 .184-1.303 9.689 9.689 0 0 0-.032-1.214Zm6.5-.794c.498.132 1.004.356 1.387.74a3 3 0 0 1-4.242 4.242c-.384-.383-.607-.889-.74-1.387a6.555 6.555 0 0 1-.193-1.51 10.361 10.361 0 0 1 .11-1.712l.004-.03.001-.008V9.28l.001-.001.493.084-.084-.493h.004l.008-.002.03-.005a9.651 9.651 0 0 1 .484-.06c.315-.031.75-.06 1.228-.05a6.582 6.582 0 0 1 1.509.194Zm-3.179.416L9.33 8.87l-.35.06-.059.349.493.084Zm.445.445a9.645 9.645 0 0 0-.054 1.202c.01.429.054.876.16 1.276.107.403.267.723.48.936a2 2 0 0 0 2.828-2.828c-.213-.214-.533-.373-.936-.48a5.537 5.537 0 0 0-1.275-.16 9.36 9.36 0 0 0-1.203.054Z"
fill-rule="evenodd"
/>
</svg>
`;

exports[`OuiIcon render different types of icons renders custom components 1`] = `
<span
aria-hidden="true"
Expand Down
25 changes: 25 additions & 0 deletions src/components/icon/assets/workspace/wsAnalytics.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/*
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/

import * as React from "react";
const OuiIconWsAnalytics = ({ title, titleId, ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={16}
height={16}
viewBox="0 0 16 16"
aria-labelledby={titleId}
{...props}>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M1 8.7h4.2v5.6H1V8.7Zm9.8-3.5H15v9.1h-4.2V5.2ZM5.9 1.7h4.2v12.6H5.9V1.7Zm-3.5 8.4v2.8h1.4v-2.8H2.4Zm4.9-7v9.8h1.4V3.1H7.3Zm4.9 3.5v6.3h1.4V6.6h-1.4Z" />
</svg>
);
export const icon = OuiIconWsAnalytics;
29 changes: 29 additions & 0 deletions src/components/icon/assets/workspace/wsAnalytics.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions src/components/icon/assets/workspace/wsEssentials.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/*
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/

import * as React from "react";
const OuiIconWsEssentials = ({ title, titleId, ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={16}
height={16}
viewBox="0 0 16 16"
aria-labelledby={titleId}
{...props}>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M6.552 11.929h.734V8.357h1.428v3.572h.734c.094-.859.532-1.567 1.243-2.341.08-.088.594-.62.655-.695a4.286 4.286 0 1 0-6.693-.001c.061.076.576.609.655.695.712.775 1.15 1.483 1.244 2.342Zm.02 1.428v.714h2.857v-.714H6.57ZM3.538 9.785a5.714 5.714 0 1 1 8.922.002c-.444.552-1.604 1.427-1.604 2.499v1.785c0 .79-.64 1.429-1.428 1.429H6.57c-.789 0-1.428-.64-1.428-1.429v-1.785c0-1.072-1.161-1.948-1.604-2.5Z" />
</svg>
);
export const icon = OuiIconWsEssentials;
29 changes: 29 additions & 0 deletions src/components/icon/assets/workspace/wsEssentials.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading