Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

refactor(site): Refactor alerts#7587

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.

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

Already on GitHub?Sign in to your account

Merged
BrunoQuaresma merged 13 commits intomainfrombq/refactor-alerts
May 18, 2023
Merged
Show file tree
Hide file tree
Changes from1 commit
Commits
Show all changes
13 commits
Select commitHold shift + click to select a range
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
PrevPrevious commit
NextNext commit
Refactor alerts
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committedMay 17, 2023
commitd56172c984acc589efb834bfef81a902432ec985
10 changes: 2 additions & 8 deletionssite/src/components/Alert/Alert.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,7 @@ export default meta
type Story = StoryObj<typeof Alert>

const ExampleAction = (
<Button onClick={() => null} size="small">
<Button onClick={() => null} size="small" variant="text">
Button
</Button>
)
Expand All@@ -24,13 +24,6 @@ export const Warning: Story = {
},
}

export const ErrorWithDefaultMessage: Story = {
args: {
children: "This is an error",
severity: "error",
},
}

export const WarningWithDismiss: Story = {
args: {
children: "This is a warning",
Expand DownExpand Up@@ -58,6 +51,7 @@ export const WarningWithActionAndDismiss: Story = {

export const WithChildren: Story = {
args: {
severity: "warning",
children: (
<div>
This is a message with a <Link href="#">link</Link>
Expand Down
14 changes: 6 additions & 8 deletionssite/src/components/Alert/Alert.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import { useState, FC, ReactNode, PropsWithChildren } from "react"
import Collapse from "@mui/material/Collapse"
import { Stack } from "components/Stack/Stack"
// eslint-disable-next-line no-restricted-imports -- It is the base component
import MuiAlert, { AlertProps as MuiAlertProps } from "@mui/material/Alert"
import Button from "@mui/material/Button"
Expand DownExpand Up@@ -28,23 +27,22 @@ export const Alert: FC<AlertProps> = ({
<MuiAlert
severity={severity}
action={
<Stack direction="row">
<>
{/* CTAs passed in by the consumer */}
{actions.length > 0 &&
actions.map((action) => <div key={String(action)}>{action}</div>)}

{/* retry CTA */}
{onRetry && (
<div>
<Button size="small" onClick={onRetry}>
Retry
</Button>
</div>
<Button variant="text" size="small" onClick={onRetry}>
Retry
</Button>
)}

{/* close CTA */}
{dismissible && (
<Button
variant="text"
size="small"
onClick={() => {
setOpen(false)
Expand All@@ -55,7 +53,7 @@ export const Alert: FC<AlertProps> = ({
Dismiss
</Button>
)}
</Stack>
</>
}
>
{children}
Expand Down
2 changes: 1 addition & 1 deletionsite/src/components/Alert/ErrorAlert.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,7 @@ export default meta
type Story = StoryObj<typeof Alert>

const ExampleAction = (
<Button onClick={() => null} size="small">
<Button onClick={() => null} size="small" variant="text">
Button
</Button>
)
Expand Down
5 changes: 4 additions & 1 deletionsite/src/components/Alert/ErrorAlert.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
import { AlertProps, Alert } from "./Alert"
import AlertTitle from "@mui/material/AlertTitle"
import Box from "@mui/material/Box"
import { getErrorMessage, getErrorDetail } from "api/errors"
import { FC } from "react"

Expand All@@ -14,7 +15,9 @@ export const ErrorAlert: FC<
{detail ? (
<>
<AlertTitle>{message}</AlertTitle>
{detail}
<Box component="span" color={(theme) => theme.palette.text.secondary}>
{detail}
</Box>
</>
) : (
message
Expand Down
9 changes: 2 additions & 7 deletionssite/src/components/WorkspaceActions/Buttons.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,6 @@ export const UpdateButton: FC<WorkspaceAction> = ({
loading={loading}
loadingIndicator="Updating..."
loadingPosition="start"
size="small"
data-testid="workspace-update-button"
startIcon={<CloudQueueIcon />}
onClick={handleAction}
Expand All@@ -35,7 +34,6 @@ export const UpdateButton: FC<WorkspaceAction> = ({
export const StartButton: FC<WorkspaceAction> = ({ handleAction, loading }) => {
return (
<LoadingButton
size="small"
loading={loading}
loadingIndicator="Starting..."
loadingPosition="start"
Expand All@@ -50,7 +48,6 @@ export const StartButton: FC<WorkspaceAction> = ({ handleAction, loading }) => {
export const StopButton: FC<WorkspaceAction> = ({ handleAction, loading }) => {
return (
<LoadingButton
size="small"
loading={loading}
loadingIndicator="Stopping..."
loadingPosition="start"
Expand All@@ -71,7 +68,6 @@ export const RestartButton: FC<WorkspaceAction> = ({
loading={loading}
loadingIndicator="Restarting..."
loadingPosition="start"
size="small"
startIcon={<ReplayIcon />}
onClick={handleAction}
data-testid="workspace-restart-button"
Expand All@@ -83,7 +79,7 @@ export const RestartButton: FC<WorkspaceAction> = ({

export const CancelButton: FC<WorkspaceAction> = ({ handleAction }) => {
return (
<Buttonsize="small"startIcon={<BlockIcon />} onClick={handleAction}>
<Button startIcon={<BlockIcon />} onClick={handleAction}>
Cancel
</Button>
)
Expand All@@ -95,7 +91,7 @@ interface DisabledProps {

export const DisabledButton: FC<DisabledProps> = ({ label }) => {
return (
<Buttonsize="small"startIcon={<BlockOutlined />} disabled>
<Button startIcon={<BlockOutlined />} disabled>
{label}
</Button>
)
Expand All@@ -109,7 +105,6 @@ export const ActionLoadingButton: FC<LoadingProps> = ({ label }) => {
return (
<LoadingButton
loading
size="small"
loadingPosition="start"
loadingIndicator={label}
// This icon can be anything
Expand Down
36 changes: 29 additions & 7 deletionssite/src/theme/theme.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,9 +3,9 @@ import { ThemeOptions, createTheme, Theme } from "@mui/material/styles"
import { BODY_FONT_FAMILY, borderRadius } from "./constants"

// MUI does not have aligned heights for buttons and inputs so we have to "hack" it a little bit
const BUTTON_LG_HEIGHT =46
const BUTTON_MD_HEIGHT =40
const BUTTON_SM_HEIGHT =36
const BUTTON_LG_HEIGHT =42
const BUTTON_MD_HEIGHT =36
const BUTTON_SM_HEIGHT =30

export type PaletteIndex = keyof Theme["palette"]
export type PaletteStatusIndex = Extract<
Expand DownExpand Up@@ -40,7 +40,7 @@ export let dark = createTheme({
divider: colors.gray[13],
warning: {
light: colors.orange[7],
main: colors.orange[11],
main: colors.orange[9],
dark: colors.orange[15],
},
success: {
Expand All@@ -54,7 +54,8 @@ export let dark = createTheme({
contrastText: colors.gray[4],
},
error: {
main: colors.red[5],
light: colors.red[7],
main: colors.red[9],
dark: colors.red[15],
contrastText: colors.gray[4],
},
Expand DownExpand Up@@ -126,6 +127,7 @@ dark = createTheme(dark, {
fontWeight: 500,
height: BUTTON_MD_HEIGHT,
padding: theme.spacing(1, 2),

whiteSpace: "nowrap",
":focus-visible": {
outline: `2px solid ${theme.palette.primary.main}`,
Expand DownExpand Up@@ -164,12 +166,12 @@ dark = createTheme(dark, {
},
iconSizeMedium: {
"& > .MuiSvgIcon-root": {
fontSize:16,
fontSize:14,
},
},
iconSizeSmall: {
"& > .MuiSvgIcon-root": {
fontSize:14,
fontSize:13,
},
},
},
Expand DownExpand Up@@ -400,6 +402,26 @@ dark = createTheme(dark, {
defaultProps: {
variant: "outlined",
},
styleOverrides: {
action: {
paddingTop: 2, // Idk why it is not aligned as expected
},
icon: {
fontSize: 16,
marginTop: "4px", // The size of text is 24 so (24 - 16)/2 = 4
},
message: ({ theme }) => ({
color: theme.palette.text.primary,
}),
},
},
MuiAlertTitle: {
styleOverrides: {
root: {
fontSize: "inherit",
marginBottom: 0,
},
},
},
},
} as ThemeOptions)
[8]ページ先頭
©2009-2025 Movatter.jp