feat: add page icon align option #618

Amemome · 2025-03-20T13:24:25Z

Description

Some users prefer the default Notion page icon alignment style. To accommodate this preference, this PR introduces the alignCenter option in NotionRenderer.

Added alignCenter prop to NotionRenderer to allow customizable page icon alignment.
Adjusted related CSS styles to ensure proper icon positioning.

…ignment

vercel · 2025-03-20T13:24:30Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
react-notion-x	✅ Ready (Inspect)	Visit Preview	Mar 20, 2025 1:38pm
react-notion-x-minimal-demo	✅ Ready (Inspect)	Visit Preview	Mar 20, 2025 1:38pm

gemini-code-assist

Hello @Amemome, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

This pull request introduces an alignCenter option to the NotionRenderer component, allowing users to customize the alignment of page icons. The changes involve adding the alignCenter prop to the NotionContext and NotionRenderer components, and adjusting the CSS styles to handle both centered and left-aligned icon positions. This enhancement provides users with more control over the visual presentation of page icons within the Notion renderer.

Highlights

Feature: Added alignCenter prop to NotionRenderer to allow users to customize the alignment of page icons.
Styling: Adjusted CSS styles to support both centered and left-aligned page icon positions.
Context: Modified NotionContext to include the alignCenter property, making it accessible throughout the component tree.

Changelog

Click here to see the changelog

packages/react-notion-x/src/components/page-icon.tsx
- Added alignCenter from useNotionContext to the PageIconImpl component (line 32).
- Added conditional class names (align-center or align-left) to the page icon container based on the alignCenter prop (line 98).
packages/react-notion-x/src/context.tsx
- Added alignCenter property to the NotionContext interface (line 38).
- Added alignCenter property to the PartialNotionContext interface (line 67).
- Set the default value of alignCenter to true in the defaultNotionContext (line 174).
packages/react-notion-x/src/renderer.tsx
- Added alignCenter prop to the NotionRenderer component (line 37).
- Added alignCenter prop to the NotionRenderer component's props interface (line 63).
- Passed the alignCenter prop to the NotionContextProvider (line 122).
packages/react-notion-x/src/styles.css
- Removed left: 50% from .notion-page-icon-hero (line 626).
- Added styles for .notion-page-icon-hero.notion-page-icon-image.align-left to position the image icon to the left (lines 636-638).
- Added styles for .notion-page-icon-hero.notion-page-icon-image.align-center to position the image icon to the center (lines 641-643).
- Added styles for .notion-page-icon-hero.notion-page-icon-span.align-left to position the span icon to the left (lines 652-654).
- Added styles for .notion-page-icon-hero.notion-page-icon-span.align-center to position the span icon to the center (lines 657-659).

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

A pixel's place, a user's whim,
To center or align, a choice within.
With CSS tweaks and context's grace,
The icon finds its rightful space.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces an alignCenter option to the NotionRenderer component, allowing users to customize the alignment of page icons. The changes seem well-structured and address the described user preference. However, there are a few areas that could be improved for clarity and maintainability.

Summary of Findings

CSS Class Naming Convention: The CSS class names align-center and align-left might be too generic and could potentially conflict with other styles. Consider using a more specific prefix to avoid naming collisions.
Default Prop Value: The default value of alignCenter is set to true in defaultNotionContext. Consider whether this is the most appropriate default, or if false would be more suitable, requiring users to explicitly opt-in to the centered alignment.

Merge Readiness

The pull request is almost ready for merging. Addressing the CSS class naming and considering the default prop value would improve the code's quality and reduce potential conflicts. I am unable to approve this pull request, and recommend that others review and approve this code before merging. I recommend that the pull request not be merged until the high severity issues are addressed.

gemini-code-assist · 2025-03-20T13:24:46Z

packages/react-notion-x/src/context.tsx

@@ -169,6 +171,7 @@ const defaultNotionContext: NotionContext = {
  showCollectionViewDropdown: true,
  linkTableTitleProperties: true,
  isLinkCollectionToUrlProperty: false,
+  alignCenter: true,


Is alignCenter: true the intended default? It might be more intuitive to default to false and allow users to explicitly enable centering. This could prevent unexpected layout changes for existing users.

alignCenter: false,

The default value was center-aligned, so I set it to true.

packages/react-notion-x/src/components/page-icon.tsx

packages/react-notion-x/src/styles.css

Amemome

resolved

Amemome added 3 commits March 20, 2025 19:58

fix: update page icon styles to match Notion's default behavior

2164727

feat: add alignCenter prop to PageIcon component for flexible icon al…

e08738d

…ignment

feat: add alignCenter option to NotionRenderer and NotionContext

fafe3d4

gemini-code-assist bot reviewed Mar 20, 2025

View reviewed changes

gemini-code-assist bot suggested changes Mar 20, 2025

View reviewed changes

vercel bot deployed to Preview – react-notion-x-minimal-demo March 20, 2025 13:25 View deployment

vercel bot deployed to Preview – react-notion-x March 20, 2025 13:27 View deployment

fix: clarify CSS class names for page icon alignment

20769e9

vercel bot deployed to Preview – react-notion-x March 20, 2025 13:37 View deployment

vercel bot deployed to Preview – react-notion-x-minimal-demo March 20, 2025 13:38 View deployment

Amemome commented Mar 27, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add page icon align option #618

feat: add page icon align option #618

Amemome commented Mar 20, 2025

vercel bot commented Mar 20, 2025 •

edited

Loading

gemini-code-assist bot left a comment

gemini-code-assist bot left a comment

gemini-code-assist bot Mar 20, 2025

Amemome Mar 20, 2025

Amemome left a comment

feat: add page icon align option #618

Are you sure you want to change the base?

feat: add page icon align option #618

Conversation

Amemome commented Mar 20, 2025

Description

vercel bot commented Mar 20, 2025 • edited Loading

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Changelog

Footnotes

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Summary of Findings

Merge Readiness

gemini-code-assist bot Mar 20, 2025

Choose a reason for hiding this comment

Amemome Mar 20, 2025

Choose a reason for hiding this comment

Amemome left a comment

Choose a reason for hiding this comment

vercel bot commented Mar 20, 2025 •

edited

Loading