commonscomputer/cal.diy
5
0 Fork 0
Code Issues Pull Requests Actions 2.3k Packages Projects Releases Wiki Activity

fix: spacing between editable heading and pencil fixed (#25500)

Browse Source 
* fix: spacing in editable heading fixed

* fix: set pointer events auto in input

* fix: updated availability test

* fix: updated pointer events

---------

Co-authored-by: Pallav <90088723+Pallava-Joshi@users.noreply.github.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Pedro Castro <pedro@cal.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
This commit is contained in:
spandevPallavUdit TakkarPedro CastroAnik Dhabal BabuKeith Williams
 authored and GitHub committed 2026-01-16 00:01:40 +00:00
1 parent 4932588309
commit 0a0b32046f
2 files changed
+19 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/playwright/availability.e2e.ts
+3 -1
View File
@@ -147,7 +147,9 @@ test.describe("Availability", () => {
const save = (await localize("en"))("save");
const copyTimesTo = (await localize("en"))("copy_times_to");
await page.getByTestId("availablity-title").click();
const availTitle = page.getByTestId("availablity-title");
await availTitle.locator('xpath=..').locator('span.whitespace-pre').first().click();
await expect(availTitle).toBeEditable();
// change availability name
await page.getByTestId("availablity-title").fill("Working Hours test");
await expect(page.getByTestId("subtitle").first()).toBeVisible();
packages/ui/components/editable-heading/EditableHeading.tsx
+16 -8
View File
@@ -23,7 +23,15 @@ export const EditableHeading = function EditableHeading({
<div className="group pointer-events-auto relative truncate" onClick={enableEditing}>
<div className={classNames(!disabled && "cursor-pointer", "flex items-center")}>
<label className="min-w-8 relative inline-block">
<span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
<span
className={classNames(
"whitespace-pre text-xl tracking-normal w-full truncate cursor-pointer",
isEditing && "text-transparent"
)}
>
{value}
</span>
<input
{...passThroughProps}
disabled={disabled}
@@ -31,23 +39,23 @@ export const EditableHeading = function EditableHeading({
value={value}
required
className={classNames(
!disabled &&
"hover:text-default focus:text-emphasis cursor-pointer focus:outline-none focus:ring-0",
"text-emphasis absolute left-0 top-0 w-full truncate border-none bg-transparent p-0 align-top text-xl ",
!disabled && "hover:text-default focus:text-emphasis cursor-text",
"text-emphasis absolute left-0 top-0 w-full truncate border-none bg-transparent p-0 align-top text-xl transition-opacity",
isEditing ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none",
passThroughProps.className
)}
onFocus={(e) => {
setIsEditing(!disabled);
passThroughProps.onFocus && passThroughProps.onFocus(e);
passThroughProps.onFocus?.(e);
}}
onBlur={(e) => {
setIsEditing(false);
passThroughProps.onBlur && passThroughProps.onBlur(e);
passThroughProps.onBlur?.(e);
}}
onChange={(e) => onChange && onChange(e.target.value)}
onChange={(e) => onChange?.(e.target.value)}
/>
{!isEditing && isReady && !disabled && (
<Icon name="pencil" className="text-subtle group-hover:text-subtle -mt-px ml-3 inline h-3 w-3" />
<Icon name="pencil" className="text-subtle group-hover:text-subtle -mt-px ml-1 inline h-4 w-4" />
)}
</label>
</div>