From 53762cacf873ba67dd9cd0c57e0b7b6a8d92bf02 Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Thu, 31 Aug 2023 09:17:21 -0700 Subject: [PATCH 1/8] Adjust background color of `OuiToolTip` (#1004) * Adjust background color of `OuiToolTip` Signed-off-by: Josh Romero * update changelog Signed-off-by: Josh Romero --------- Signed-off-by: Josh Romero --- CHANGELOG.md | 1 + src/themes/oui-next/global_styling/variables/_tool_tip.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b0e6c3b07e..0bc6599a2f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ - 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)) - Add dismissible prop to OuiCallOut ([#985](https://github.com/opensearch-project/oui/pull/985)) +- Adjust background color of OuiToolTip in `next` theme ([#1004](https://github.com/opensearch-project/oui/pull/1004)) ### 🐛 Bug Fixes diff --git a/src/themes/oui-next/global_styling/variables/_tool_tip.scss b/src/themes/oui-next/global_styling/variables/_tool_tip.scss index 2cee1abc45..a1b41f7bae 100644 --- a/src/themes/oui-next/global_styling/variables/_tool_tip.scss +++ b/src/themes/oui-next/global_styling/variables/_tool_tip.scss @@ -9,7 +9,7 @@ * GitHub history for details. */ -$ouiTooltipBackgroundColor: tintOrShade($ouiColorFullShade, 25%, 100%) !default; +$ouiTooltipBackgroundColor: #293847 !default; $ouiTooltipAnimations: ( top: ouiToolTipTop, From 38a6ea71e2b3f4cc7a94c31760ebdc375b9f0242 Mon Sep 17 00:00:00 2001 From: "Qingyang(Abby) Hu" Date: Thu, 31 Aug 2023 09:21:59 -0700 Subject: [PATCH 2/8] change onDismissible to onDismiss (#1003) Signed-off-by: abbyhu2000 --- src-docs/src/views/call_out/info.js | 2 +- .../call_out/__snapshots__/call_out.test.tsx.snap | 2 +- src/components/call_out/call_out.test.tsx | 6 +++--- src/components/call_out/call_out.tsx | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src-docs/src/views/call_out/info.js b/src-docs/src/views/call_out/info.js index 2afe71e4df..1cae19f035 100644 --- a/src-docs/src/views/call_out/info.js +++ b/src-docs/src/views/call_out/info.js @@ -26,7 +26,7 @@ export default () => { title="Callouts can be dismissed when dismissible is set to true unless the color is danger or warning. " iconType="wrench" dismissible - onDismissible={closeCallOut} + onDismiss={closeCallOut} /> ); } diff --git a/src/components/call_out/__snapshots__/call_out.test.tsx.snap b/src/components/call_out/__snapshots__/call_out.test.tsx.snap index 89a412f4ca..6043f67923 100644 --- a/src/components/call_out/__snapshots__/call_out.test.tsx.snap +++ b/src/components/call_out/__snapshots__/call_out.test.tsx.snap @@ -45,7 +45,7 @@ exports[`OuiCallOut props color warning is rendered 1`] = ` exports[`OuiCallOut props dismissible close callout after click 1`] = `
{ }); it('close callout after click', () => { - const onDismissible = jest.fn(); + const onDismiss = jest.fn(); const component = mount( ); expect(component).toMatchSnapshot(); findTestSubject(component, 'closeCallOutButton').simulate('click'); - expect(onDismissible).toBeCalled(); + expect(onDismiss).toBeCalled(); }); }); }); diff --git a/src/components/call_out/call_out.tsx b/src/components/call_out/call_out.tsx index 24b796e89d..d91e33a783 100644 --- a/src/components/call_out/call_out.tsx +++ b/src/components/call_out/call_out.tsx @@ -50,7 +50,7 @@ export type OuiCallOutProps = CommonProps & size?: Size; heading?: Heading; dismissible?: boolean; - onDismissible?: ( + onDismiss?: ( event?: | React.KeyboardEvent | React.MouseEvent @@ -83,7 +83,7 @@ export const OuiCallOut = forwardRef( className, heading, dismissible = false, - onDismissible = () => {}, + onDismiss = () => {}, ...rest }, ref: Ref @@ -114,7 +114,7 @@ export const OuiCallOut = forwardRef( dismissibleIcon = ( Date: Thu, 31 Aug 2023 10:53:28 -0700 Subject: [PATCH 3/8] Adjust `$ouiFormInputGroupLabelBackground color` in dark `next` theme (#1005) * Adjust $ouiFormInputGroupLabelBackground color in dark `next` theme definitions for other themes and modes remain the same Signed-off-by: Josh Romero * add changelog Signed-off-by: Josh Romero * Update src/themes/oui-next/global_styling/variables/_form.scss Co-authored-by: Miki Signed-off-by: Josh Romero --------- Signed-off-by: Josh Romero Co-authored-by: Miki --- CHANGELOG.md | 2 ++ src/themes/oui-next/global_styling/variables/_form.scss | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0bc6599a2f..64c12e9fd1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ### 🛡 Security ### 📈 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)) @@ -18,6 +19,7 @@ - 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)) - Add dismissible prop to OuiCallOut ([#985](https://github.com/opensearch-project/oui/pull/985)) +- Adjust $ouiFormInputGroupLabelBackground color in dark `next` theme ([#1005](https://github.com/opensearch-project/oui/pull/1005)) - Adjust background color of OuiToolTip in `next` theme ([#1004](https://github.com/opensearch-project/oui/pull/1004)) ### 🐛 Bug Fixes diff --git a/src/themes/oui-next/global_styling/variables/_form.scss b/src/themes/oui-next/global_styling/variables/_form.scss index cec0dec337..65c1159f0d 100644 --- a/src/themes/oui-next/global_styling/variables/_form.scss +++ b/src/themes/oui-next/global_styling/variables/_form.scss @@ -48,7 +48,8 @@ $ouiFormCustomControlBorderColor: shadeOrTint($ouiColorLightestShade, 18%, 30%) $ouiFormControlDisabledColor: $ouiColorMediumShade !default; $ouiFormControlBoxShadow: 0 1px 1px -1px transparentize($ouiShadowColor, .8), 0 3px 2px -2px transparentize($ouiShadowColor, .8) !default; $ouiFormControlPlaceholderText: makeHighContrastColor($ouiTextSubduedColor, $ouiFormBackgroundColor) !default; -$ouiFormInputGroupLabelBackground: tintOrShade($ouiColorLightShade, 50%, 40%) !default; +$_ouiFormInputGroupLabelDarkBackgroundColor: #293847 !default; +$ouiFormInputGroupLabelBackground: lightOrDarkTheme(tint($ouiColorLightShade, 50%), $_ouiFormInputGroupLabelDarkBackgroundColor) !default; $ouiFormInputGroupBorder: 1px solid shadeOrTint($ouiFormInputGroupLabelBackground, 2%, 4%) !default; $ouiSwitchOffColor: lightOrDarkTheme(transparentize($ouiColorMediumShade, .8), transparentize($ouiColorMediumShade, .3)) !default; From c9d0d62e63bc1c77bbaf9225fd6370d6adfcbe91 Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Thu, 31 Aug 2023 16:51:48 -0700 Subject: [PATCH 4/8] Add new "middle-out" order prop option to `OuiPaletteColorBlind' (#856) * Add new "middle-out" order prop option to `OuiPaletteColorBlind' Signed-off-by: Josh Romero * update changelog Signed-off-by: Josh Romero --------- Signed-off-by: Josh Romero --- CHANGELOG.md | 1 + .../src/views/color_palette/color_palette.js | 10 ++++++++++ .../src/views/color_palette/props_info.js | 4 ++-- src/services/color/oui_palettes.ts | 20 ++++++++++++++++++- 4 files changed, 32 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 64c12e9fd1..d1e8f6414b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ - Add dismissible prop to OuiCallOut ([#985](https://github.com/opensearch-project/oui/pull/985)) - Adjust $ouiFormInputGroupLabelBackground color in dark `next` theme ([#1005](https://github.com/opensearch-project/oui/pull/1005)) - Adjust background color of OuiToolTip in `next` theme ([#1004](https://github.com/opensearch-project/oui/pull/1004)) +- Add new `middle-out` order prop option to `OuiPaletteColorBlind` ([#856](https://github.com/opensearch-project/oui/pull/856)) ### 🐛 Bug Fixes diff --git a/src-docs/src/views/color_palette/color_palette.js b/src-docs/src/views/color_palette/color_palette.js index 49d07adf7a..cdbf847cfc 100644 --- a/src-docs/src/views/color_palette/color_palette.js +++ b/src-docs/src/views/color_palette/color_palette.js @@ -37,6 +37,16 @@ const customPalettes = [ palette: ouiPaletteColorBlind({ rotations: 2 }), code: 'ouiPaletteColorBlind({rotations: 2})', }, + { + title: 'Lots of colors, with the extremes last', + palette: ouiPaletteColorBlind({ + rotations: 9, + direction: 'both', + order: 'middle-out', + }), + code: + "ouiPaletteColorBlind({ rotations: 9, direction: 'both', order: 'middle-out' })", + }, { title: 'Series may have multiple metrics and so the colors must coordinate but be distinguishable', diff --git a/src-docs/src/views/color_palette/props_info.js b/src-docs/src/views/color_palette/props_info.js index 456aa26415..fabd10908b 100644 --- a/src-docs/src/views/color_palette/props_info.js +++ b/src-docs/src/views/color_palette/props_info.js @@ -21,9 +21,9 @@ export const qualitativePropsInfo = { }, order: { description: - 'Order similar colors as `group`s or just `append` each variation', + 'Order similar colors as `group`s, just `append` each variation (from dark to light), or append from the `middle-out`', required: false, - type: { name: "'append' | 'group'" }, + type: { name: "'append' | 'group' | 'middle-out'" }, defaultValue: { value: "'append'" }, }, direction: { diff --git a/src/services/color/oui_palettes.ts b/src/services/color/oui_palettes.ts index 10e12c3174..047df0a769 100644 --- a/src/services/color/oui_palettes.ts +++ b/src/services/color/oui_palettes.ts @@ -60,7 +60,7 @@ export interface OuiPaletteColorBlindProps { /** * Order similar colors as `group`s or just `append` each variation */ - order?: 'append' | 'group'; + order?: 'append' | 'group' | 'middle-out'; /** * Specifies if the direction of the color variations */ @@ -134,6 +134,24 @@ export const ouiPaletteColorBlind = ({ colors.push(...rotation); } } + + // start with the appended order, then pick from both ends + if (order === 'middle-out') { + const shadePalettes = []; + while (colors.length) { + shadePalettes.push(colors.splice(0, base.length)); + } + while (shadePalettes.length) { + const firstPalette = shadePalettes.shift(); + if (firstPalette) { + colors.unshift(...firstPalette); + } + const lastPalette = shadePalettes.pop(); + if (lastPalette) { + colors.unshift(...lastPalette); + } + } + } } else { colors = base; } From 36cb2a8537936f28d053baff1fc4046c2b081a73 Mon Sep 17 00:00:00 2001 From: Danila Gulderov Date: Fri, 1 Sep 2023 19:29:18 +0300 Subject: [PATCH 5/8] Replace Avatar in favor of Icon in OuiFacetButtons example (#987) * Replace Avatar in favor of Icon in OuiFacetButtons example (#909) Signed-off-by: Danila Gulderov * changelog update (#909) Signed-off-by: Danila Gulderov --------- Signed-off-by: Danila Gulderov --- CHANGELOG.md | 1 + src-docs/src/views/facet/facet.js | 8 +++----- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d1e8f6414b..1ec75160c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -37,6 +37,7 @@ ### 📝 Documentation +- Replace Avatar in favor of Icon in OuiFacetButtons example ([#987](https://github.com/opensearch-project/oui/pull/987)) - Add dark prop toggles ([#910](https://github.com/opensearch-project/oui/pull/910)) - Remove language from the form validation documentation that doesn't align with the updated guidelines ([#986](https://github.com/opensearch-project/oui/pull/986)) diff --git a/src-docs/src/views/facet/facet.js b/src-docs/src/views/facet/facet.js index cb8b37773a..e603007746 100644 --- a/src-docs/src/views/facet/facet.js +++ b/src-docs/src/views/facet/facet.js @@ -11,7 +11,7 @@ import React from 'react'; -import { OuiFacetButton, OuiIcon, OuiAvatar } from '../../../../src/components'; +import { OuiFacetButton, OuiIcon } from '../../../../src/components'; export default () => (
@@ -29,10 +29,8 @@ export default () => ( Disabled
- }> - Avatar as icon + }> + Facet with Icon example
From 64465b160b05058f739dd211cf3c46b34bc7dcf3 Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Fri, 1 Sep 2023 16:03:29 -0700 Subject: [PATCH 6/8] Add icons for OSD 2.10 release (#1014) * Add icons for OSD 2.10 release Signed-off-by: Josh Romero * update changelog Signed-off-by: Josh Romero * Fix naming of `integrationSecurity` icon Signed-off-by: Josh Romero * Remove explicit height and width properties Signed-off-by: Josh Romero --------- Signed-off-by: Josh Romero --- CHANGELOG.md | 1 + src-docs/src/views/icon/icons.js | 11 + .../icon/__snapshots__/icon.test.tsx.snap | 214 ++++++++++++++++++ src/components/icon/assets/chatLeft.js | 27 +++ src/components/icon/assets/chatLeft.svg | 8 + src/components/icon/assets/chatRight.js | 27 +++ src/components/icon/assets/chatRight.svg | 8 + .../icon/assets/checkInCircleEmpty.js | 28 +++ .../icon/assets/checkInCircleEmpty.svg | 9 + .../icon/assets/integrationGeneral.js | 33 +++ .../icon/assets/integrationGeneral.svg | 10 + .../icon/assets/integrationObservability.js | 33 +++ .../icon/assets/integrationObservability.svg | 10 + .../icon/assets/integrationSearch.js | 24 ++ .../icon/assets/integrationSearch.svg | 9 + .../icon/assets/integrationSecurity.js | 28 +++ .../icon/assets/integrationSecurity.svg | 9 + src/components/icon/assets/redeploy.js | 24 ++ src/components/icon/assets/redeploy.svg | 9 + src/components/icon/assets/thumbsDown.js | 27 +++ src/components/icon/assets/thumbsDown.svg | 9 + src/components/icon/assets/thumbsUp.js | 27 +++ src/components/icon/assets/thumbsUp.svg | 9 + src/components/icon/assets/undeploy.js | 28 +++ src/components/icon/assets/undeploy.svg | 9 + src/components/icon/icon.tsx | 11 + 26 files changed, 642 insertions(+) create mode 100644 src/components/icon/assets/chatLeft.js create mode 100644 src/components/icon/assets/chatLeft.svg create mode 100644 src/components/icon/assets/chatRight.js create mode 100644 src/components/icon/assets/chatRight.svg create mode 100644 src/components/icon/assets/checkInCircleEmpty.js create mode 100644 src/components/icon/assets/checkInCircleEmpty.svg create mode 100644 src/components/icon/assets/integrationGeneral.js create mode 100644 src/components/icon/assets/integrationGeneral.svg create mode 100644 src/components/icon/assets/integrationObservability.js create mode 100644 src/components/icon/assets/integrationObservability.svg create mode 100644 src/components/icon/assets/integrationSearch.js create mode 100644 src/components/icon/assets/integrationSearch.svg create mode 100644 src/components/icon/assets/integrationSecurity.js create mode 100644 src/components/icon/assets/integrationSecurity.svg create mode 100644 src/components/icon/assets/redeploy.js create mode 100644 src/components/icon/assets/redeploy.svg create mode 100644 src/components/icon/assets/thumbsDown.js create mode 100644 src/components/icon/assets/thumbsDown.svg create mode 100644 src/components/icon/assets/thumbsUp.js create mode 100644 src/components/icon/assets/thumbsUp.svg create mode 100644 src/components/icon/assets/undeploy.js create mode 100644 src/components/icon/assets/undeploy.svg diff --git a/CHANGELOG.md b/CHANGELOG.md index 1ec75160c2..e1d90a0da0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ - Adjust $ouiFormInputGroupLabelBackground color in dark `next` theme ([#1005](https://github.com/opensearch-project/oui/pull/1005)) - Adjust background color of OuiToolTip in `next` theme ([#1004](https://github.com/opensearch-project/oui/pull/1004)) - Add new `middle-out` order prop option to `OuiPaletteColorBlind` ([#856](https://github.com/opensearch-project/oui/pull/856)) +- Add new icons for OpenSearch Dashboards v2.10.0 ([#1014](https://github.com/opensearch-project/oui/pull/1014)) ### 🐛 Bug Fixes diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js index 82c4eadda3..e727245082 100644 --- a/src-docs/src/views/icon/icons.js +++ b/src-docs/src/views/icon/icons.js @@ -47,7 +47,10 @@ export const iconTypes = [ 'bug', 'bullseye', 'calendar', + 'chatLeft', + 'chatRight', 'check', + 'checkInCircleEmpty', 'checkInCircleFilled', 'cheer', 'clock', @@ -124,6 +127,10 @@ export const iconTypes = [ 'indexSettings', 'inputOutput', 'inspect', + 'integrationGeneral', + 'integrationObservability', + 'integrationSearch', + 'integrationSecurity', 'invert', 'ip', 'keyboardShortcut', @@ -186,6 +193,7 @@ export const iconTypes = [ 'questionInCircle', 'quote', 'radius', + 'redeploy', 'refresh', 'reporter', 'returnKey', @@ -226,10 +234,13 @@ export const iconTypes = [ 'tag', 'tear', 'temperature', + 'thumbsDown', + 'thumbsUp', 'timeline', 'timeslider', 'training', 'trash', + 'undeploy', 'unfold', 'unlink', 'user', diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap index f9903c1cdf..45c11b0451 100644 --- a/src/components/icon/__snapshots__/icon.test.tsx.snap +++ b/src/components/icon/__snapshots__/icon.test.tsx.snap @@ -1053,6 +1053,40 @@ exports[`OuiIcon props type canvasApp is rendered 1`] = ` `; +exports[`OuiIcon props type chatLeft is rendered 1`] = ` + +`; + +exports[`OuiIcon props type chatRight is rendered 1`] = ` + +`; + exports[`OuiIcon props type check is rendered 1`] = `