From fe979c3662afc5e4b620f05c838d4b98beb7573e Mon Sep 17 00:00:00 2001 From: Matt Provost Date: Mon, 14 Aug 2023 10:27:01 -0700 Subject: [PATCH 01/13] Fix blurry breadcrumb text (#959) * Fix blurry breadcrumb text Signed-off-by: Matt Provost * Update changelog Signed-off-by: Matt Provost * Address reviews Signed-off-by: Matt Provost --------- Signed-off-by: Matt Provost --- CHANGELOG.md | 2 + src/components/breadcrumbs/_breadcrumbs.scss | 54 +++++++++++-------- src/components/breadcrumbs/_variables.scss | 14 ++--- src/themes/oui-next/oui_next_colors_dark.scss | 10 ---- src/themes/oui/oui_colors_dark.scss | 10 ---- 5 files changed, 41 insertions(+), 49 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b99aad65a2..a0de495ea5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,8 @@ ### 🐛 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)) diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss index c27e3878a7..abd7db5346 100644 --- a/src/components/breadcrumbs/_breadcrumbs.scss +++ b/src/components/breadcrumbs/_breadcrumbs.scss @@ -25,10 +25,10 @@ .ouiBreadcrumb { display: inline-block; - transform: skewX(20deg); &:not(.ouiBreadcrumb--last) { - color: $ouiTextSubduedColor; + // TODO: remove important: https://github.com/opensearch-project/oui/issues/376 + color: $ouiBreadcrumbInactiveTextColor !important; // sass-lint:disable-line no-important &:hover { color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important @@ -36,13 +36,13 @@ } } -.ouiBreadcrumb--last { +.ouiBreadcrumbs:not(.ouiBreadcrumbs__inPopover) .ouiBreadcrumb--last { font-weight: $ouiFontWeightMedium; } .ouiBreadcrumb--collapsed { flex-shrink: 0; - color: $ouiBreadcrumbCollapsedLink; + color: $ouiBreadcrumbCollapsedLink !important; // sass-lint:disable-line no-important vertical-align: top !important; // sass-lint:disable-line no-important } @@ -50,11 +50,6 @@ color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important } -.ouiBreadcrumbs__inPopover .ouiBreadcrumb--last { - font-weight: $ouiFontWeightRegular; - color: $ouiColorDarkShade !important; // sass-lint:disable-line no-important -} - .ouiBreadcrumbs--truncate { white-space: nowrap; flex-wrap: nowrap; @@ -89,32 +84,45 @@ } .ouiBreadcrumbWrapper { - background-color: $ouiBreadcrumbGrayBackground; - transform: skewX(-20deg); - border-radius: $ouiSizeXS; + position: relative; + z-index: 0; padding: $ouiSizeXS - 2.5 $ouiSizeL - $ouiSizeXS; + padding-right: $ouiSizeL - $ouiSizeXS + $ouiBreadcrumbSpacing / 2; + + &::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: $ouiBreadcrumbSpacing / 2; + right: $ouiBreadcrumbSpacing / 2; + z-index: -1; + + transform: skewX(-20deg); + border-radius: $ouiSizeXS; + } - &:not(.ouiBreadcrumbWrapper--first) { - margin-bottom: $ouiSizeXS; /* 1 */ + &:not(.ouiBreadcrumbWrapper--last)::before { + background-color: $ouiBreadcrumbInactiveBackground; } - &:not(.ouiBreadcrumbWrapper--last), - &.ouiBreadcrumbWrapper--first.ouiBreadcrumbWrapper--last { - margin-right: $ouiBreadcrumbSpacing; + &.ouiBreadcrumbWrapper--last::before { + background-color: $ouiBreadcrumbActiveBackground; + } + + &:not(.ouiBreadcrumbWrapper--first) { + margin-bottom: $ouiSizeXS; /* 1 */ + padding-left: $ouiSizeL - $ouiSizeXS + $ouiBreadcrumbSpacing / 2; } } .ouiBreadcrumbWall { - background-image: linear-gradient(to right, $ouiBreadcrumbGrayBackground 0 $ouiSizeM, transparent $ouiSizeM); + background-image: linear-gradient(to right, $ouiBreadcrumbInactiveBackground 0 $ouiSizeM, transparent $ouiSizeM); border-radius: $ouiSizeXS; overflow: hidden; margin-bottom: $ouiSizeXS; /* 1 */ } .ouiBreadcrumbWall--single { - background-image: linear-gradient(to right, $ouiBreadcrumbBlueBackground 0 $ouiSizeM, transparent $ouiSizeM); -} - -.ouiBreadcrumbWrapper--last { - background-color: $ouiBreadcrumbBlueBackground; + background-image: linear-gradient(to right, $ouiBreadcrumbActiveBackground 0 $ouiSizeM, transparent $ouiSizeM); } diff --git a/src/components/breadcrumbs/_variables.scss b/src/components/breadcrumbs/_variables.scss index 410185953b..e5c2d5a045 100644 --- a/src/components/breadcrumbs/_variables.scss +++ b/src/components/breadcrumbs/_variables.scss @@ -12,17 +12,19 @@ $ouiBreadcrumbSpacing: $ouiSizeS !default; $ouiBreadcrumbTruncateWidth: $ouiSize * 10 !default; -$ouiBreadcrumbBlueBackground: #B9D9EB !default; -$ouiBreadcrumbGrayBackground: #D9E1E2 !default; -$ouiBreadcrumbCollapsedLink: #002A3A !default; -$ouiBreadCrumbHoverColor: #535861 !default; +$ouiBreadcrumbActiveBackground: tintOrShade($ouiColorPrimary, 72%, 41%) !default; +$ouiBreadcrumbInactiveBackground: tint($ouiColorLightShade, 14%) !default; +$ouiBreadcrumbCollapsedLink: shadeOrTint($ouiColorPrimaryText, 61%, 20%) !default; +$ouiBreadcrumbInactiveTextColor: makeHighContrastColor($ouiTextSubduedColor, $ouiBreadcrumbInactiveBackground) !default; +$ouiBreadCrumbHoverColor: shadeOrTint($ouiBreadcrumbInactiveTextColor, 16%, 6%) !default; /* OUI -> EUI Aliases */ $euiBreadcrumbSpacing: $ouiBreadcrumbSpacing; $euiBreadcrumbTruncateWidth: $ouiBreadcrumbTruncateWidth; -$euiBreadcrumbBlueBackground: $ouiBreadcrumbBlueBackground; -$euiBreadcrumbGrayBackground: $ouiBreadcrumbGrayBackground; +$euiBreadcrumbActiveBackground: $ouiBreadcrumbActiveBackground; +$euiBreadcrumbInactiveBackground: $ouiBreadcrumbInactiveBackground; $euiBreadcrumbCollapsedLink: $ouiBreadcrumbCollapsedLink; +$euiBreadcrumbInactiveTextColor: $ouiBreadcrumbInactiveTextColor; $euiBreadCrumbHoverColor: $ouiBreadCrumbHoverColor; /* End of Aliases */ diff --git a/src/themes/oui-next/oui_next_colors_dark.scss b/src/themes/oui-next/oui_next_colors_dark.scss index a9131fe2e3..6a453336bf 100644 --- a/src/themes/oui-next/oui_next_colors_dark.scss +++ b/src/themes/oui-next/oui_next_colors_dark.scss @@ -62,12 +62,6 @@ $ouiColorChartBand: tint($ouiColorLightestShade, 2.5%); $ouiShadowColor: #000; $ouiShadowColorLarge: #000; -// Breadcrumbs -$ouiBreadcrumbBlueBackground: #163F66; -$ouiBreadcrumbGrayBackground: #4C636F; -$ouiBreadcrumbCollapsedLink: #FFF; -$ouiBreadCrumbHoverColor: #B0B8BB; - /* OUI -> EUI Aliases */ $euiColorGhost: $ouiColorGhost; @@ -103,8 +97,4 @@ $euiColorChartLines: $ouiColorChartLines; $euiColorChartBand: $ouiColorChartBand; $euiShadowColor: $ouiShadowColor; $euiShadowColorLarge: $ouiShadowColorLarge; -$euiBreadcrumbBlueBackground: $ouiBreadcrumbBlueBackground; -$euiBreadcrumbGrayBackground: $ouiBreadcrumbGrayBackground; -$euiBreadcrumbCollapsedLink: $ouiBreadcrumbCollapsedLink; -$euiBreadCrumbHoverColor: $ouiBreadCrumbHoverColor; /* End of Aliases */ diff --git a/src/themes/oui/oui_colors_dark.scss b/src/themes/oui/oui_colors_dark.scss index 2981bb3a82..4ea79a931c 100644 --- a/src/themes/oui/oui_colors_dark.scss +++ b/src/themes/oui/oui_colors_dark.scss @@ -62,12 +62,6 @@ $ouiColorChartBand: tint($ouiColorLightestShade, 2.5%); $ouiShadowColor: #000; $ouiShadowColorLarge: #000; -// Breadcrumbs -$ouiBreadcrumbBlueBackground: #163F66; -$ouiBreadcrumbGrayBackground: #4C636F; -$ouiBreadcrumbCollapsedLink: #FFF; -$ouiBreadCrumbHoverColor: #B0B8BB; - /* OUI -> EUI Aliases */ $euiColorGhost: $ouiColorGhost; @@ -103,8 +97,4 @@ $euiColorChartLines: $ouiColorChartLines; $euiColorChartBand: $ouiColorChartBand; $euiShadowColor: $ouiShadowColor; $euiShadowColorLarge: $ouiShadowColorLarge; -$euiBreadcrumbBlueBackground: $ouiBreadcrumbBlueBackground; -$euiBreadcrumbGrayBackground: $ouiBreadcrumbGrayBackground; -$euiBreadcrumbCollapsedLink: $ouiBreadcrumbCollapsedLink; -$euiBreadCrumbHoverColor: $ouiBreadCrumbHoverColor; /* End of Aliases */ From 62d5c8c8df0cf0a94510ad2e0f48aa83691219c4 Mon Sep 17 00:00:00 2001 From: Matt Provost Date: Mon, 14 Aug 2023 15:58:11 -0700 Subject: [PATCH 02/13] Add build steps to workflow (#665) * Add build steps to workflow Signed-off-by: Matt Provost * Add path filter Signed-off-by: Matt Provost * Remove path filter Signed-off-by: Matt Provost * Update yarn version for build CI Signed-off-by: Matt Provost * Remove Windows from build CI Signed-off-by: Matt Provost * Revert yarn version and add changlog entry Signed-off-by: Matt Provost * Remove workflow matrix Signed-off-by: Matt Provost * Add artifact upload steps Signed-off-by: Matt Provost * Set workflow to upload artifacts as package Signed-off-by: Matt Provost --------- Signed-off-by: Matt Provost Co-authored-by: Josh Romero --- .github/workflows/build_and_test.yml | 45 ++++++++++++++++++++++++++-- CHANGELOG.md | 1 + 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/.github/workflows/build_and_test.yml b/.github/workflows/build_and_test.yml index 60c4efbe5a..8abff5ecd0 100644 --- 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 yarn@1.22.10 + 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/CHANGELOG.md b/CHANGELOG.md index a0de495ea5..11b80f65ef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ - 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 From c21c1490fc5adbcdd6686afb0798933391c03ae9 Mon Sep 17 00:00:00 2001 From: Matt Provost Date: Mon, 14 Aug 2023 16:17:53 -0700 Subject: [PATCH 03/13] Set link to use semi bold font weight (#961) * Set link to use semi bold font weight Signed-off-by: Matt Provost * Update changelog Signed-off-by: Matt Provost --------- Signed-off-by: Matt Provost --- CHANGELOG.md | 1 + src/components/link/_mixins.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 11b80f65ef..08b1397639 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ ### 📈 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)) +- Set link to use semi bold font weight ([#961](https://github.com/opensearch-project/oui/pull/961)) ### 🐛 Bug Fixes diff --git a/src/components/link/_mixins.scss b/src/components/link/_mixins.scss index 1d5ede155a..038ba49932 100644 --- a/src/components/link/_mixins.scss +++ b/src/components/link/_mixins.scss @@ -11,6 +11,7 @@ @mixin ouiLink { text-align: left; + font-weight: 600; &:hover { text-decoration: underline; From 807c4cd19e9eed77ff5a5293ae4469e6b863c27c Mon Sep 17 00:00:00 2001 From: Miki Date: Tue, 15 Aug 2023 10:46:45 -0700 Subject: [PATCH 04/13] Bump `node-sass` to a patched version based on `libsass@3.6.5` (#912) Signed-off-by: Miki --- CHANGELOG.md | 1 + package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 08b1397639..7b70d79802 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,7 @@ - [CVE-2023-26136] Add resolution for tough-cookie to ^4.1.3 ([#889](https://github.com/opensearch-project/oui/pull/889)) - [CVE-2023-26115] Bump word-wrap from 1.2.3 to 1.2.4 ([#891](https://github.com/opensearch-project/oui/pull/891)) +- Bump `node-sass` to a patched version based on `libsass@3.6.5` ([#912](https://github.com/opensearch-project/oui/pull/912)); see [patch commit](https://github.com/AMoo-Miki/node-sass/commit/43c74c0966b05c1e21a1e5e20a0c467ec8e669b4) for details. ### 🪛 Refactoring diff --git a/package.json b/package.json index cade00549b..ce5c7019e1 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index 882df195cd..f19267f6fe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11729,10 +11729,10 @@ node-releases@^2.0.8: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f" integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w== -node-sass@^8.0.0: - version "8.0.0" - resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-8.0.0.tgz#c80d52148db0ce88610bcf1e1d112027393c13e1" - integrity sha512-jPzqCF2/e6JXw6r3VxfIqYc8tKQdkj5Z/BDATYyG6FL6b/LuYBNFGFVhus0mthcWifHm/JzBpKAd+3eXsWeK/A== +"node-sass@npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5": + version "9.0.0-libsass-3.6.5" + resolved "https://registry.yarnpkg.com/@amoo-miki/node-sass/-/node-sass-9.0.0-libsass-3.6.5.tgz#0536f4890b2a7a9143ce536f0fecde0a02ee389b" + integrity sha512-KalEkSO9qBbenHS1fXwz6UAf3x2oUKguJ6DRbTyDn8lYiZqNrEcbaD3hE8eZiLOrH662n8MF7fVzLp+oMQNiEA== dependencies: async-foreach "^0.1.3" chalk "^4.1.2" From 1ff64938a4ab355cd6a61ef5c0fcae33ce27ccf8 Mon Sep 17 00:00:00 2001 From: Matt Provost Date: Wed, 16 Aug 2023 12:13:14 -0700 Subject: [PATCH 05/13] Bump node version to 18.16.0 (#900) * Bump node version to 18.16.0 Signed-off-by: Matt Provost * Update changelog Signed-off-by: Matt Provost --------- Signed-off-by: Matt Provost --- .nvmrc | 2 +- CHANGELOG.md | 1 + package.json | 4 +- yarn.lock | 151 +++++++++++++++++++++++++++++++++++++++------------ 4 files changed, 120 insertions(+), 38 deletions(-) diff --git a/.nvmrc b/.nvmrc index a3eb5a03fa..6d80269a4f 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -14.20.0 +18.16.0 diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b70d79802..68c6985d6b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,7 @@ - [CVE-2023-26136] Add resolution for tough-cookie to ^4.1.3 ([#889](https://github.com/opensearch-project/oui/pull/889)) - [CVE-2023-26115] Bump word-wrap from 1.2.3 to 1.2.4 ([#891](https://github.com/opensearch-project/oui/pull/891)) +- 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 `libsass@3.6.5` ([#912](https://github.com/opensearch-project/oui/pull/912)); see [patch commit](https://github.com/AMoo-Miki/node-sass/commit/43c74c0966b05c1e21a1e5e20a0c467ec8e669b4) for details. ### 🪛 Refactoring diff --git a/package.json b/package.json index ce5c7019e1..f3009e8546 100644 --- 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", @@ -247,7 +247,7 @@ "terser-webpack-plugin": "^4.1.0", "typescript": "4.0.5", "url-loader": "^4.1.0", - "webpack": "^4.44.1", + "webpack": "npm:@amoo-miki/webpack@4.46.0-rc.2", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0", "yeoman-generator": "^5.8.0", diff --git a/yarn.lock b/yarn.lock index f19267f6fe..c059d722ab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1647,6 +1647,90 @@ "@types/underscore" "^1.8.13" underscore "^1.9.1" +"@node-rs/xxhash-android-arm-eabi@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@node-rs/xxhash-android-arm-eabi/-/xxhash-android-arm-eabi-1.4.2.tgz#936b6b9b78035e1d136dd7bdf8296ad31fe1f4af" + integrity sha512-6aonl3wNY/axTiW9jSz+Z2RduP2xCZTgX1M1ur8uCJcUVv/kkv+dEMFb3o/k19qBGntPWvGXZTj2mYO6onDr/g== + +"@node-rs/xxhash-android-arm64@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@node-rs/xxhash-android-arm64/-/xxhash-android-arm64-1.4.2.tgz#4a51efb021ffeaad9c36ec85e21233166e27c17c" + integrity sha512-Uhwsk3mp++Op2Sl/TzR1VfFqHx5sGMAwQGhQKThc/w8QSrDNfWKd1R9rjohIDWeNbmRguUCDPEKEOZwGewWacw== + +"@node-rs/xxhash-darwin-arm64@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@node-rs/xxhash-darwin-arm64/-/xxhash-darwin-arm64-1.4.2.tgz#f51f02ccc0dd734db171c75a00a3cc0b2aceb595" + integrity sha512-0JYLJQ9C8prYbPPr3WlScYnAgIxLwitUwx2FnxNmBNH9bCDFoMdFXylzlxdYPHEYcXMsvWWcOnf9cESBH0WqzA== + +"@node-rs/xxhash-darwin-x64@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@node-rs/xxhash-darwin-x64/-/xxhash-darwin-x64-1.4.2.tgz#cf70a5c5558dd825c1eb67e497f6c4dd1f0cc1ca" + integrity sha512-9CMuC7PZqHDaPCnOUrW6AIL+2gzLq22klGKBRXHXVfUELuNEqp7N0HyHheoQ99U0otCNnsA54zkfBw9cL1pcIA== + +"@node-rs/xxhash-freebsd-x64@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@node-rs/xxhash-freebsd-x64/-/xxhash-freebsd-x64-1.4.2.tgz#5ce9441127fab0709189ccef5a24c328a0de233d" + integrity sha512-pPvuivkR3oyZ6DocgX6LSN2GpgF6Z4DK8M0UwDlY5P2wAUoi1JIOJBLjOrQmiaCUIIGCTTDBKTPwgIDUh6A7mg== + +"@node-rs/xxhash-linux-arm-gnueabihf@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@node-rs/xxhash-linux-arm-gnueabihf/-/xxhash-linux-arm-gnueabihf-1.4.2.tgz#897e5612782279aff7d45b1a1a09e68f5b9709b6" + integrity sha512-LzI9WMW2scTG3/87/9j+oE0njz1o/2s7c61h1rEZyP1WBGA1cZ2xn3wAnwqFOPKE3s7QvONXoYjMMqa+BtDNNg== + +"@node-rs/xxhash-linux-arm64-gnu@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@node-rs/xxhash-linux-arm64-gnu/-/xxhash-linux-arm64-gnu-1.4.2.tgz#46417a0253efd4d0b972f1b501d269590036a109" + integrity sha512-BeOlxfDzdnYRfK0nEyG8gpA6AGpamZVe2FNBl96xB5eVYiPp8PhIFLFsfoPURqa/Abm8+JV+QHzf3sngD1Gr+Q== + +"@node-rs/xxhash-linux-arm64-musl@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@node-rs/xxhash-linux-arm64-musl/-/xxhash-linux-arm64-musl-1.4.2.tgz#3ea61d8236c0a36316130d167075a838508a47e7" + integrity sha512-u6l7mE5jmEWwUghZbfVHhhN9pMDkE0pjxjZu52bd8Ohk8LkbFDOJVNG2AWkWkjdInP31PmhvtCgE2laKCCQeRQ== + +"@node-rs/xxhash-linux-x64-gnu@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@node-rs/xxhash-linux-x64-gnu/-/xxhash-linux-x64-gnu-1.4.2.tgz#6165e3a5db08f88a0c47ad4d93ab464212e5ecad" + integrity sha512-h3FUuuDBGdJ42HgA9lxX9cNSussF1lO/04OKXkVuJGRPR6mBCqBZ9SPNhzSk2PyYEqHimXIBYr+CdDRCS1xsfQ== + +"@node-rs/xxhash-linux-x64-musl@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@node-rs/xxhash-linux-x64-musl/-/xxhash-linux-x64-musl-1.4.2.tgz#6668fd667f25cd2ff60a7f15e406e2e0cb5c9b56" + integrity sha512-W3/lMn1IBeTAcYVJEycxeyiMLD05M7OGsCZLAE0PB/t8dC+tH5jayVrYRhj+ZznK3V3pZfZb7cCVvZD2eCMb3g== + +"@node-rs/xxhash-win32-arm64-msvc@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@node-rs/xxhash-win32-arm64-msvc/-/xxhash-win32-arm64-msvc-1.4.2.tgz#674fad808e8569ebd75f38fb22f9bee119864bda" + integrity sha512-53WhZY+khV/d8qmbLimCLXptq6/r1KD61Hi8I96KWxP6WiDl7Himhi5Pm2SbA2YK1WA3xPCaHj/LkPRks8Zi2g== + +"@node-rs/xxhash-win32-ia32-msvc@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@node-rs/xxhash-win32-ia32-msvc/-/xxhash-win32-ia32-msvc-1.4.2.tgz#8b5b47051c555516fcc23c232497c5af42d31489" + integrity sha512-F1gWrwrNmw9rjxGphsDw9iGttXDEaGnAAj9U14+9n3WREMsmCRsKfoSZ41ln9KHH8hEABsxL15Tiutm++S3LmA== + +"@node-rs/xxhash-win32-x64-msvc@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@node-rs/xxhash-win32-x64-msvc/-/xxhash-win32-x64-msvc-1.4.2.tgz#6dc64bd8e3461398e2caebe6b895b687bee9a80c" + integrity sha512-d7CUKK3IFYbED/0w6RosCKWL/RODfmA6yMfQdu3BZvh9Y8GTjRLE+DAIOOklP9Rb9qkKYSyzp2ALrHSkrHdRXQ== + +"@node-rs/xxhash@^1.3.0": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@node-rs/xxhash/-/xxhash-1.4.2.tgz#91e4c74db14e7f078c06359a2ff2f85c3a24b84d" + integrity sha512-PvFTpG5z8tdXdZNkHUpjHDnBAKLxn6Xwp4yH8nfuVA2NcO3J970IHnm9yWcs9VVNwLr2aJx0lb8OvBAuLUNiEw== + optionalDependencies: + "@node-rs/xxhash-android-arm-eabi" "1.4.2" + "@node-rs/xxhash-android-arm64" "1.4.2" + "@node-rs/xxhash-darwin-arm64" "1.4.2" + "@node-rs/xxhash-darwin-x64" "1.4.2" + "@node-rs/xxhash-freebsd-x64" "1.4.2" + "@node-rs/xxhash-linux-arm-gnueabihf" "1.4.2" + "@node-rs/xxhash-linux-arm64-gnu" "1.4.2" + "@node-rs/xxhash-linux-arm64-musl" "1.4.2" + "@node-rs/xxhash-linux-x64-gnu" "1.4.2" + "@node-rs/xxhash-linux-x64-musl" "1.4.2" + "@node-rs/xxhash-win32-arm64-msvc" "1.4.2" + "@node-rs/xxhash-win32-ia32-msvc" "1.4.2" + "@node-rs/xxhash-win32-x64-msvc" "1.4.2" + "@nodelib/fs.scandir@2.1.3": version "2.1.3" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b" @@ -4455,7 +4539,7 @@ chokidar@^3.3.0, chokidar@^3.4.1: optionalDependencies: fsevents "~2.1.2" -chokidar@^3.5.3: +chokidar@^3.4.2, chokidar@^3.5.3: version "3.5.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== @@ -7528,17 +7612,19 @@ forever-agent@~0.6.1: resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91" integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE= -fork-ts-checker-webpack-plugin@^5.1.0: - version "5.1.0" - resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.1.0.tgz#586fbee24aeea950c53bab529e32017f543e71cf" - integrity sha512-vuKyEjSLGbhQbEr5bifXXOkr9iV73L6n72mHoHIv7okvrf7O7z6RKeplM6C6ATPsukoQivij+Ba1vcptL60Z2g== +fork-ts-checker-webpack-plugin@^6.5.3: + version "6.5.3" + resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz#eda2eff6e22476a2688d10661688c47f611b37f3" + integrity sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ== dependencies: "@babel/code-frame" "^7.8.3" "@types/json-schema" "^7.0.5" chalk "^4.1.0" + chokidar "^3.4.2" cosmiconfig "^6.0.0" deepmerge "^4.2.2" fs-extra "^9.0.0" + glob "^7.1.6" memfs "^3.1.2" minimatch "^3.0.4" schema-utils "2.7.0" @@ -10589,7 +10675,7 @@ loader-utils@^1.2.3, loader-utils@^1.4.0: emojis-list "^3.0.0" json5 "^1.0.1" -loader-utils@^2.0.0: +loader-utils@^2.0.0, loader-utils@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c" integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw== @@ -14968,20 +15054,13 @@ serialize-error@^7.0.1: dependencies: type-fest "^0.13.1" -serialize-javascript@^2.1.2, serialize-javascript@^3.1.0: +serialize-javascript@^3.1.0, serialize-javascript@^4.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-3.1.0.tgz#8bf3a9170712664ef2561b44b691eafe399214ea" integrity sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg== dependencies: randombytes "^2.1.0" -serialize-javascript@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa" - integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw== - dependencies: - randombytes "^2.1.0" - serve-index@^1.9.1: version "1.9.1" resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239" @@ -16027,21 +16106,6 @@ term-size@^1.2.0: dependencies: execa "^0.7.0" -terser-webpack-plugin@^1.4.3: - version "1.4.3" - resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c" - integrity sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA== - dependencies: - cacache "^12.0.2" - find-cache-dir "^2.1.0" - is-wsl "^1.1.0" - schema-utils "^1.0.0" - serialize-javascript "^2.1.2" - source-map "^0.6.1" - terser "^4.1.2" - webpack-sources "^1.4.0" - worker-farm "^1.7.0" - terser-webpack-plugin@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-4.1.0.tgz#6e9d6ae4e1a900d88ddce8da6a47507ea61f44bc" @@ -16057,6 +16121,22 @@ terser-webpack-plugin@^4.1.0: terser "^5.0.0" webpack-sources "^1.4.3" +"terser-webpack-plugin@npm:@amoo-miki/terser-webpack-plugin@1.4.5-rc.2": + version "1.4.5-rc.2" + resolved "https://registry.yarnpkg.com/@amoo-miki/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5-rc.2.tgz#046c062ef22c126c2544718674bc6624e3651b9c" + integrity sha512-JFSGSzsWgSHEqQXlnHDh3gw+jdVdVlWM2Irdps9P/yWYNY/5VjuG8sdoW4mbuP8/HM893/k8N+ipbeqsd8/xpA== + dependencies: + "@node-rs/xxhash" "^1.3.0" + cacache "^12.0.2" + find-cache-dir "^2.1.0" + is-wsl "^1.1.0" + schema-utils "^1.0.0" + serialize-javascript "^4.0.0" + source-map "^0.6.1" + terser "^4.1.2" + webpack-sources "^1.4.0" + worker-farm "^1.7.0" + terser@^4.1.2, terser@^4.6.3: version "4.8.1" resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.1.tgz#a00e5634562de2239fd404c649051bf6fc21144f" @@ -17207,11 +17287,12 @@ webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3: source-list-map "^2.0.0" source-map "~0.6.1" -webpack@^4.44.1: - version "4.46.0" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.46.0.tgz#bf9b4404ea20a073605e0a011d188d77cb6ad542" - integrity sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q== +"webpack@npm:@amoo-miki/webpack@4.46.0-rc.2": + version "4.46.0-rc.2" + resolved "https://registry.yarnpkg.com/@amoo-miki/webpack/-/webpack-4.46.0-rc.2.tgz#36824597c14557a7bb0a8e13203e30275e7b02bd" + integrity sha512-Y/ZqxTHOoDF1kz3SR63Y9SZGTDUpZNNFrisTRHofWhP8QvNX3LMN+TCmEP56UfLaiLVKMcaiFjx8kFb2TgyBaQ== dependencies: + "@node-rs/xxhash" "^1.3.0" "@webassemblyjs/ast" "1.9.0" "@webassemblyjs/helper-module-context" "1.9.0" "@webassemblyjs/wasm-edit" "1.9.0" @@ -17224,7 +17305,7 @@ webpack@^4.44.1: eslint-scope "^4.0.3" json-parse-better-errors "^1.0.2" loader-runner "^2.4.0" - loader-utils "^1.2.3" + loader-utils "^2.0.4" memory-fs "^0.4.1" micromatch "^3.1.10" mkdirp "^0.5.3" @@ -17232,7 +17313,7 @@ webpack@^4.44.1: node-libs-browser "^2.2.1" schema-utils "^1.0.0" tapable "^1.1.3" - terser-webpack-plugin "^1.4.3" + terser-webpack-plugin "npm:@amoo-miki/terser-webpack-plugin@1.4.5-rc.2" watchpack "^1.7.4" webpack-sources "^1.4.1" From a95605ba6e98a17fc5dbe85cd3c7d462180354e1 Mon Sep 17 00:00:00 2001 From: Matt Provost Date: Wed, 16 Aug 2023 13:34:58 -0700 Subject: [PATCH 06/13] Revert "Bump `node-sass` to a patched version based on `libsass@3.6.5` (#912)" (#969) This reverts commit 807c4cd19e9eed77ff5a5293ae4469e6b863c27c. Signed-off-by: Matt Provost --- CHANGELOG.md | 1 - package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 68c6985d6b..24d7728a74 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,7 +34,6 @@ - [CVE-2023-26136] Add resolution for tough-cookie to ^4.1.3 ([#889](https://github.com/opensearch-project/oui/pull/889)) - [CVE-2023-26115] Bump word-wrap from 1.2.3 to 1.2.4 ([#891](https://github.com/opensearch-project/oui/pull/891)) - 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 `libsass@3.6.5` ([#912](https://github.com/opensearch-project/oui/pull/912)); see [patch commit](https://github.com/AMoo-Miki/node-sass/commit/43c74c0966b05c1e21a1e5e20a0c467ec8e669b4) for details. ### 🪛 Refactoring diff --git a/package.json b/package.json index f3009e8546..fb3ab3e85e 100644 --- a/package.json +++ b/package.json @@ -214,7 +214,7 @@ "jest-cli": "^24.1.0", "moment": "^2.29.4", "moment-timezone": "^0.5.41", - "node-sass": "npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5", + "node-sass": "^8.0.0", "pegjs": "^0.10.0", "postcss-cli": "^7.1.2", "postcss-inline-svg": "^4.1.0", diff --git a/yarn.lock b/yarn.lock index c059d722ab..44fa79a857 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11815,10 +11815,10 @@ node-releases@^2.0.8: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f" integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w== -"node-sass@npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5": - version "9.0.0-libsass-3.6.5" - resolved "https://registry.yarnpkg.com/@amoo-miki/node-sass/-/node-sass-9.0.0-libsass-3.6.5.tgz#0536f4890b2a7a9143ce536f0fecde0a02ee389b" - integrity sha512-KalEkSO9qBbenHS1fXwz6UAf3x2oUKguJ6DRbTyDn8lYiZqNrEcbaD3hE8eZiLOrH662n8MF7fVzLp+oMQNiEA== +node-sass@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-8.0.0.tgz#c80d52148db0ce88610bcf1e1d112027393c13e1" + integrity sha512-jPzqCF2/e6JXw6r3VxfIqYc8tKQdkj5Z/BDATYyG6FL6b/LuYBNFGFVhus0mthcWifHm/JzBpKAd+3eXsWeK/A== dependencies: async-foreach "^0.1.3" chalk "^4.1.2" From 58380a57140416af8669c1e3b73f6226a60266ce Mon Sep 17 00:00:00 2001 From: Matt Provost Date: Wed, 16 Aug 2023 14:35:22 -0700 Subject: [PATCH 07/13] Clean up focus background implementation (#962) * Clean up focus background implementation Signed-off-by: Matt Provost * Rename variable to ouiFocusChangePercent Signed-off-by: Matt Provost * Update changelog Signed-off-by: Matt Provost --------- Signed-off-by: Matt Provost --- CHANGELOG.md | 2 ++ src/global_styling/mixins/_states.scss | 2 +- src/global_styling/variables/_states.scss | 6 +++--- src/themes/oui-next/global_styling/mixins/_states.scss | 2 +- src/themes/oui-next/global_styling/variables/_states.scss | 6 +++--- 5 files changed, 10 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 24d7728a74..4d4e36bee0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -37,6 +37,8 @@ ### 🪛 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/src/global_styling/mixins/_states.scss b/src/global_styling/mixins/_states.scss index 6f3d8b46d9..e4c31a8626 100644 --- a/src/global_styling/mixins/_states.scss +++ b/src/global_styling/mixins/_states.scss @@ -24,7 +24,7 @@ // utility/animations.scss @mixin ouiFocusBackground($color: $ouiColorPrimary) { - background-color: tintOrShade($ouiColorPrimary, ((1 - $ouiFocusTransparency) * 100%), ((1 - $ouiFocusTransparency) * 100%)); + background-color: tintOrShade($color, $ouiFocusChangePercent, $ouiFocusChangePercent); } @mixin ouiHoverState { diff --git a/src/global_styling/variables/_states.scss b/src/global_styling/variables/_states.scss index dc047ccd96..7b6be093b7 100644 --- a/src/global_styling/variables/_states.scss +++ b/src/global_styling/variables/_states.scss @@ -20,8 +20,8 @@ $ouiFocusRingSizeLarge: $ouiSizeXS !default; $ouiFocusRingSize: $ouiFocusRingSizeLarge * .75 !default; // Transparency -$ouiFocusTransparency: lightOrDarkTheme(.1, .3) !default; -$ouiFocusBackgroundColor: tintOrShade($ouiColorPrimary, ((1 - $ouiFocusTransparency) * 100%), ((1 - $ouiFocusTransparency) * 100%)) !default; +$ouiFocusChangePercent: lightOrDarkTheme(90%, 65%) !default; +$ouiFocusBackgroundColor: tintOrShade($ouiColorPrimary, $ouiFocusChangePercent, $ouiFocusChangePercent) !default; /* OUI -> EUI Aliases */ @@ -31,6 +31,6 @@ $euiFocusRingAnimStartSize: $ouiFocusRingAnimStartSize; $euiFocusRingAnimStartSizeLarge: $ouiFocusRingAnimStartSizeLarge; $euiFocusRingSizeLarge: $ouiFocusRingSizeLarge; $euiFocusRingSize: $ouiFocusRingSize; -$euiFocusTransparency: $ouiFocusTransparency; +$euiFocusChangePercent: $ouiFocusChangePercent; $euiFocusBackgroundColor: $ouiFocusBackgroundColor; /* End of Aliases */ diff --git a/src/themes/oui-next/global_styling/mixins/_states.scss b/src/themes/oui-next/global_styling/mixins/_states.scss index 6f3d8b46d9..e4c31a8626 100644 --- a/src/themes/oui-next/global_styling/mixins/_states.scss +++ b/src/themes/oui-next/global_styling/mixins/_states.scss @@ -24,7 +24,7 @@ // utility/animations.scss @mixin ouiFocusBackground($color: $ouiColorPrimary) { - background-color: tintOrShade($ouiColorPrimary, ((1 - $ouiFocusTransparency) * 100%), ((1 - $ouiFocusTransparency) * 100%)); + background-color: tintOrShade($color, $ouiFocusChangePercent, $ouiFocusChangePercent); } @mixin ouiHoverState { diff --git a/src/themes/oui-next/global_styling/variables/_states.scss b/src/themes/oui-next/global_styling/variables/_states.scss index dc047ccd96..7b6be093b7 100644 --- a/src/themes/oui-next/global_styling/variables/_states.scss +++ b/src/themes/oui-next/global_styling/variables/_states.scss @@ -20,8 +20,8 @@ $ouiFocusRingSizeLarge: $ouiSizeXS !default; $ouiFocusRingSize: $ouiFocusRingSizeLarge * .75 !default; // Transparency -$ouiFocusTransparency: lightOrDarkTheme(.1, .3) !default; -$ouiFocusBackgroundColor: tintOrShade($ouiColorPrimary, ((1 - $ouiFocusTransparency) * 100%), ((1 - $ouiFocusTransparency) * 100%)) !default; +$ouiFocusChangePercent: lightOrDarkTheme(90%, 65%) !default; +$ouiFocusBackgroundColor: tintOrShade($ouiColorPrimary, $ouiFocusChangePercent, $ouiFocusChangePercent) !default; /* OUI -> EUI Aliases */ @@ -31,6 +31,6 @@ $euiFocusRingAnimStartSize: $ouiFocusRingAnimStartSize; $euiFocusRingAnimStartSizeLarge: $ouiFocusRingAnimStartSizeLarge; $euiFocusRingSizeLarge: $ouiFocusRingSizeLarge; $euiFocusRingSize: $ouiFocusRingSize; -$euiFocusTransparency: $ouiFocusTransparency; +$euiFocusChangePercent: $ouiFocusChangePercent; $euiFocusBackgroundColor: $ouiFocusBackgroundColor; /* End of Aliases */ From fa48112ed6bac5021228c3526d4e7f544543930f Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Thu, 17 Aug 2023 11:14:01 -0700 Subject: [PATCH 08/13] Theme (Header) - update next background (#936) * Theme (Header) - update next background Signed-off-by: Josh Romero * add changelog Signed-off-by: Josh Romero * Update ouiHeaderDarkBackgroundColor in next theme Signed-off-by: Josh Romero --------- Signed-off-by: Josh Romero --- CHANGELOG.md | 2 +- src/themes/oui-next/global_styling/variables/_header.scss | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d4e36bee0..1a317fa2db 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,9 +11,9 @@ ### 📈 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)) - ### 🐛 Bug Fixes - Fix blurry text in breadcrumbs by avoiding skewing text ([#959](https://github.com/opensearch-project/oui/pull/959)) diff --git a/src/themes/oui-next/global_styling/variables/_header.scss b/src/themes/oui-next/global_styling/variables/_header.scss index 065724c403..e5f7abb3dd 100644 --- a/src/themes/oui-next/global_styling/variables/_header.scss +++ b/src/themes/oui-next/global_styling/variables/_header.scss @@ -10,8 +10,9 @@ */ // Themeable colors -$ouiHeaderBackgroundColor: $ouiColorEmptyShade !default; -$ouiHeaderDarkBackgroundColor: lightOrDarkTheme(shade($ouiColorDarkestShade, 28%), shade($ouiColorLightestShade, 50%)) !default; +$ouiHeaderBackgroundColor: $ouiPageBackgroundColor !default; +// Always use the dark theme value of $ouiPageBackgroundColor for the dark header background +$ouiHeaderDarkBackgroundColor: #172430 !default; $ouiHeaderBorderColor: $ouiBorderColor !default; $ouiHeaderBreadcrumbColor: $ouiColorDarkestShade !default; From 693ae40842a0861518cb35da78276b28e16fe6d1 Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Thu, 17 Aug 2023 13:06:42 -0700 Subject: [PATCH 09/13] Feat (CollapsibleNavGroup): Make background colors theme-able (#968) * Feat (CollapsibleNavGroup): Make background colors theme-able - move vars to themes - make `light` and `none` have the same background in `next` theme - explicitly set `none` to `inherit` for existing themes - add warning note to prop description Signed-off-by: Josh Romero * add changelog Signed-off-by: Josh Romero --------- Signed-off-by: Josh Romero --- CHANGELOG.md | 1 + src/components/collapsible_nav/_index.scss | 2 -- .../_collapsible_nav_group.scss | 2 ++ .../collapsible_nav_group.tsx | 3 +- .../variables/_collapsible_nav.scss} | 4 ++- src/global_styling/variables/_index.scss | 1 + .../variables/_collapsible_nav.scss | 32 +++++++++++++++++++ .../global_styling/variables/_index.scss | 1 + 8 files changed, 42 insertions(+), 4 deletions(-) rename src/{components/collapsible_nav/_variables.scss => global_styling/variables/_collapsible_nav.scss} (89%) create mode 100644 src/themes/oui-next/global_styling/variables/_collapsible_nav.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 1a317fa2db..5459ad6110 100644 --- 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)) +- Make `CollapsibleNavGroup` background colors theme-able ([#968](https://github.com/opensearch-project/oui/pull/968)) ### 🐛 Bug Fixes diff --git a/src/components/collapsible_nav/_index.scss b/src/components/collapsible_nav/_index.scss index 6e98c71aff..4948735f95 100644 --- a/src/components/collapsible_nav/_index.scss +++ b/src/components/collapsible_nav/_index.scss @@ -9,7 +9,5 @@ * GitHub history for details. */ -@import 'variables'; - @import 'collapsible_nav'; @import 'collapsible_nav_group/index'; diff --git a/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss b/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss index de14baf92c..809e14fb00 100644 --- a/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss +++ b/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss @@ -10,6 +10,8 @@ */ .ouiCollapsibleNavGroup { + background-color: $ouiCollapsibleNavGroupNoneBackgroundColor; + &:not(:first-child) { border-top: $ouiBorderThin; } diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx index 02c8d988a8..bd8abca5fe 100644 --- a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx +++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx @@ -76,7 +76,8 @@ export interface OuiCollapsibleNavGroupInterface extends CommonProps { id?: string; /** * Adds a background color to the entire group, - * applying the correct text color to the `title` only + * applying the correct text color to the `title` only. + * Note: Some themes choose to ignore this prop. */ background?: Background; /** diff --git a/src/components/collapsible_nav/_variables.scss b/src/global_styling/variables/_collapsible_nav.scss similarity index 89% rename from src/components/collapsible_nav/_variables.scss rename to src/global_styling/variables/_collapsible_nav.scss index 00cab902bc..4b4fab10d0 100644 --- a/src/components/collapsible_nav/_variables.scss +++ b/src/global_styling/variables/_collapsible_nav.scss @@ -9,7 +9,9 @@ * GitHub history for details. */ -// Sizing +// Should be same as OuiFlyout background color +$ouiCollapsibleNavGroupNoneBackgroundColor: inherit !default; + $ouiCollapsibleNavGroupLightBackgroundColor: $ouiPageBackgroundColor !default; $ouiCollapsibleNavGroupDarkBackgroundColor: lightOrDarkTheme( diff --git a/src/global_styling/variables/_index.scss b/src/global_styling/variables/_index.scss index daf7a7bf3e..ae6c1944be 100644 --- a/src/global_styling/variables/_index.scss +++ b/src/global_styling/variables/_index.scss @@ -34,3 +34,4 @@ @import 'page'; @import 'panel'; @import 'tool_tip'; +@import 'collapsible_nav'; diff --git a/src/themes/oui-next/global_styling/variables/_collapsible_nav.scss b/src/themes/oui-next/global_styling/variables/_collapsible_nav.scss new file mode 100644 index 0000000000..b4cd021228 --- /dev/null +++ b/src/themes/oui-next/global_styling/variables/_collapsible_nav.scss @@ -0,0 +1,32 @@ +/*! + * 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. + */ + +// No distinction between none and light backgrounds in this theme +$ouiCollapsibleNavGroupNoneBackgroundColor: $ouiPageBackgroundColor !default; + +$ouiCollapsibleNavGroupLightBackgroundColor: $ouiPageBackgroundColor !default; + +$ouiCollapsibleNavGroupDarkBackgroundColor: lightOrDarkTheme( + shade($ouiColorDarkestShade, 20%), + shade($ouiColorLightestShade, 50%), +) !default; + +$ouiCollapsibleNavGroupDarkHighContrastColor: makeGraphicContrastColor( + $ouiColorPrimary, + $ouiCollapsibleNavGroupDarkBackgroundColor +) !default; + + +/* OUI -> EUI Aliases */ +$euiCollapsibleNavGroupLightBackgroundColor: $ouiCollapsibleNavGroupLightBackgroundColor; +$euiCollapsibleNavGroupDarkBackgroundColor: $ouiCollapsibleNavGroupDarkBackgroundColor; +$euiCollapsibleNavGroupDarkHighContrastColor: $ouiCollapsibleNavGroupDarkHighContrastColor; +/* End of Aliases */ diff --git a/src/themes/oui-next/global_styling/variables/_index.scss b/src/themes/oui-next/global_styling/variables/_index.scss index daf7a7bf3e..ae6c1944be 100644 --- a/src/themes/oui-next/global_styling/variables/_index.scss +++ b/src/themes/oui-next/global_styling/variables/_index.scss @@ -34,3 +34,4 @@ @import 'page'; @import 'panel'; @import 'tool_tip'; +@import 'collapsible_nav'; From f3d42ef8696ab1c14f9e3573b5ff5c7438726639 Mon Sep 17 00:00:00 2001 From: Ashwin P Chandran Date: Mon, 21 Aug 2023 17:38:23 -0700 Subject: [PATCH 10/13] Schema-item (#974) * Adds SchemaItem Signed-off-by: Ashwin P Chandran * updates snapshot Signed-off-by: Ashwin P Chandran * Adds changelog entry Signed-off-by: Ashwin P Chandran * push fix changelog Signed-off-by: Ashwin P Chandran * Address PR comments Signed-off-by: Ashwin P Chandran --------- Signed-off-by: Ashwin P Chandran --- CHANGELOG.md | 1 + src-docs/src/routes.js | 3 + src-docs/src/views/schema/schema.tsx | 142 ++++++++++++++++++ src-docs/src/views/schema/schema_example.js | 73 +++++++++ src-docs/src/views/schema/schema_group.tsx | 81 ++++++++++ src/components/index.js | 2 + src/components/index.scss | 1 + .../__snapshots__/schema_item.test.tsx.snap | 35 +++++ src/components/schema/_index.scss | 12 ++ src/components/schema/_schema_item.scss | 79 ++++++++++ src/components/schema/index.ts | 12 ++ src/components/schema/schema_item.test.tsx | 44 ++++++ src/components/schema/schema_item.tsx | 92 ++++++++++++ 13 files changed, 577 insertions(+) create mode 100644 src-docs/src/views/schema/schema.tsx create mode 100644 src-docs/src/views/schema/schema_example.js create mode 100644 src-docs/src/views/schema/schema_group.tsx create mode 100644 src/components/schema/__snapshots__/schema_item.test.tsx.snap create mode 100644 src/components/schema/_index.scss create mode 100644 src/components/schema/_schema_item.scss create mode 100644 src/components/schema/index.ts create mode 100644 src/components/schema/schema_item.test.tsx create mode 100644 src/components/schema/schema_item.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 5459ad6110..5e6762da2c 100644 --- 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 index 6740a76f63..1ed4231629 100644 --- 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 new file mode 100644 index 0000000000..de9bf10d3f --- /dev/null +++ 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 () => ( + <> + + + {}, + color: 'danger', + }, + { + iconType: 'pencil', + 'aria-label': 'Edit', + onClick: () => {}, + tooltip: { + content: 'Edit', + position: 'top', + delay: 'long', + }, + }, + ]} + /> + {}, + color: 'danger', + }, + { + iconType: 'pencil', + 'aria-label': 'Edit', + onClick: () => {}, + tooltip: { + content: 'Edit', + position: 'top', + delay: 'long', + }, + }, + ]} + compressed + /> + + {}, + color: 'danger', + }, + { + iconType: 'pencil', + 'aria-label': 'Edit', + onClick: () => {}, + tooltip: { + content: 'Edit', + position: 'top', + delay: 'long', + }, + }, + ]} + withPanel + /> + + {}, + color: 'danger', + }, + { + iconType: 'pencil', + 'aria-label': 'Edit', + onClick: () => {}, + tooltip: { + content: 'Edit', + position: 'top', + delay: 'long', + }, + }, + ]} + withPanel + compressed + /> + +
+ {}, + color: 'danger', + }, + { + iconType: 'pencil', + 'aria-label': 'Edit', + onClick: () => {}, + tooltip: { + content: 'Edit', + position: 'top', + delay: 'long', + }, + }, + ]} + withPanel + /> +
+ +); diff --git a/src-docs/src/views/schema/schema_example.js b/src-docs/src/views/schema/schema_example.js new file mode 100644 index 0000000000..28e6862678 --- /dev/null +++ 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: ( +

+ This is the basic OuiSchemaItem component. +

+ ), + props: { OuiSchemaItem }, + demo: , + }, + { + title: 'SchemaItem as a list', + source: [ + { + type: GuideSectionTypes.JS, + code: schemaGroupSource, + }, + { + type: GuideSectionTypes.HTML, + code: schemaGroupHtml, + }, + ], + text: ( +

+ Grouping OuiSchemaItem with{' '} + OuiFlexGroup to make a list. +

+ ), + props: { OuiSchemaItem }, + demo: , + }, + ], +}; diff --git a/src-docs/src/views/schema/schema_group.tsx b/src-docs/src/views/schema/schema_group.tsx new file mode 100644 index 0000000000..b53b9497bb --- /dev/null +++ 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 ( + <> +

As a list

+ + + {items.map((item) => ( + + + + ))} + + +

With panels

+ + + {items.map((item) => ( + + + + ))} + + + ); +}; diff --git a/src/components/index.js b/src/components/index.js index ff50592530..c1112b5701 100644 --- 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 index 2b3ad5cd34..f008f44fdd 100644 --- 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 new file mode 100644 index 0000000000..624ce787f1 --- /dev/null +++ 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`] = ` +
+
+ Test +
+
+
+`; + +exports[`OuiSchema it renders compressed correctly 1`] = ` +
+
+ Test +
+
+
+`; diff --git a/src/components/schema/_index.scss b/src/components/schema/_index.scss new file mode 100644 index 0000000000..59390ef9b2 --- /dev/null +++ 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'; diff --git a/src/components/schema/_schema_item.scss b/src/components/schema/_schema_item.scss new file mode 100644 index 0000000000..17fb07e134 --- /dev/null +++ b/src/components/schema/_schema_item.scss @@ -0,0 +1,79 @@ +/*! + * 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. + */ + +.ouiSchemaItem { + display: flex; + // sass-lint:disable-block no-misspelled-properties + gap: $ouiSizeS; + align-items: center; + padding: $ouiSizeS; + border-radius: $ouiBorderRadius; + + &:hover { + @include ouiFocusBackground($ouiTextColor); + + .ouiSchemaItem__actions .ouiButtonIcon { + opacity: 1; + visibility: visible; + } + } +} + +.ouiSchemaItem__icon { + align-self: flex-start; + margin: calc($ouiSize / 2) 0; // To align with buttonIcon +} + +.ouiSchemaItem__label { + flex: 1; + margin: calc($ouiSize / 2) 0; // To align with buttonIcon +} + +.ouiSchemaItem__actions { + // sass-lint:disable-block no-misspelled-properties + gap: $ouiSizeXS; + display: flex; + + .ouiButtonIcon { + opacity: 0; + transition: opacity $ouiAnimSpeedNormal $ouiAnimSlightResistance; + + &:focus { + opacity: 1; + } + } +} + +.ouiSchemaItem--withPanel { + @include ouiBottomShadowSmall; + border: $ouiBorderThin; + + &:hover { + background-color: tintOrShade($ouiColorLightestShade, 50%, 20%); + } +} + +.ouiSchemaItem--compressed { + padding: $ouiSizeXS; + // sass-lint:disable-block no-misspelled-properties + gap: $ouiSizeXS; + font-size: $ouiFontSizeXS; + + .ouiSchemaItem__icon { + margin: calc($ouiSizeM / 2) 0; + margin-left: $ouiSizeXS; + } + + .ouiSchemaItem__label { + flex: 1; + margin: calc($ouiSizeM / 2) 0; + } +} diff --git a/src/components/schema/index.ts b/src/components/schema/index.ts new file mode 100644 index 0000000000..9b4fe1bf84 --- /dev/null +++ b/src/components/schema/index.ts @@ -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. + */ + +export { OuiSchemaItem } from './schema_item'; diff --git a/src/components/schema/schema_item.test.tsx b/src/components/schema/schema_item.test.tsx new file mode 100644 index 0000000000..9ba3944d6a --- /dev/null +++ b/src/components/schema/schema_item.test.tsx @@ -0,0 +1,44 @@ +/* + * 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 { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { OuiSchemaItem } from './schema_item'; + +describe('OuiSchema', () => { + test('is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + + test('it only renders at most 2 actions', () => { + const actions = Array(3) + .fill(null) + .map(() => ({ + iconType: 'trash', + onClick: () => {}, + })); + const component = render( + + ); + expect(component.find('.ouiSchemaItem__actions').children().length).toBe(2); + }); + + test('it renders compressed correctly', () => { + const component = render( + + ); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/schema/schema_item.tsx b/src/components/schema/schema_item.tsx new file mode 100644 index 0000000000..8e89857681 --- /dev/null +++ b/src/components/schema/schema_item.tsx @@ -0,0 +1,92 @@ +/* + * 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, { FunctionComponent } from 'react'; +import { CommonProps } from '../common'; +import classNames from 'classnames'; +import { OuiButtonIcon, OuiButtonIconPropsForButton } from '../button'; +import { OuiToolTip, OuiToolTipProps } from '../tool_tip'; +import { IconType } from '../icon'; +import { OuiToken } from '../token'; + +export interface Action extends OuiButtonIconPropsForButton { + tooltip?: Omit; +} + +/** + * Props for the OuiSchemaItem component. + * @public + */ +export type OuiSchemaItemProps = CommonProps & { + /** The icon type to display. */ + iconType?: IconType; + /** The label to display. */ + label: string; + /** An array of actions to display. Limit 2 */ + actions?: Action[]; + /** Whether the item is compressed. */ + compressed?: boolean; + /** Whether the item is displayed with a panel. */ + withPanel?: boolean; +}; + +/** + * A component that displays a schema item. + * @public + */ +export const OuiSchemaItem: FunctionComponent = ({ + className, + iconType, + label, + actions = [], + compressed, + withPanel, + ...rest +}) => { + const classes = classNames( + 'ouiSchemaItem', + { + 'ouiSchemaItem--compressed': compressed, + 'ouiSchemaItem--withPanel': withPanel, + }, + className + ); + + const filteredActions = actions.slice(0, 2); + + return ( +
+ {iconType && ( + + )} +
{label}
+
+ {filteredActions.map(({ tooltip, ...action }, index) => + tooltip ? ( + + + + ) : ( + + ) + )} +
+
+ ); +}; From 9760094cba049c0612055d7f40ddabf35c800c95 Mon Sep 17 00:00:00 2001 From: Matt Provost Date: Tue, 22 Aug 2023 09:29:23 -0700 Subject: [PATCH 11/13] Update next light theme primary color to #07827E (#981) * Update next theme primary color to #07827E Signed-off-by: Matt Provost * Update changelog Signed-off-by: Matt Provost --------- Signed-off-by: Matt Provost --- CHANGELOG.md | 1 + src/themes/oui-next/global_styling/variables/_colors.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e6762da2c..a997c01c26 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ - 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)) +- Update next light theme primary color to #07827E ([#981](https://github.com/opensearch-project/oui/pull/981)) ### 🐛 Bug Fixes diff --git a/src/themes/oui-next/global_styling/variables/_colors.scss b/src/themes/oui-next/global_styling/variables/_colors.scss index 1208ceea8a..3b0574ed41 100644 --- a/src/themes/oui-next/global_styling/variables/_colors.scss +++ b/src/themes/oui-next/global_styling/variables/_colors.scss @@ -17,7 +17,7 @@ $ouiColorGhost: #FCFEFF !default; $ouiColorInk: #0A121A !default; // Core -$ouiColorPrimary: #159D8D !default; +$ouiColorPrimary: #07827E !default; $ouiColorSecondary: #017D73 !default; $ouiColorAccent: #DD0A73 !default; From 24fb2b19039fa6c7d59d49830fc1601bfb44b69f Mon Sep 17 00:00:00 2001 From: Matt Provost Date: Tue, 22 Aug 2023 09:35:56 -0700 Subject: [PATCH 12/13] Bump `node-sass` to a version based on `libsass@3.6.5` (#977) * Update to libsass 3.6.5 Signed-off-by: Matt Provost * Update changelog Signed-off-by: Matt Provost * Revert extraneous yarn lock changes Signed-off-by: Matt Provost * Remove incorrect comments Signed-off-by: Matt Provost --------- Signed-off-by: Matt Provost --- CHANGELOG.md | 1 + package.json | 4 ++-- src-docs/src/components/guide_components.scss | 4 +++- src/global_styling/mixins/_header.scss | 2 -- .../oui-next/global_styling/mixins/_header.scss | 2 -- yarn.lock | 16 ++++++++-------- 6 files changed, 14 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a997c01c26..48ed93a471 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -37,6 +37,7 @@ - [CVE-2023-26136] Add resolution for tough-cookie to ^4.1.3 ([#889](https://github.com/opensearch-project/oui/pull/889)) - [CVE-2023-26115] Bump word-wrap from 1.2.3 to 1.2.4 ([#891](https://github.com/opensearch-project/oui/pull/891)) - 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 `libsass@3.6.5` ([#977](https://github.com/opensearch-project/oui/pull/977)); see [patch commit](https://github.com/AMoo-Miki/node-sass/commit/43c74c0966b05c1e21a1e5e20a0c467ec8e669b4) for details. ### 🪛 Refactoring diff --git a/package.json b/package.json index fb3ab3e85e..a3a92f8e15 100644 --- a/package.json +++ b/package.json @@ -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,7 +239,7 @@ "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", diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index 6306821932..f5cff78bcc 100644 --- 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/global_styling/mixins/_header.scss b/src/global_styling/mixins/_header.scss index 48607bcee1..2dd794c2c8 100644 --- a/src/global_styling/mixins/_header.scss +++ b/src/global_styling/mixins/_header.scss @@ -12,8 +12,6 @@ @import '../variables/header'; @mixin ouiHeaderAffordForFixed($headerHeight: $ouiHeaderHeightCompensation) { - // The `&` allows for grouping inside another specific body class. - // When not applied inside of another selector, it simply renders with the single class &.ouiBody--headerIsFixed { padding-top: $headerHeight; diff --git a/src/themes/oui-next/global_styling/mixins/_header.scss b/src/themes/oui-next/global_styling/mixins/_header.scss index 48607bcee1..2dd794c2c8 100644 --- a/src/themes/oui-next/global_styling/mixins/_header.scss +++ b/src/themes/oui-next/global_styling/mixins/_header.scss @@ -12,8 +12,6 @@ @import '../variables/header'; @mixin ouiHeaderAffordForFixed($headerHeight: $ouiHeaderHeightCompensation) { - // The `&` allows for grouping inside another specific body class. - // When not applied inside of another selector, it simply renders with the single class &.ouiBody--headerIsFixed { padding-top: $headerHeight; diff --git a/yarn.lock b/yarn.lock index 44fa79a857..2865c81c77 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11815,10 +11815,10 @@ node-releases@^2.0.8: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f" integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w== -node-sass@^8.0.0: - version "8.0.0" - resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-8.0.0.tgz#c80d52148db0ce88610bcf1e1d112027393c13e1" - integrity sha512-jPzqCF2/e6JXw6r3VxfIqYc8tKQdkj5Z/BDATYyG6FL6b/LuYBNFGFVhus0mthcWifHm/JzBpKAd+3eXsWeK/A== +"node-sass@npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5": + version "9.0.0-libsass-3.6.5" + resolved "https://registry.yarnpkg.com/@amoo-miki/node-sass/-/node-sass-9.0.0-libsass-3.6.5.tgz#0536f4890b2a7a9143ce536f0fecde0a02ee389b" + integrity sha512-KalEkSO9qBbenHS1fXwz6UAf3x2oUKguJ6DRbTyDn8lYiZqNrEcbaD3hE8eZiLOrH662n8MF7fVzLp+oMQNiEA== dependencies: async-foreach "^0.1.3" chalk "^4.1.2" @@ -14872,10 +14872,10 @@ sass-lint@^1.13.1: path-is-absolute "^1.0.0" util "^0.10.3" -sass-loader@^10.0.1: - version "10.4.1" - resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.4.1.tgz#bea4e173ddf512c9d7f53e9ec686186146807cbf" - integrity sha512-aX/iJZTTpNUNx/OSYzo2KsjIUQHqvWsAhhUijFjAPdZTEhstjZI9zTNvkTTwsx+uNUJqUwOw5gacxQMx4hJxGQ== +"sass-loader@npm:@bsfishy/sass-loader@node-sass-9": + version "10.4.1-node-sass-9.1" + resolved "https://registry.yarnpkg.com/@bsfishy/sass-loader/-/sass-loader-10.4.1-node-sass-9.1.tgz#08b1a2106ebee373a3ce87933c010542c84a8f2e" + integrity sha512-AnVEci9dZCxCmPTg+bB0gUhp6FO6v+KmWH4wRbLMztfK5JxS8o+0s/bKCZwK7EY0TpxcjRTj34oW48OQHm0Hjg== dependencies: klona "^2.0.4" loader-utils "^2.0.0" From 309e146fcab156fd79ec86306fe2ef7fc553b8dd Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Tue, 22 Aug 2023 10:55:25 -0700 Subject: [PATCH 13/13] Update ouiTextSubduedColor in `next` dark theme (#973) * Update ouiTextSubduedColor in `next` dark theme Shade the theme's `$ouiTextColor` instead of using one of the grayscale shades Signed-off-by: Josh Romero * update changelog Signed-off-by: Josh Romero --------- Signed-off-by: Josh Romero --- CHANGELOG.md | 1 + src/themes/oui-next/oui_next_colors_dark.scss | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 48ed93a471..71375db1f8 100644 --- 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)) +- 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)) diff --git a/src/themes/oui-next/oui_next_colors_dark.scss b/src/themes/oui-next/oui_next_colors_dark.scss index 6a453336bf..b7d1db0849 100644 --- a/src/themes/oui-next/oui_next_colors_dark.scss +++ b/src/themes/oui-next/oui_next_colors_dark.scss @@ -41,7 +41,9 @@ $ouiColorHighlight: #2E2D25; // Variations from core $ouiTextColor: #DFE5EF; $ouiTitleColor: $ouiTextColor; -$ouiTextSubduedColor: makeHighContrastColor($ouiColorMediumShade); +// Ensure contrast between subdued text and the page background +// Should not be shaded as much as $ouiColorDisabled +$ouiTextSubduedColor: makeHighContrastColor(shade($ouiTextColor, 30%), $ouiPageBackgroundColor); $ouiColorDisabled: shade($ouiTextColor, 70%); // Contrasty text variants