Skip to content

fix: new sticky color + recent sticky api call + sticky max height #6438

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

Merged
pushya22 merged 1 commit into from
Jan 21, 2025
Merged

fix: new sticky color + recent sticky api call + sticky max height #6438

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion web/core/components/stickies/sticky/inputs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useWorkspace } from "@/hooks/store";
import { StickyEditor } from "../../editor";

type TProps = {
stickyData: TSticky | undefined;
stickyData: Partial<TSticky> | undefined;
workspaceSlug: string;
handleUpdate: (payload: Partial<TSticky>) => void;
stickyId: string | undefined;
Expand Down
7 changes: 4 additions & 3 deletions web/core/components/stickies/sticky/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { useSticky } from "@/hooks/use-stickies";
import { STICKY_COLORS_LIST } from "../../editor/sticky-editor/color-palette";
import { StickyDeleteModal } from "../delete-modal";
import { StickyInput } from "./inputs";
import { useStickyOperations } from "./use-operations";
import { getRandomStickyColor, useStickyOperations } from "./use-operations";

type TProps = {
onClose?: () => void;
Expand All @@ -33,7 +33,7 @@ export const StickyNote = observer((props: TProps) => {
// sticky operations
const { stickyOperations } = useStickyOperations({ workspaceSlug });
// derived values
const stickyData = stickyId ? stickies[stickyId] : undefined;
const stickyData: Partial<TSticky> = stickyId ? stickies[stickyId] : { background_color: getRandomStickyColor() };
// const isStickiesPage = pathName?.includes("stickies");
const backgroundColor =
STICKY_COLORS_LIST.find((c) => c.key === stickyData?.background_color)?.backgroundColor ||
Expand All @@ -45,6 +45,7 @@ export const StickyNote = observer((props: TProps) => {
await stickyOperations.update(stickyId, payload);
} else {
await stickyOperations.create({
...stickyData,
...payload,
});
}
Expand Down Expand Up @@ -73,7 +74,7 @@ export const StickyNote = observer((props: TProps) => {
handleClose={() => setIsDeleteModalOpen(false)}
/>
<div
className={cn("w-full flex flex-col h-fit rounded p-4 group/sticky", className)}
className={cn("w-full flex flex-col h-fit rounded p-4 group/sticky max-h-[650px] overflow-y-scroll", className)}
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 21, 2025

Choose a reason for hiding this comment

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

💡 Codebase verification

Add ARIA attributes to improve accessibility of scrollable container

The scrollbar is correctly implemented with overflow-y-scroll, but the container needs additional accessibility attributes:

  • Add role="region" to identify it as a distinct section
  • Add aria-label to describe the scrollable content
  • Consider adding tabIndex={0} if the container needs keyboard focus

Example:

className={cn(
  "w-full flex flex-col h-fit rounded p-4 group/sticky max-h-[650px] overflow-y-scroll",
  className
)}
role="region"
aria-label="Sticky note content"
tabIndex={0}
🔗 Analysis chain

Verify max height constraint for accessibility.

While adding a max height constraint prevents infinite growth, consider:

  1. Ensuring the scrollbar is visible and usable
  2. Testing with screen readers
  3. Verifying keyboard navigation within scrollable content
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for other max-height constraints in the codebase for consistency
rg "max-h-\[.*?\]" --type ts --type tsx

Length of output: 69

Script:

#!/bin/bash
# Search for max-height constraints with correct file types
rg "max-h-\[" -t typescript -t javascriptreact -t typescriptreact

# Search for scroll-related classes and ARIA attributes
rg "overflow-y-scroll|overflow-auto|aria-scrollable|tabIndex" -t typescript -t javascriptreact -t typescriptreact

# Search for accessibility-related configurations or utilities
fd -e ts -e tsx -e js -e jsx --exec grep -l "accessibility\|a11y"

Length of output: 354

Script:

#!/bin/bash
# Search for max-height and scroll-related classes
rg "max-h-|overflow-y-scroll|overflow-auto"

# Check content of the accessibility-related file
cat ./packages/ui/src/emoji/icons.ts

# Search for specific accessibility attributes
rg "aria-|role=|tabIndex"

Length of output: 82205

style={{
backgroundColor,
}}
Expand Down
5 changes: 3 additions & 2 deletions web/core/services/sticky.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,13 @@ export class StickyService extends APIService {
async getStickies(
workspaceSlug: string,
cursor: string,
query?: string
query?: string,
per_page?: number
): Promise<{ results: TSticky[]; total_pages: number }> {
return this.get(`/api/workspaces/${workspaceSlug}/stickies/`, {
params: {
cursor,
per_page: STICKIES_PER_PAGE,
per_page: per_page || STICKIES_PER_PAGE,
query,
},
})
Expand Down
2 changes: 1 addition & 1 deletion web/core/store/sticky/sticky.store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export class StickyStore implements IStickyStore {
};

fetchRecentSticky = async (workspaceSlug: string) => {
const response = await this.stickyService.getStickies(workspaceSlug, "1:0:0");
const response = await this.stickyService.getStickies(workspaceSlug, "1:0:0", undefined, 1);
runInAction(() => {
this.recentStickyId = response.results[0]?.id;
this.stickies[response.results[0]?.id] = response.results[0];
Expand Down
Loading