Skip to content

Migrate Kyper AttentionFilled Icon to MXUI #356

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mwclemy wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Migrate Kyper AttentionFilled Icon to MXUI #356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dfe6168
removed TooSmallDialog component
Jul 28, 2026
c01512a
updated AttentionFilled to Icon
Jul 29, 2026
7aacc87
removed the typing
Jul 29, 2026
5ecbd0f
feat: migrate kyper AttentionFilled Icon to MXUI
Jul 29, 2026
db6f4d4
Fix formatting issues in README props table
mwclemy Jul 29, 2026
47458e5
Fix markdown formatting in Props table
mwclemy Jul 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,7 @@ const App = () => {
| `onShowConnectSuccessSurvey` | [`AnalyticContextType`](./typings/connectProps.d.ts#L100) | The connect widget provides a way to let your analytics provider know that the connect success survey was shown. [More details](./docs/ANALYTICS.md#onShowConnectSuccessSurvey) |
| `onSubmitConnectSuccessSurvey` | [`AnalyticContextType`](./typings/connectProps.d.ts#L101) | The connect widget provides a way to submit connect success survey responses using your own analytics provider. [More details](./docs/ANALYTICS.md#onSubmitConnectSuccessSurvey) | |
| `profiles` | [`ProfilesTypes`](./typings/connectProps.d.ts) | The connect widget uses the profiles to set the initial state of the widget. [More details](./docs/PROFILES.md) | See more details |
| `userFeatures` | [`UserFeaturesType`](./typings/connectProps.d.ts) | The connect widget uses user features to determine the behavior of the widget. [More details](./docs/USER_FEATURES.md) | See more details |
| `showTooSmallDialog` | `boolean` | The connect widget can show a warning when the widget size is below the supported 320px. | `true` |
| `userFeatures` | [`UserFeaturesType`](./typings/connectProps.d.ts) | The connect widget uses user features to determine the behavior of the widget. [More details](./docs/USER_FEATURES.md) | See more details
| `webSocketConnection` | `object` | An object containing `isConnected()` function and `webSocketMessages$` observable for real-time updates. | `null` |
| `experimentalFeatures` | `object` | An object to enable or disable experimental features like `useWebSockets: true`. | `null` |

Expand Down
3 changes: 0 additions & 3 deletions src/ConnectWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import Connect from 'src/Connect'
import { WidgetDimensionObserver } from 'src/components/app/WidgetDimensionObserver'
import { initGettextLocaleData } from 'src/utilities/Personalization'
import { ConnectedTokenProvider } from 'src/ConnectedTokenProvider'
import { TooSmallDialog } from 'src/components/app/TooSmallDialog'
import { setLocalizedContent } from 'src/redux/reducers/localizedContentSlice'
import { WebSocketProvider } from 'src/context/WebSocketContext'
import './sharedVariables.css'
Expand All @@ -23,7 +22,6 @@ export const ConnectWidgetWithoutReduxProvider = ({
onPostMessage = () => {},
onAnalyticPageview = () => {},
postMessageEventOverrides,
showTooSmallDialog = true,
webSocketConnection,
...props
}: any) => {
Expand All @@ -40,7 +38,6 @@ export const ConnectWidgetWithoutReduxProvider = ({
<WebSocketProvider value={webSocketConnection}>
<PostMessageContext.Provider value={{ onPostMessage, postMessageEventOverrides }}>
<WidgetDimensionObserver heightOffset={0}>
{showTooSmallDialog && <TooSmallDialog onAnalyticPageview={onAnalyticPageview} />}
<Connect onAnalyticPageview={onAnalyticPageview} {...props} />
</WidgetDimensionObserver>
</PostMessageContext.Provider>
Expand Down
13 changes: 7 additions & 6 deletions src/components/ConfigError.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React from 'react'
import { Text } from '@mxenabled/mxui'
import { Icon, Text } from '@mxenabled/mxui'
import { useTokens } from '@kyper/tokenprovider'
import { Container } from 'src/components/Container'
import { AttentionFilled } from '@kyper/icon/AttentionFilled'

interface ConfigError {
title: string
Expand All @@ -20,7 +19,12 @@ export const ConfigError: React.FC<ConfigErrorProps> = ({ error }) => {
return (
<Container>
<div style={styles.container}>
<AttentionFilled color="#4D4D4D" size={32} style={styles.errorIcon} />
<Icon
fill={true}
name="error"
size={32}
sx={{ color: '#4D4D4D', marginBottom: tokens.Spacing.Large }}

@platypus801 platypus801 Jul 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same issue here. we should be using color tokens rather than raw color values.

@wesrisenmay-mx wesrisenmay-mx Jul 30, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most of the time I think using Stack spacing={?} is better than adding margins to create space between things.

https://share.gemini.google/nmado7l7jsei

/>
<Text component={'h2'} style={styles.errorTitle} truncate={false} variant="H2">
{error.title}
</Text>
Expand All @@ -45,7 +49,4 @@ const getStyles = (tokens: any) => ({
errorTitle: {
marginBottom: tokens.Spacing.Tiny,
},
errorIcon: {
marginBottom: tokens.Spacing.Large,
},
})
13 changes: 7 additions & 6 deletions src/components/ConnectSuccessSurvey.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React, { useState, useImperativeHandle, useContext } from 'react'
import { Text } from '@mxenabled/mxui'
import { Icon, Text } from '@mxenabled/mxui'
import { Button, TextField } from '@mui/material'
import ToggleButton from '@mui/material/ToggleButton'
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
import { AttentionFilled } from '@kyper/icon/AttentionFilled'
import { useTokens } from '@kyper/tokenprovider'

import { __ } from 'src/utilities/Intl'
Expand Down Expand Up @@ -170,7 +169,12 @@ export const ConnectSuccessSurvey = React.forwardRef<
)}
{showErrorMessage && (
<div style={styles.errorMessage}>
<AttentionFilled color="#E32727" size={16} style={styles.errorIcon} />
<Icon
fill={true}
name="error"
size={16}
sx={{ color: '#E32727', marginRight: tokens.Spacing.Tiny }}

@platypus801 platypus801 Jul 30, 2026 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not hardcode #E32727 here. We should be using tokens.

@wesrisenmay-mx wesrisenmay-mx Jul 30, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same spacing comment here

/>
<Text color="#E32727" sx={{ fontSize: '12px' }} variant="XSmall">

@platypus801 platypus801 Jul 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here. let's use tokens instead of raw values.

{__('Please select an option before continuing.')}
</Text>
Expand Down Expand Up @@ -255,9 +259,6 @@ const getStyles = (tokens: any) => ({
alignItems: 'center',
width: '100%',
},
errorIcon: {
marginRight: tokens.Spacing.Tiny,
},
textQuestion: {
display: 'flex',
flexDirection: 'column',
Expand Down
5 changes: 2 additions & 3 deletions src/components/DeleteMemberSurvey.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React, { useState, useEffect, useRef } from 'react'
import PropTypes from 'prop-types'
import { Text } from '@mxenabled/mxui'
import { Icon, Text } from '@mxenabled/mxui'
import { useTokens } from '@kyper/tokenprovider'
import { MessageBox } from '@kyper/messagebox'
import { AttentionFilled } from '@kyper/icon/AttentionFilled'
import { defer } from 'rxjs'
import FocusTrap from 'focus-trap-react'
import { Button, FormLabel, FormControl } from '@mui/material'
Expand Down Expand Up @@ -171,7 +170,7 @@ export const DeleteMemberSurvey = (props) => {

{isSubmitted && !selectedReason && (
<section role="alert" style={styles.errorContent}>
<AttentionFilled color={tokens.Color.Error300} />
<Icon fill={true} name="error" size={16} sx={{ color: tokens.Color.Error300 }} />

@wesrisenmay-mx wesrisenmay-mx Jul 30, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

color prop here as well

@mwclemy mwclemy Jul 30, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@platypus801 The token value here would be error.300 right?

<p style={styles.errorMessage}>{__('Choose a reason for deleting')}</p>
</section>
)}
Expand Down
16 changes: 6 additions & 10 deletions src/components/GenericError.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import { AttentionFilled } from '@kyper/icon/AttentionFilled'
import { useTokens } from '@kyper/tokenprovider'
import { Text } from '@mxenabled/mxui'
import { Icon, Text } from '@mxenabled/mxui'

import { isRunningE2ETests } from 'src/utilities/e2e'
import { PageviewInfo } from 'src/const/Analytics'
Expand All @@ -27,11 +26,11 @@ export const GenericError = ({ loadError, onAnalyticPageview, subtitle, title })

return (
<div style={styles.container}>
<AttentionFilled
color={tokens.TextColor.Default}
height={48}
styles={styles.icon}
width={48}
<Icon
fill={true}
name="error"
size={48}
sx={{ color: tokens.TextColor.Default, marginBottom: tokens.Spacing.XLarge }}

@wesrisenmay-mx wesrisenmay-mx Jul 30, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Color prop and stack

@platypus801 platypus801 Jul 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i believe icons have a color prop so we don't need to use sx. https://mxui.kube.qa.internal.mx/?path=/story/mxui-components-icon--icons. i believe it uses inherit by default to match the text it is with.

/>
<Text component="h1" truncate={false} variant="H2">
{title}
Expand All @@ -57,9 +56,6 @@ function getStyles(tokens) {
padding: tokens.Spacing.XSMALL,
textAlign: 'center',
},
icon: {
marginBottom: tokens.Spacing.XLarge,
},
}
}

Expand Down
5 changes: 2 additions & 3 deletions src/components/LeavingNoticeFlat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ import PropTypes from 'prop-types'

import { __ } from 'src/utilities/Intl'

import { Text } from '@mxenabled/mxui'
import { AttentionFilled } from '@kyper/icon/AttentionFilled'
import { Text, Icon } from '@mxenabled/mxui'
import { Button } from '@mui/material'
import { useTokens } from '@kyper/tokenprovider'

Expand Down Expand Up @@ -36,7 +35,7 @@ export const LeavingNoticeFlat = ({ onContinue, onCancel, portalTo = 'connect-wr
>
{__('You are leaving')}
</Text>
<AttentionFilled color={tokens.BackgroundColor.MessageBoxError} size={24} />
<Icon color="error" fill={true} name="error" size={24} />
</div>
<Text
component="p"
Expand Down
10 changes: 7 additions & 3 deletions src/components/ViewTitle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import React from 'react'
import PropTypes from 'prop-types'

import { Text } from '@mxenabled/mxui'
import { Icon, Text } from '@mxenabled/mxui'
import { useTokens } from '@kyper/tokenprovider'
import { InfoFilled } from '@kyper/icon/InfoFilled'
import { AttentionFilled } from '@kyper/icon/AttentionFilled'

import { ReadableStatuses } from 'src/const/Statuses'

Expand All @@ -21,7 +20,12 @@ export const ViewTitle = ({ connectionStatus, title }) => {
<InfoFilled color={tokens.BackgroundColor.MessageBoxHelp} size={24} />
)}
{connectionStatus === ReadableStatuses.REJECTED && (
<AttentionFilled color={tokens.BackgroundColor.MessageBoxError} size={24} />
<Icon
fill={true}
name="error"
size={24}
sx={{ color: tokens.BackgroundColor.MessageBoxError }}

@wesrisenmay-mx wesrisenmay-mx Jul 30, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that we're trying to get rid of kyper we shouldn't use kyper tokens

@mwclemy mwclemy Jul 30, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@platypus801 tokens.BackgroundColor.MessageBoxError is #DF320C. What would that translate to in MUI?

/>
)}
</div>
)
Expand Down
175 changes: 0 additions & 175 deletions src/components/app/TooSmallDialog.tsx
View file
Open in desktop

This file was deleted.

Loading
Loading