Merge branch 'main' into eslint-bump

Signed-off-by: Josh Romero <[email protected]>
gulderov · Aug 24, 2023 · 1be8011 · 1be8011
2 parents 1de24da + 309e146
commit 1be8011
Show file tree

Hide file tree

Showing 38 changed files with 860 additions and 121 deletions.
diff --git a/.github/workflows/build_and_test.yml b/.github/workflows/build_and_test.yml
@@ -11,9 +11,9 @@ on:
       - '**/*.md'
 
 jobs:
-  build-lint-test:
+  lint-test:
     runs-on: ${{ matrix.os }}
-    name: Build and Verify
+    name: Lint and Test on ${{ matrix.os }}
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest]
@@ -39,3 +39,44 @@ jobs:
 
       - name: Run unit tests
         run: yarn test-unit
+
+  build:
+    runs-on: ubuntu-latest
+    name: Build on ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'yarn'
+
+      - name: Setup Yarn
+        run: |
+          npm uninstall -g yarn
+          npm i -g [email protected]
+          yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn build
+
+      - name: Package artifacts
+        run: yarn pack --filename oui.tgz
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: build
+          path: oui.tgz
+
+      - name: Build Docs
+        run: yarn build-docs
+
+      - name: Upload doc artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: docs
+          path: docs/
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-14.20.0
+18.16.0
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,15 +11,23 @@
 ### 📈 Features/Enhancements
 - Rename the aliased theme files ([#863](https://github.com/opensearch-project/oui/pull/863))
 - 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))
+- Update ouiTextSubduedColor in `next` dark theme ([#973](https://github.com/opensearch-project/oui/pull/973))
+- 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))
+- Update next light theme primary color to #07827E ([#981](https://github.com/opensearch-project/oui/pull/981))
 
 ### 🐛 Bug Fixes
 
+- Fix blurry text in breadcrumbs by avoiding skewing text ([#959](https://github.com/opensearch-project/oui/pull/959))
+
 ### 🚞 Infrastructure
 
 - Add release workflows ([#134](https://github.com/opensearch-project/oui/pull/133))
 - Change PR template and add changelog workflow ([#642](https://github.com/opensearch-project/oui/pull/642))
 - Upgrade the backport workflow ([#862](https://github.com/opensearch-project/oui/pull/862))
+- Add build steps to CI workflow ([#665](https://github.com/opensearch-project/oui/pull/665))
 
 ### 📝 Documentation
 
@@ -31,9 +39,13 @@
 - [CVE-2023-26115] Bump word-wrap from 1.2.3 to 1.2.4 ([#891](https://github.com/opensearch-project/oui/pull/891))
 - Bump eslint to 8.46.0 ([#952](https://github.com/opensearch-project/oui/pull/952))
 - Bump prettier to 3.0.1 ([#952](https://github.com/opensearch-project/oui/pull/952))
+- Bump Node version to 18.16.0 ([#900](https://github.com/opensearch-project/oui/pull/900))
+- Bump `node-sass` to a patched version based on `[email protected]` ([#977](https://github.com/opensearch-project/oui/pull/977)); see [patch commit](https://github.com/AMoo-Miki/node-sass/commit/43c74c0966b05c1e21a1e5e20a0c467ec8e669b4) for details.
 
 ### 🪛 Refactoring
 
+- Clean up focus background implementation ([#962](https://github.com/opensearch-project/oui/pull/962))
+
 ### 🔩 Tests
 
 ## [`1.1.1`](https://github.com/opensearch-project/oui/tree/1.1.1)

diff --git a/package.json b/package.json
@@ -204,7 +204,7 @@
     "expose-gc": "^1.0.0",
     "file-loader": "^6.1.0",
     "findup": "^0.1.5",
-    "fork-ts-checker-webpack-plugin": "^5.1.0",
+    "fork-ts-checker-webpack-plugin": "^6.5.3",
     "get-port": "^5.1.1",
     "glob": "^8.1.0",
     "html": "^1.0.0",
@@ -214,7 +214,7 @@
     "jest-cli": "^24.1.0",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.41",
-    "node-sass": "^8.0.0",
+    "node-sass": "npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5",
     "pegjs": "^0.10.0",
     "postcss-cli": "^7.1.2",
     "postcss-inline-svg": "^4.1.0",
@@ -239,15 +239,15 @@
     "sass-extract": "^2.1.0",
     "sass-lint": "^1.13.1",
     "sass-lint-auto-fix": "^0.21.2",
-    "sass-loader": "^10.0.1",
+    "sass-loader": "npm:@bsfishy/sass-loader@node-sass-9",
     "sass-vars-to-js-loader": "^2.1.1",
     "shelljs": "^0.8.5",
     "start-server-and-test": "^2.0.0",
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^4.1.0",
     "typescript": "4.0.5",
     "url-loader": "^4.1.0",
-    "webpack": "^4.44.1",
+    "webpack": "npm:@amoo-miki/[email protected]",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0",
     "yeoman-generator": "^5.8.0",

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
@@ -26,7 +26,9 @@ $elasticLogoTextDark: #1C1E23;
   }
 }
 
-@include ouiHeaderAffordForFixed;
+body {
+  @include ouiHeaderAffordForFixed;
+}
 
 .ouiBody--headerIsFixed--double {
   @include ouiHeaderAffordForFixed($ouiHeaderHeightCompensation * 2);

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 />,
+    },
+  ],
+};