Commit48bb534

authored

chore: fix idle state icon when disabled (#18554)

When the workspace is off, we set a disabled text/stroke color, but forthe idle icon that also needs a fill, this only changed the outlinemaking it look weird. Instead, move the disabled logic into thecomponent so we can apply a matching fill.I felt it looked too thick with both the outline and fill, so I alsoremoved the outline.Really I think maybe the workspace status should be a separate columnrather than disabling these icons, but this maintains the status quo.Before with mismatching stroke and fill color:![screenshot](https://github.com/user-attachments/assets/961014b7-1e26-49f0-aa87-834f2f367618)After with disabled fill and stroke removal:![screenshot](https://github.com/user-attachments/assets/205e4515-dc01-4437-87ec-a0f8a546da3b)Enabled fill and stroke removal:![screenshot](https://github.com/user-attachments/assets/04f5914e-f96c-4c75-8873-e3fc9c854d95)

1 parent6c713d5 commit48bb534Copy full SHA for 48bb534

File tree

+44

-7

lines changed

+44

-7

lines changed

Lines changed: 9 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -24,16 +24,23 @@ export const AppStatusStateIcon: FC<AppStatusStateIconProps> = ({`
`24`	`24`	`latest,`
`25`	`25`	`className:customClassName,`
`26`	`26`	`})=>{`
`27`		`-constclassName=cn(["size-4 shrink-0",customClassName]);`
	`27`	`+constclassName=cn([`
	`28`	`+"size-4 shrink-0",`
	`29`	`+customClassName,`
	`30`	`+disabled&&"text-content-disabled",`
	`31`	`+]);`
`28`	`32`
`29`	`33`	`switch(state){`
`30`	`34`	`case"idle":`
	`35`	`+// The pause icon is outlined; add a fill since it is hard to see and`
	`36`	`+// remove the stroke so it is not overly thick.`
`31`	`37`	`return(`
`32`	`38`	`<PauseIcon`
	`39`	`+css={{strokeWidth:0}}`
`33`	`40`	`className={cn([`
`34`	`41`	`"text-content-secondary",`
`35`		`-"fill-content-secondary",`
`36`	`42`	`className,`
	`43`	`+disabled ?"fill-content-disabled" :"fill-content-secondary",`
`37`	`44`	`])}`
`38`	`45`	`/>`
`39`	`46`	`);`

Lines changed: 35 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -69,9 +69,43 @@ export const LongMessage: Story = {`
`69`	`69`	`},`
`70`	`70`	`};`
`71`	`71`
`72`		`-exportconstDisabled:Story={`
	`72`	`+exportconstDisabledComplete:Story={`
`73`	`73`	`args:{`
`74`	`74`	`status:MockWorkspaceAppStatus,`
`75`	`75`	`disabled:true,`
`76`	`76`	`},`
`77`	`77`	`};`
	`78`	`+`
	`79`	`+exportconstDisabledFailure:Story={`
	`80`	`+args:{`
	`81`	`+status:{`
	`82`	`+...MockWorkspaceAppStatus,`
	`83`	`+state:"failure",`
	`84`	`+message:"Couldn't figure out how to start the dev server",`
	`85`	`+},`
	`86`	`+disabled:true,`
	`87`	`+},`
	`88`	`+};`
	`89`	`+`
	`90`	`+exportconstDisabledWorking:Story={`
	`91`	`+args:{`
	`92`	`+status:{`
	`93`	`+...MockWorkspaceAppStatus,`
	`94`	`+state:"working",`
	`95`	`+message:"Starting dev server...",`
	`96`	`+uri:"",`
	`97`	`+},`
	`98`	`+disabled:true,`
	`99`	`+},`
	`100`	`+};`
	`101`	`+`
	`102`	`+exportconstDisabledIdle:Story={`
	`103`	`+args:{`
	`104`	`+status:{`
	`105`	`+...MockWorkspaceAppStatus,`
	`106`	`+state:"idle",`
	`107`	`+message:"Done for now",`
	`108`	`+},`
	`109`	`+disabled:true,`
	`110`	`+},`
	`111`	`+};`

Lines changed: 0 additions & 4 deletions

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,6 @@ import {`
`7`	`7`	`}from"components/Tooltip/Tooltip";`
`8`	`8`	`importcapitalizefrom"lodash/capitalize";`
`9`	`9`	`import{AppStatusStateIcon}from"modules/apps/AppStatusStateIcon";`
`10`		`-import{cn}from"utils/cn";`
`11`	`10`
`12`	`11`	`typeWorkspaceAppStatusProps={`
`13`	`12`	`status:APIWorkspaceAppStatus\|null;`
`@@ -37,9 +36,6 @@ export const WorkspaceAppStatus = ({`
`37`	`36`	`latest`
`38`	`37`	`disabled={disabled}`
`39`	`38`	`state={status.state}`
`40`		`-className={cn({`
`41`		`-"text-content-disabled":disabled,`
`42`		`-})}`
`43`	`39`	`/>`
`44`	`40`	`<spanclassName="whitespace-nowrap max-w-72 overflow-hidden text-ellipsis text-sm text-content-primary font-medium">`
`45`	`41`	`{message}`

Comments

(0)