Skip to content

Commit

Permalink
fix: Stop wrapping icon with the label (#3918)
Browse files Browse the repository at this point in the history 
Part of #3914

## Description

Clicking on info icon page settings was resulting in input focus,
because it was inside the label

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
  • Loading branch information
@kof
kof authored Aug 11, 2024
1 parent f7a3a46 commit 403d7b2
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 104 deletions.
26 changes: 12 additions & 14 deletions apps/builder/app/builder/features/sidebar-left/panels/pages/folder-settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,20 +184,18 @@ const FormFields = ({
</Grid>

<Grid gap={1}>
<Label htmlFor={fieldIds.slug}>
<Flex align="center" css={{ gap: theme.spacing[3] }}>
Slug
<Tooltip
content={"Slug will be used as part of the path to the page"}
variant="wrapped"
>
<HelpIcon
color={rawTheme.colors.foregroundSubtle}
tabIndex={0}
/>
</Tooltip>
</Flex>
</Label>
<Flex align="center" css={{ gap: theme.spacing[3] }}>
<Label htmlFor={fieldIds.slug}>Slug</Label>
<Tooltip
content={"Slug will be used as part of the path to the page"}
variant="wrapped"
>
<HelpIcon
color={rawTheme.colors.foregroundSubtle}
tabIndex={0}
/>
</Tooltip>
</Flex>
<InputErrorsTooltip errors={errors.slug}>
<InputField
tabIndex={1}
Expand Down
169 changes: 79 additions & 90 deletions apps/builder/app/builder/features/sidebar-left/panels/pages/page-settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,61 +329,53 @@ const PathField = ({
const id = useId();
return (
<Grid gap={1}>
<Label htmlFor={id}>
{allowDynamicData && isFeatureEnabled("cms") ? (
<Flex align="center" gap={1}>
Dynamic Path
<Tooltip
content="The path can include dynamic parameters like :name, which could be made optional using :name?, or have a wildcard such as /* or /:name* to store whole remaining part at the end of the URL."
variant="wrapped"
>
<HelpIcon
color={rawTheme.colors.foregroundSubtle}
tabIndex={-1}
/>
</Tooltip>
</Flex>
) : (
<Flex align="center" gap={1}>
Path
<Tooltip
content={
<>
<Text>
Path is a subset of the URL that looks like this:
&quot;/blog&quot;.
</Text>
{allowDynamicData === false && isFeatureEnabled("cms") && (
<>
<Text>
To make the path dynamic and use it with CMS, you can
use parameters and other features. CMS features are part
of the Pro plan.
</Text>
<Link
className={buttonStyle({ color: "gradient" })}
css={{ marginTop: theme.spacing[5], width: "100%" }}
color="contrast"
underline="none"
target="_blank"
href="https://webstudio.is/pricing"
>
Upgrade
</Link>
</>
)}
</>
}
variant="wrapped"
>
<HelpIcon
color={rawTheme.colors.foregroundSubtle}
tabIndex={-1}
/>
</Tooltip>
</Flex>
)}
</Label>
{allowDynamicData && isFeatureEnabled("cms") ? (
<Flex align="center" gap={1}>
<Label htmlFor={id}>Dynamic Path</Label>
<Tooltip
content="The path can include dynamic parameters like :name, which could be made optional using :name?, or have a wildcard such as /* or /:name* to store whole remaining part at the end of the URL."
variant="wrapped"
>
<HelpIcon color={rawTheme.colors.foregroundSubtle} tabIndex={-1} />
</Tooltip>
</Flex>
) : (
<Flex align="center" gap={1}>
<Label htmlFor={id}>Path</Label>
<Tooltip
content={
<>
<Text>
Path is a subset of the URL that looks like this:
&quot;/blog&quot;.
</Text>
{allowDynamicData === false && isFeatureEnabled("cms") && (
<>
<Text>
To make the path dynamic and use it with CMS, you can use
parameters and other features. CMS features are part of
the Pro plan.
</Text>
<Link
className={buttonStyle({ color: "gradient" })}
css={{ marginTop: theme.spacing[5], width: "100%" }}
color="contrast"
underline="none"
target="_blank"
href="https://webstudio.is/pricing"
>
Upgrade
</Link>
</>
)}
</>
}
variant="wrapped"
>
<HelpIcon color={rawTheme.colors.foregroundSubtle} tabIndex={-1} />
</Tooltip>
</Flex>
)}
<InputErrorsTooltip errors={errors}>
<InputField
color={errors && "error"}
Expand Down Expand Up @@ -411,30 +403,28 @@ const StatusField = ({
const { variableValues, scope, aliases } = useStore($pageRootScope);
return (
<Grid gap={1}>
<Label htmlFor={id}>
<Flex align="center" gap={1}>
Status Code
<Tooltip
content={
<Text>
Status code value can be a{" "}
<Link
color="inherit"
target="_blank"
href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status"
>
HTTP Status
</Link>{" "}
number or an expression that returns the status code dynamic
response handling.
</Text>
}
variant="wrapped"
>
<HelpIcon color={rawTheme.colors.foregroundSubtle} tabIndex={-1} />
</Tooltip>
</Flex>
</Label>
<Flex align="center" gap={1}>
<Label htmlFor={id}>Status Code </Label>
<Tooltip
content={
<Text>
Status code value can be a{" "}
<Link
color="inherit"
target="_blank"
href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status"
>
HTTP Status
</Link>{" "}
number or an expression that returns the status code dynamic
response handling.
</Text>
}
variant="wrapped"
>
<HelpIcon color={rawTheme.colors.foregroundSubtle} tabIndex={-1} />
</Tooltip>
</Flex>
<BindingControl>
{allowDynamicData && (
<BindingPopover
Expand Down Expand Up @@ -487,17 +477,16 @@ const RedirectField = ({
const { variableValues, scope, aliases } = useStore($pageRootScope);
return (
<Grid gap={1}>
<Label htmlFor={id}>
<Flex align="center" gap={1}>
Redirect
<Tooltip
content="Redirect value can be a path or an expression that returns a path for dynamic response handling."
variant="wrapped"
>
<HelpIcon color={rawTheme.colors.foregroundSubtle} tabIndex={-1} />
</Tooltip>
</Flex>
</Label>
<Flex align="center" gap={1}>
<Label htmlFor={id}>Redirect </Label>
<Tooltip
content="Redirect value can be a path or an expression that returns a path for dynamic response handling."
variant="wrapped"
>
<HelpIcon color={rawTheme.colors.foregroundSubtle} tabIndex={-1} />
</Tooltip>
</Flex>

<BindingControl>
{allowDynamicData && (
<BindingPopover
Expand Down

0 comments on commit 403d7b2

Please sign in to comment.