diff --git a/packages/eui/changelogs/upcoming/8756.md b/packages/eui/changelogs/upcoming/8756.md
new file mode 100644
index 00000000000..5d288145899
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8756.md
@@ -0,0 +1 @@
+- Replaced `question` icon glyph
\ No newline at end of file
diff --git a/packages/eui/src/components/basic_table/table_types.ts b/packages/eui/src/components/basic_table/table_types.ts
index e25ee60dfa5..275cef43ada 100644
--- a/packages/eui/src/components/basic_table/table_types.ts
+++ b/packages/eui/src/components/basic_table/table_types.ts
@@ -40,7 +40,7 @@ export type EuiTableColumnNameTooltipProps = {
content: ReactNode;
/**
* The icon type to display
- * @default 'questionInCircle'
+ * @default 'question'
*/
icon?: IconType;
/** Additional props for EuiIcon */
diff --git a/packages/eui/src/components/datagrid/data_grid.stories.tsx b/packages/eui/src/components/datagrid/data_grid.stories.tsx
index 61ae1355e21..25c91d2aca5 100644
--- a/packages/eui/src/components/datagrid/data_grid.stories.tsx
+++ b/packages/eui/src/components/datagrid/data_grid.stories.tsx
@@ -73,7 +73,7 @@ const CustomHeaderCell = ({ title }: { title: string }) => (
{title}
diff --git a/packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap b/packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap
index 614545be019..20f7842835e 100644
--- a/packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap
+++ b/packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -9201,6 +9201,32 @@ exports[`EuiIcon props type push is rendered 1`] = `
`;
+exports[`EuiIcon props type question is rendered 1`] = `
+
+`;
+
exports[`EuiIcon props type questionInCircle is rendered 1`] = `
`;
diff --git a/packages/eui/src/components/icon/assets/question_in_circle.tsx b/packages/eui/src/components/icon/assets/question.tsx
similarity index 52%
rename from packages/eui/src/components/icon/assets/question_in_circle.tsx
rename to packages/eui/src/components/icon/assets/question.tsx
index c0c9064e11a..204691d1aa8 100644
--- a/packages/eui/src/components/icon/assets/question_in_circle.tsx
+++ b/packages/eui/src/components/icon/assets/question.tsx
@@ -14,7 +14,7 @@ interface SVGRProps {
title?: string;
titleId?: string;
}
-const EuiIconQuestionInCircle = ({
+const EuiIconQuestion = ({
title,
titleId,
...props
@@ -28,7 +28,15 @@ const EuiIconQuestionInCircle = ({
{...props}
>
{title ? {title} : null}
-
+
+
+
);
-export const icon = EuiIconQuestionInCircle;
+export const icon = EuiIconQuestion;
diff --git a/packages/eui/src/components/icon/icon_glyphs.a11y.tsx b/packages/eui/src/components/icon/icon_glyphs.a11y.tsx
index 67bd18054e5..c6134ddcef6 100644
--- a/packages/eui/src/components/icon/icon_glyphs.a11y.tsx
+++ b/packages/eui/src/components/icon/icon_glyphs.a11y.tsx
@@ -201,7 +201,7 @@ describe('EuiIcons', () => {
'plusInCircleFilled',
'popout',
'push',
- 'questionInCircle',
+ 'question',
'quote',
'refresh',
'reporter',
diff --git a/packages/eui/src/components/icon/icon_map.ts b/packages/eui/src/components/icon/icon_map.ts
index 965bd6a677a..c9d2a2dfc5e 100644
--- a/packages/eui/src/components/icon/icon_map.ts
+++ b/packages/eui/src/components/icon/icon_map.ts
@@ -360,7 +360,8 @@ export const typeToPathMap = {
plusInSquare: 'plus_in_square',
popout: 'popout',
push: 'push',
- questionInCircle: 'question_in_circle',
+ questionInCircle: 'question', // NOTE: To be deprecated in favor of `question`
+ question: 'question',
quote: 'quote',
readOnly: 'readOnly',
recentlyViewedApp: 'app_recently_viewed',
diff --git a/packages/eui/src/components/icon/svgs/question.svg b/packages/eui/src/components/icon/svgs/question.svg
new file mode 100644
index 00000000000..e9270495f62
--- /dev/null
+++ b/packages/eui/src/components/icon/svgs/question.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/eui/src/components/icon/svgs/question_in_circle.svg b/packages/eui/src/components/icon/svgs/question_in_circle.svg
deleted file mode 100644
index 6ba56e94aa1..00000000000
--- a/packages/eui/src/components/icon/svgs/question_in_circle.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/packages/eui/src/components/markdown_editor/plugins/markdown_tooltip/renderer.tsx b/packages/eui/src/components/markdown_editor/plugins/markdown_tooltip/renderer.tsx
index 69f1672f973..18823a37a6e 100644
--- a/packages/eui/src/components/markdown_editor/plugins/markdown_tooltip/renderer.tsx
+++ b/packages/eui/src/components/markdown_editor/plugins/markdown_tooltip/renderer.tsx
@@ -26,7 +26,7 @@ export const tooltipMarkdownRenderer: FunctionComponent<
{children}
diff --git a/packages/eui/src/components/table/table_header_cell.tsx b/packages/eui/src/components/table/table_header_cell.tsx
index c2e2f9515b5..5b7765285c0 100644
--- a/packages/eui/src/components/table/table_header_cell.tsx
+++ b/packages/eui/src/components/table/table_header_cell.tsx
@@ -83,7 +83,7 @@ const CellContents = ({
canSort ? (
aria-label
@@ -19,7 +19,7 @@ exports[`EuiIconTip props color is rendered as the icon color 1`] = `
>
Info
@@ -32,7 +32,7 @@ exports[`EuiIconTip props size is rendered as the icon size 1`] = `
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
>
Info
diff --git a/packages/eui/src/components/tool_tip/icon_tip.stories.tsx b/packages/eui/src/components/tool_tip/icon_tip.stories.tsx
index 0432370749c..0128744d80c 100644
--- a/packages/eui/src/components/tool_tip/icon_tip.stories.tsx
+++ b/packages/eui/src/components/tool_tip/icon_tip.stories.tsx
@@ -40,7 +40,7 @@ const meta: Meta = {
),
],
args: {
- type: 'questionInCircle',
+ type: 'question',
position: 'top',
delay: 'regular',
display: 'inlineBlock',
diff --git a/packages/eui/src/components/tool_tip/icon_tip.tsx b/packages/eui/src/components/tool_tip/icon_tip.tsx
index 7d00fc10841..19554f7c6db 100644
--- a/packages/eui/src/components/tool_tip/icon_tip.tsx
+++ b/packages/eui/src/components/tool_tip/icon_tip.tsx
@@ -51,7 +51,7 @@ export type EuiIconTipProps = Omit<
};
export const EuiIconTip: FunctionComponent = ({
- type = 'questionInCircle',
+ type = 'question',
'aria-label': ariaLabel,
color,
size,
diff --git a/packages/eui/src/components/tour/tour.stories.tsx b/packages/eui/src/components/tour/tour.stories.tsx
index e100b9f95c5..0feddaed456 100644
--- a/packages/eui/src/components/tour/tour.stories.tsx
+++ b/packages/eui/src/components/tour/tour.stories.tsx
@@ -60,7 +60,7 @@ export const Playground: Story = {
minWidth: 300,
maxWidth: 600,
decoration: 'beacon',
- children: ,
+ children: ,
onFinish: () => {},
anchorPosition: 'downCenter',
},
diff --git a/packages/eui/src/components/tour/tour_step.stories.tsx b/packages/eui/src/components/tour/tour_step.stories.tsx
index 5a76eeea3b3..7bc0d196ea7 100644
--- a/packages/eui/src/components/tour/tour_step.stories.tsx
+++ b/packages/eui/src/components/tour/tour_step.stories.tsx
@@ -64,6 +64,6 @@ export const Playground: Story = {
content: 'Tour step content',
isStepOpen: true,
stepsTotal: 3,
- children: ,
+ children: ,
},
};
diff --git a/packages/website/docs/components/containers/popover.mdx b/packages/website/docs/components/containers/popover.mdx
index 293d9841b1c..b045e7cf030 100644
--- a/packages/website/docs/components/containers/popover.mdx
+++ b/packages/website/docs/components/containers/popover.mdx
@@ -152,7 +152,7 @@ export default () => {
@@ -171,7 +171,7 @@ export default () => {
@@ -190,7 +190,7 @@ export default () => {
@@ -213,7 +213,7 @@ export default () => {
@@ -232,7 +232,7 @@ export default () => {
@@ -251,7 +251,7 @@ export default () => {
@@ -274,7 +274,7 @@ export default () => {
@@ -293,7 +293,7 @@ export default () => {
@@ -312,7 +312,7 @@ export default () => {
@@ -335,7 +335,7 @@ export default () => {
@@ -354,7 +354,7 @@ export default () => {
@@ -373,7 +373,7 @@ export default () => {
@@ -436,7 +436,7 @@ export default () => {
@@ -463,7 +463,7 @@ export default () => {
@@ -494,7 +494,7 @@ export default () => {
@@ -584,7 +584,7 @@ export default () => {
panelPaddingSize="s"
button={
@@ -614,7 +614,7 @@ export default () => {
panelPaddingSize="none"
button={
@@ -645,7 +645,7 @@ export default () => {
@@ -678,7 +678,7 @@ export default () => {
panelPaddingSize="none"
button={
@@ -711,7 +711,7 @@ export default () => {
@@ -742,7 +742,7 @@ export default () => {
panelPaddingSize="none"
button={
diff --git a/packages/website/docs/components/display/icons/icon_types.ts b/packages/website/docs/components/display/icons/icon_types.ts
index 24785cb1755..beb4c9fdb71 100644
--- a/packages/website/docs/components/display/icons/icon_types.ts
+++ b/packages/website/docs/components/display/icons/icon_types.ts
@@ -217,7 +217,7 @@ export const iconTypes: Array = [
'plusInSquare',
'popout',
'push',
- 'questionInCircle',
+ 'question',
'quote',
'readOnly',
'refresh',
diff --git a/packages/website/docs/components/forms/layouts/compressed-forms.mdx b/packages/website/docs/components/forms/layouts/compressed-forms.mdx
index d0070873e22..9ce0a33c9e4 100644
--- a/packages/website/docs/components/forms/layouts/compressed-forms.mdx
+++ b/packages/website/docs/components/forms/layouts/compressed-forms.mdx
@@ -268,7 +268,7 @@ export default () => {
## Contextual help
-When using compressed, horizontal form styles, it is best not to overload the UI with expansive help text. If it's short and part of the validation, use `helpText`. However, if it's an explanation of the control, consider wrapping the label with an [EuiToolTip](../../display/tooltip.mdx) and appending the `questionInCircle` icon to it.
+When using compressed, horizontal form styles, it is best not to overload the UI with expansive help text. If it's short and part of the validation, use `helpText`. However, if it's an explanation of the control, consider wrapping the label with an [EuiToolTip](../../display/tooltip.mdx) and appending the `question` icon to it.
```tsx interactive
import React from 'react';
@@ -295,7 +295,7 @@ export default () => (
label={
- Label
+ Label
}
@@ -624,7 +624,7 @@ export default () => {
label={
- Label
+ Label
}
diff --git a/packages/website/docs/patterns/help-content.mdx b/packages/website/docs/patterns/help-content.mdx
index 1843724cbe4..9be761a88bc 100644
--- a/packages/website/docs/patterns/help-content.mdx
+++ b/packages/website/docs/patterns/help-content.mdx
@@ -21,7 +21,7 @@ Defining terms is particularly useful in onboarding experiences or in the first
**Interaction**
-- Question mark icon with the `primary` color directly following the term to explain.
+- Question mark icon with the `primary` color directly following the term to explain.
- On hover, a [tooltip](../components/display/tooltip.mdx) appears.
- Use it anywhere needed: navigation, titles, or inline.