Schema-item (opensearch-project#974)

* Adds SchemaItem Signed-off-by: Ashwin P Chandran <[email protected]> * updates snapshot Signed-off-by: Ashwin P Chandran <[email protected]> * Adds changelog entry Signed-off-by: Ashwin P Chandran <[email protected]> * push fix changelog Signed-off-by: Ashwin P Chandran <[email protected]> * Address PR comments Signed-off-by: Ashwin P Chandran <[email protected]> --------- Signed-off-by: Ashwin P Chandran <[email protected]>
joshuarrrr · Aug 22, 2023 · f3d42ef · f3d42ef
1 parent 693ae40
commit f3d42ef
Show file tree

Hide file tree

Showing 13 changed files with 577 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@
 - Fix `autofill` text color in dark themes ([#871](https://github.com/opensearch-project/oui/pull/871))
 - [Header] Update background color in next theme ([#936](https://github.com/opensearch-project/oui/pull/936))
 - Set link to use semi bold font weight ([#961](https://github.com/opensearch-project/oui/pull/961))
+- Adds `SchemaItem` as an experimental component ([#974](https://github.com/opensearch-project/oui/pull/974))
 - Make `CollapsibleNavGroup` background colors theme-able ([#968](https://github.com/opensearch-project/oui/pull/968))
 
 ### 🐛 Bug Fixes

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
@@ -187,6 +187,8 @@ import { ResizableContainerExample } from './views/resizable_container/resizable
 
 import { ResponsiveExample } from './views/responsive/responsive_example';
 
+import { SchemaExample } from './views/schema/schema_example';
+
 import { SearchBarExample } from './views/search_bar/search_bar_example';
 
 import { SelectableExample } from './views/selectable/selectable_example';
@@ -399,6 +401,7 @@ const navigation = [
       LoadingExample,
       NotificationEventExample,
       ProgressExample,
+      SchemaExample,
       StatExample,
       TextExample,
       TitleExample,

diff --git a/src-docs/src/views/schema/schema.tsx b/src-docs/src/views/schema/schema.tsx
@@ -0,0 +1,142 @@
+/*
+ * 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 { OuiSchemaItem } from '../../../../src/components/schema';
+import { OuiSpacer } from '../../../../src/components/spacer';
+
+export default () => (
+  <>
+    <OuiSchemaItem label="Simple" />
+    <OuiSchemaItem iconType="tokenString" label="Simple with icon" />
+    <OuiSchemaItem
+      iconType="tokenShape"
+      label="Icon and actions"
+      actions={[
+        {
+          iconType: 'trash',
+          'aria-label': 'Delete',
+          onClick: () => {},
+          color: 'danger',
+        },
+        {
+          iconType: 'pencil',
+          'aria-label': 'Edit',
+          onClick: () => {},
+          tooltip: {
+            content: 'Edit',
+            position: 'top',
+            delay: 'long',
+          },
+        },
+      ]}
+    />
+    <OuiSchemaItem
+      iconType="tokenShape"
+      label="Compressed with icon and actions"
+      actions={[
+        {
+          iconType: 'trash',
+          'aria-label': 'Delete',
+          onClick: () => {},
+          color: 'danger',
+        },
+        {
+          iconType: 'pencil',
+          'aria-label': 'Edit',
+          onClick: () => {},
+          tooltip: {
+            content: 'Edit',
+            position: 'top',
+            delay: 'long',
+          },
+        },
+      ]}
+      compressed
+    />
+    <OuiSpacer />
+    <OuiSchemaItem
+      iconType="tokenShape"
+      label="With a panel"
+      actions={[
+        {
+          iconType: 'trash',
+          'aria-label': 'Delete',
+          onClick: () => {},
+          color: 'danger',
+        },
+        {
+          iconType: 'pencil',
+          'aria-label': 'Edit',
+          onClick: () => {},
+          tooltip: {
+            content: 'Edit',
+            position: 'top',
+            delay: 'long',
+          },
+        },
+      ]}
+      withPanel
+    />
+    <OuiSpacer />
+    <OuiSchemaItem
+      iconType="tokenShape"
+      label="With a panel and compressed"
+      actions={[
+        {
+          iconType: 'trash',
+          'aria-label': 'Delete',
+          onClick: () => {},
+          color: 'danger',
+        },
+        {
+          iconType: 'pencil',
+          'aria-label': 'Edit',
+          onClick: () => {},
+          tooltip: {
+            content: 'Edit',
+            position: 'top',
+            delay: 'long',
+          },
+        },
+      ]}
+      withPanel
+      compressed
+    />
+    <OuiSpacer />
+    <div style={{ width: '300px' }}>
+      <OuiSchemaItem
+        iconType="tokenShape"
+        label="A very long label that will wrap with a panel for good measure"
+        actions={[
+          {
+            iconType: 'trash',
+            'aria-label': 'Delete',
+            onClick: () => {},
+            color: 'danger',
+          },
+          {
+            iconType: 'pencil',
+            'aria-label': 'Edit',
+            onClick: () => {},
+            tooltip: {
+              content: 'Edit',
+              position: 'top',
+              delay: 'long',
+            },
+          },
+        ]}
+        withPanel
+      />
+    </div>
+  </>
+);
diff --git a/src-docs/src/views/schema/schema_example.js b/src-docs/src/views/schema/schema_example.js
@@ -0,0 +1,73 @@
+/*
+ * 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 { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import { OuiSchemaItem } from '../../../../src/components';
+
+import Schema from './schema';
+const schemaSource = require('!!raw-loader!./schema');
+const schemaHtml = renderToHtml(Schema);
+
+import SchemaGroup from './schema_group';
+const schemaGroupSource = require('!!raw-loader!./schema');
+const schemaGroupHtml = renderToHtml(Schema);
+
+export const SchemaExample = {
+  title: 'Schema',
+  isExperimental: true,
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: schemaSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: schemaHtml.render(),
+        },
+      ],
+      text: (
+        <p>
+          This is the basic <strong>OuiSchemaItem</strong> component.
+        </p>
+      ),
+      props: { OuiSchemaItem },
+      demo: <Schema />,
+    },
+    {
+      title: 'SchemaItem as a list',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: schemaGroupSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: schemaGroupHtml,
+        },
+      ],
+      text: (
+        <p>
+          Grouping <strong>OuiSchemaItem</strong> with{' '}
+          <strong>OuiFlexGroup</strong> to make a list.
+        </p>
+      ),
+      props: { OuiSchemaItem },
+      demo: <SchemaGroup />,
+    },
+  ],
+};
diff --git a/src-docs/src/views/schema/schema_group.tsx b/src-docs/src/views/schema/schema_group.tsx
@@ -0,0 +1,81 @@
+/*
+ * 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 { OuiSchemaItem } from '../../../../src/components/schema';
+import { OuiFlexGroup, OuiFlexItem } from '../../../../src/components/flex';
+import { OuiSpacer } from '../../../../src/components/spacer';
+
+export default () => {
+  const actions = [
+    {
+      iconType: 'trash',
+      'aria-label': 'Delete',
+      onClick: () => {},
+      color: 'danger' as const,
+    },
+    {
+      iconType: 'pencil',
+      'aria-label': 'Edit',
+      onClick: () => {},
+      tooltip: {
+        content: 'Edit',
+        position: 'top' as const,
+        delay: 'long' as const,
+      },
+    },
+  ];
+
+  const items = Array.from({ length: 5 }, (_, i) => ({
+    key: `item${i}`,
+    iconType: 'tokenShape',
+    label: `Item no ${i + 1}`,
+    actions,
+  }));
+
+  items.push({
+    key: 'last',
+    iconType: 'tokenShape',
+    label: 'Item with a really long label that will wrap',
+    actions,
+  });
+
+  return (
+    <>
+      <p>As a list</p>
+      <OuiSpacer size="m" />
+      <OuiFlexGroup
+        style={{ width: '300px' }}
+        direction="column"
+        gutterSize="none">
+        {items.map((item) => (
+          <OuiFlexItem>
+            <OuiSchemaItem {...item} compressed />
+          </OuiFlexItem>
+        ))}
+      </OuiFlexGroup>
+      <OuiSpacer size="m" />
+      <p>With panels</p>
+      <OuiSpacer size="m" />
+      <OuiFlexGroup
+        style={{ width: '300px' }}
+        direction="column"
+        gutterSize="s">
+        {items.map((item) => (
+          <OuiFlexItem>
+            <OuiSchemaItem {...item} withPanel />
+          </OuiFlexItem>
+        ))}
+      </OuiFlexGroup>
+    </>
+  );
+};
diff --git a/src/components/index.js b/src/components/index.js
@@ -297,6 +297,8 @@ export {
   useResizeObserver,
 } from './observer/resize_observer';
 
+export { OuiSchemaItem } from './schema';
+
 export { OuiSearchBar, Query, Ast } from './search_bar';
 
 export {

diff --git a/src/components/index.scss b/src/components/index.scss
@@ -65,6 +65,7 @@
 @import 'progress/index';
 @import 'tree_view/index';
 @import 'resizable_container/index';
+@import 'schema/index';
 @import 'side_nav/index';
 @import 'spacer/index';
 @import 'search_bar/index';

diff --git a/src/components/schema/__snapshots__/schema_item.test.tsx.snap b/src/components/schema/__snapshots__/schema_item.test.tsx.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OuiSchema is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="ouiSchemaItem testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="ouiSchemaItem__label"
+  >
+    Test
+  </div>
+  <div
+    class="ouiSchemaItem__actions"
+  />
+</div>
+`;
+
+exports[`OuiSchema it renders compressed correctly 1`] = `
+<div
+  aria-label="aria-label"
+  class="ouiSchemaItem ouiSchemaItem--compressed testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="ouiSchemaItem__label"
+  >
+    Test
+  </div>
+  <div
+    class="ouiSchemaItem__actions"
+  />
+</div>
+`;
diff --git a/src/components/schema/_index.scss b/src/components/schema/_index.scss
@@ -0,0 +1,12 @@
+/*!
+ * 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 'schema_item';