Skip to content

Commit a17c839

Browse files
Hailong-amHailong-am
authored
Add docking icons (#1141)
* add docked icons Signed-off-by: Hailong Cui <ihailong@amazon.com> * Update changelog Signed-off-by: Hailong Cui <ihailong@amazon.com> --------- Signed-off-by: Hailong Cui <ihailong@amazon.com>
1 parent 6295461 commit a17c839

16 files changed

Lines changed: 340 additions & 0 deletions

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
- Add `Figma` icon and link to OUI Figma resources ([#1064](https://github.com/opensearch-project/oui/pull/1064))
2121
- Rename `crossInACircleFilled` asset files and ensure backward compatibility ([#1113](https://github.com/opensearch-project/oui/pull/1113))
2222
- Implement validation for icon input source & set default icon to `Beaker` ([#1137](https://github.com/opensearch-project/oui/pull/1137))
23+
- Add `Docking` icons ([#1041](https://github.com/opensearch-project/oui/pull/1041))
2324

2425
### 🐛 Bug Fixes
2526

‎src-docs/src/views/icon/icons.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,12 @@ export const iconTypes = [
8181
'documents',
8282
'dot',
8383
'download',
84+
'dockedBottom',
85+
'dockedDetached',
86+
'dockedLeft',
87+
'dockedRight',
88+
'dockedTakeover',
89+
'dockedTop',
8490
'email',
8591
'empty',
8692
'eql',

‎src/components/icon/__snapshots__/icon.test.tsx.snap‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1833,6 +1833,129 @@ exports[`OuiIcon props type discoverApp is rendered 1`] = `
18331833
</svg>
18341834
`;
18351835

1836+
exports[`OuiIcon props type dockedBottom is rendered 1`] = `
1837+
<svg
1838+
aria-hidden="true"
1839+
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
1840+
focusable="false"
1841+
height="16"
1842+
role="img"
1843+
viewBox="0 0 16 16"
1844+
width="16"
1845+
xmlns="http://www.w3.org/2000/svg"
1846+
>
1847+
<path
1848+
d="M3 1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2Zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z"
1849+
/>
1850+
<path
1851+
d="M3 9.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-3Z"
1852+
/>
1853+
</svg>
1854+
`;
1855+
1856+
exports[`OuiIcon props type dockedDetached is rendered 1`] = `
1857+
<svg
1858+
aria-hidden="true"
1859+
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
1860+
focusable="false"
1861+
height="16"
1862+
role="img"
1863+
viewBox="0 0 16 16"
1864+
width="16"
1865+
xmlns="http://www.w3.org/2000/svg"
1866+
>
1867+
<path
1868+
d="M9 1H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h-1v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h6V1Z"
1869+
/>
1870+
<rect
1871+
height="5"
1872+
rx="0.5"
1873+
width="6"
1874+
x="10"
1875+
/>
1876+
</svg>
1877+
`;
1878+
1879+
exports[`OuiIcon props type dockedLeft is rendered 1`] = `
1880+
<svg
1881+
aria-hidden="true"
1882+
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
1883+
focusable="false"
1884+
height="16"
1885+
role="img"
1886+
viewBox="0 0 16 16"
1887+
width="16"
1888+
xmlns="http://www.w3.org/2000/svg"
1889+
>
1890+
<path
1891+
d="M3 1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2Zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z"
1892+
/>
1893+
<path
1894+
d="M3 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-9Z"
1895+
/>
1896+
</svg>
1897+
`;
1898+
1899+
exports[`OuiIcon props type dockedRight is rendered 1`] = `
1900+
<svg
1901+
aria-hidden="true"
1902+
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
1903+
focusable="false"
1904+
height="16"
1905+
role="img"
1906+
viewBox="0 0 16 16"
1907+
width="16"
1908+
xmlns="http://www.w3.org/2000/svg"
1909+
>
1910+
<path
1911+
d="M3 1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2Zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z"
1912+
/>
1913+
<path
1914+
d="M9 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-9Z"
1915+
/>
1916+
</svg>
1917+
`;
1918+
1919+
exports[`OuiIcon props type dockedTakeover is rendered 1`] = `
1920+
<svg
1921+
aria-hidden="true"
1922+
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
1923+
focusable="false"
1924+
height="16"
1925+
role="img"
1926+
viewBox="0 0 16 16"
1927+
width="16"
1928+
xmlns="http://www.w3.org/2000/svg"
1929+
>
1930+
<path
1931+
d="M3 1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2Zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z"
1932+
/>
1933+
<path
1934+
d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-7Z"
1935+
/>
1936+
</svg>
1937+
`;
1938+
1939+
exports[`OuiIcon props type dockedTop is rendered 1`] = `
1940+
<svg
1941+
aria-hidden="true"
1942+
class="ouiIcon ouiIcon--medium ouiIcon-isLoaded"
1943+
focusable="false"
1944+
height="16"
1945+
role="img"
1946+
viewBox="0 0 16 16"
1947+
width="16"
1948+
xmlns="http://www.w3.org/2000/svg"
1949+
>
1950+
<path
1951+
d="M3 1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2Zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z"
1952+
/>
1953+
<path
1954+
d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-3Z"
1955+
/>
1956+
</svg>
1957+
`;
1958+
18361959
exports[`OuiIcon props type document is rendered 1`] = `
18371960
<svg
18381961
aria-hidden="true"

‎src/components/icon/assets/dockedBottom.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
* SPDX-License-Identifier: Apache-2.0
3+
*
4+
* The OpenSearch Contributors require contributions made to
5+
* this file be licensed under the Apache-2.0 license or a
6+
* compatible open source license.
7+
*
8+
* Modifications Copyright OpenSearch Contributors. See
9+
* GitHub history for details.
10+
*/
11+
12+
import * as React from 'react';
13+
const OuiIconDockedBottom = ({ title, titleId, ...props }) => (
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
width={16}
17+
height={16}
18+
viewBox="0 0 16 16"
19+
aria-labelledby={titleId}
20+
{...props}>
21+
{title ? <title id={titleId}>{title}</title> : null}
22+
<path d="M3 1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2Zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z" />
23+
<path d="M3 9.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-3Z" />
24+
</svg>
25+
);
26+
export const icon = OuiIconDockedBottom;

‎src/components/icon/assets/dockedBottom.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎src/components/icon/assets/dockedDetached.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
* SPDX-License-Identifier: Apache-2.0
3+
*
4+
* The OpenSearch Contributors require contributions made to
5+
* this file be licensed under the Apache-2.0 license or a
6+
* compatible open source license.
7+
*
8+
* Modifications Copyright OpenSearch Contributors. See
9+
* GitHub history for details.
10+
*/
11+
12+
import * as React from 'react';
13+
const OuiIconDockedDetached = ({ title, titleId, ...props }) => (
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
width={16}
17+
height={16}
18+
viewBox="0 0 16 16"
19+
aria-labelledby={titleId}
20+
{...props}>
21+
{title ? <title id={titleId}>{title}</title> : null}
22+
<path d="M9 1H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h-1v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h6V1Z" />
23+
<rect width={6} height={5} x={10} rx={0.5} />
24+
</svg>
25+
);
26+
export const icon = OuiIconDockedDetached;

‎src/components/icon/assets/dockedDetached.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎src/components/icon/assets/dockedLeft.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
* SPDX-License-Identifier: Apache-2.0
3+
*
4+
* The OpenSearch Contributors require contributions made to
5+
* this file be licensed under the Apache-2.0 license or a
6+
* compatible open source license.
7+
*
8+
* Modifications Copyright OpenSearch Contributors. See
9+
* GitHub history for details.
10+
*/
11+
12+
import * as React from 'react';
13+
const OuiIconDockedLeft = ({ title, titleId, ...props }) => (
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
width={16}
17+
height={16}
18+
viewBox="0 0 16 16"
19+
aria-labelledby={titleId}
20+
{...props}>
21+
{title ? <title id={titleId}>{title}</title> : null}
22+
<path d="M3 1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2Zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z" />
23+
<path d="M3 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-9Z" />
24+
</svg>
25+
);
26+
export const icon = OuiIconDockedLeft;

‎src/components/icon/assets/dockedLeft.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎src/components/icon/assets/dockedRight.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
* SPDX-License-Identifier: Apache-2.0
3+
*
4+
* The OpenSearch Contributors require contributions made to
5+
* this file be licensed under the Apache-2.0 license or a
6+
* compatible open source license.
7+
*
8+
* Modifications Copyright OpenSearch Contributors. See
9+
* GitHub history for details.
10+
*/
11+
12+
import * as React from 'react';
13+
const OuiIconDockedRight = ({ title, titleId, ...props }) => (
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
width={16}
17+
height={16}
18+
viewBox="0 0 16 16"
19+
aria-labelledby={titleId}
20+
{...props}>
21+
{title ? <title id={titleId}>{title}</title> : null}
22+
<path d="M3 1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2Zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z" />
23+
<path d="M9 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-9Z" />
24+
</svg>
25+
);
26+
export const icon = OuiIconDockedRight;

0 commit comments

Comments
 (0)