Skip to content
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

Jump to bottom

fix: name history UI styles OK-36318 OK-36319 OK-36320 OK-36364 #6838

Open
wants to merge 3 commits into
base: x
Choose a base branch
from
Open

fix: name history UI styles OK-36318 OK-36319 OK-36320 OK-36364 #6838

wants to merge 3 commits into from

Conversation

sidmorizon
Copy link
Contributor

@sidmorizon sidmorizon commented Mar 7, 2025 •
edited by coderabbitai bot
Loading

Summary by CodeRabbit

  • New Features
    • Enhanced button components with an optional text truncation option, ensuring lengthy labels are displayed elegantly.
    • Upgraded the history view by adding a scrollable layout and localized messaging for an enriched, user-friendly experience.
    • Introduced a showcase section that demonstrates the new text truncation effect, providing clear visual examples.
    • Overall, these improvements deliver a more refined interface and smoother user interactions.

@codesandbox CodeSandbox
Copy link

codesandbox bot commented Mar 7, 2025

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

@coderabbitai coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 7, 2025 •
edited
Loading

Walkthrough

This pull request introduces several updates. A new script is added in the root package.json to manage CocoaPods installation for iOS. The Button component now supports a new optional textEllipsis property for handling text overflow. The Change History Dialog has been updated to wrap its content in a ScrollView and now uses localized strings through the intl.formatMessage hook, with an added disableDrag property. A demo in the Button gallery showcases the new ellipsis behavior.

Changes

File(s) Change Summary
package.json Added script "app:ios:pod-install": "yarn workspace @onekeyhq/mobile ios:pod-install".
packages/components/src/primitives/Button/index.tsx
packages/kit/.../stories/Button.tsx		 Introduced an optional textEllipsis property in the Button component and updated the story to demo text truncation.
packages/kit/.../ChangeHistoryDialog.tsx Wrapped dialog content in a ScrollView, replaced hardcoded texts with localized messages via intl.formatMessage, updated the title to a localized string, and added the disableDrag: true configuration.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant C as ChangeHistoryDialog
  participant I as Intl (Localization)
  participant S as ScrollView
  participant B as Button

  U->>C: Open Change History Dialog
  C->>I: Request localized title & message
  I-->>C: Return localized text
  C->>S: Wrap content in ScrollView
  C->>B: Render Button with `textEllipsis`
  S-->>C: Provide scrollable content
  C-->>U: Display updated dialog
Loading 
sequenceDiagram
  participant U as User
  participant Btn as Button
  participant ST as SizableText

  U->>Btn: Render Button
  Btn->>ST: Pass `textEllipsis` as ellipse flag
  ST-->>Btn: Apply text truncation
  Btn-->>U: Display button text with ellipsis
Loading
📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f9eeaaa and ce68713.

📒 Files selected for processing (4)
  • package.json (1 hunks)
  • packages/components/src/primitives/Button/index.tsx (3 hunks)
  • packages/kit/src/components/ChangeHistoryDialog/ChangeHistoryDialog.tsx (3 hunks)
  • packages/kit/src/views/Developer/pages/Gallery/Components/stories/Button.tsx (2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: lint (20.x)
  • GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (9)
package.json (1)

36-36: New script enhances iOS development workflow

Adding the pod install script simplifies iOS dependency management by providing a dedicated command.

packages/components/src/primitives/Button/index.tsx (3)

46-46: Good addition of text truncation feature

The new textEllipsis property allows controlling text overflow in buttons - useful for handling long text.

202-202: Consistent property handling

Extracting the property in the destructuring statement maintains consistent pattern with other props.

268-268: Proper implementation of the ellipsis feature

Correctly passes the textEllipsis value to the SizableText component's ellipse prop.

packages/kit/src/views/Developer/pages/Gallery/Components/stories/Button.tsx (1)

92-113: Great demo of the ellipsis feature

The gallery clearly shows the difference between regular and ellipsis text handling. This helps developers understand how the feature works.

packages/kit/src/components/ChangeHistoryDialog/ChangeHistoryDialog.tsx (4)

1-2: Good import organization

Added imports for internationalization and ScrollView component. The useIntl hook enables proper localization.

Also applies to: 6-6, 12-12, 20-20

41-42: Added internationalization support

Using the useIntl hook enables proper message formatting for different languages.

44-64: UI improvements with ScrollView and localization

The changes enhance the user experience by:

  1. Making content scrollable - crucial for longer lists
  2. Using localized strings instead of hardcoded text
  3. Adding text ellipsis to buttons for better text handling

83-86: Dialog enhancements

Replacing hardcoded title with localized string improves internationalization. The disableDrag property provides better control over dialog behavior.

Also applies to: 88-88

✨ Finishing Touches
  • 📝 Generate Docstrings
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary or Summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@sidmorizon sidmorizon marked this pull request as ready for review March 7, 2025 13:32
@socket-security Socket Security
Copy link

socket-security bot commented Mar 7, 2025 •
edited
Loading

New, updated, and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/@alephium/[email protected] None 0 15.1 kB alephium-personal
npm/@alephium/[email protected] None 0 3.92 MB alephium-personal
npm/@alephium/[email protected] None 0 3.96 MB alephium-personal
npm/@aptos-labs/[email protected] None 0 130 kB hardsetting
npm/@ethereumjs/[email protected] None 0 235 kB holgerd77
npm/@ethersproject/[email protected] None 0 498 kB ricmoo
npm/@mysten/[email protected] network 0 4.63 MB ebmifa
npm/@mysten/[email protected] None 0 52.1 kB ebmifa
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 32.7 kB 1keyfe
npm/@onekeyfe/[email protected] None 0 13.1 MB 1keyfe
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 8.36 kB 1keyfe
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] environment 0 855 kB 1keyfe
npm/@onekeyfe/[email protected] None 0 6.32 kB 1keyfe
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@onekeyfe/[email protected] None 0 0 B
npm/@polkadot/[email protected] None +1 3.27 MB polkadotjs
npm/@polkadot/[email protected] None 0 23.9 kB polkadotjs
npm/@polkadot/[email protected] network 0 176 kB polkadotjs
npm/@polkadot/[email protected] None 0 16.6 kB polkadotjs
npm/@solana/[email protected] None 0 197 kB steveluscher
npm/@solana/[email protected] None 0 45.3 kB jordansexton
npm/@solana/[email protected] network 0 10.9 MB solana-devs
npm/@tonconnect/[email protected] None 0 53 kB thekiba
npm/@tronweb3/[email protected] None 0 634 kB tron-dev
npm/@types/[email protected] None 0 13.8 kB types
npm/@walletconnect/[email protected] filesystem 0 84.2 kB gancho_walletconnect
npm/@walletconnect/[email protected] None 0 2.7 MB gancho_walletconnect
npm/@walletconnect/[email protected] None 0 302 kB gancho_walletconnect
npm/@walletconnect/[email protected] network 0 3.78 MB gancho_walletconnect
npm/@yarnpkg/[email protected] environment, eval, filesystem 0 280 kB arcanis
npm/[email protected] network 0 43.7 kB fengmk2
npm/[email protected] None 0 13.5 kB leerobinson
npm/[email protected] None 0 14.1 kB ljharb
npm/[email protected] None 0 46.8 kB hzoo
npm/[email protected] None 0 55.7 kB no2chem
npm/[email protected] None 0 34.6 kB volovyk-s
npm/[email protected] None 0 217 kB lancedikson
npm/[email protected] environment 0 26.1 kB sibiraj-s
npm/[email protected] None 0 52.2 kB rekmarks
npm/[email protected] None 0 20.1 kB joshstevens19
npm/[email protected] network 0 12.2 MB ricmoo
npm/[email protected] None 0 460 kB silentcicero
npm/[email protected] None 0 39.7 kB matteo.collina
npm/[email protected] None 0 125 kB nickyout
npm/[email protected] filesystem 0 16.7 kB bmishkin
npm/[email protected] None 0 13 kB ljharb
npm/[email protected] ➜ 1.0.1 None 0 7.7 kB ljharb
npm/[email protected] None 0 246 kB sindresorhus
npm/[email protected] None 0 10.6 kB ljharb
npm/[email protected] None 0 10.9 kB ljharb
npm/[email protected] None 0 10.8 kB ljharb
npm/[email protected] None 0 1.3 kB sullof
npm/[email protected] None 0 28.9 kB ljharb
npm/[email protected] network +1 922 kB tedeh
npm/[email protected] None 0 34.7 kB ljharb
npm/[email protected] None 0 10.4 kB manidlou
npm/[email protected] eval 0 636 kB bnjmnt4n
npm/[email protected] None 0 177 kB dcode
npm/[email protected] None 0 54.5 kB ljharb
npm/[email protected] environment, filesystem, shell 0 41.9 kB sindresorhus
npm/[email protected] environment, filesystem 0 410 kB ds300
npm/[email protected] None 0 1.42 MB jdecroock
npm/[email protected] None 0 16.1 kB spaintrain
npm/[email protected] None 0 9.39 kB medikoo
npm/[email protected] filesystem 0 15.5 kB isaacs
npm/[email protected] None 0 332 kB mkozjak
npm/[email protected] None 0 2.82 kB sindresorhus
npm/[email protected] None 0 224 kB cathytan
npm/[email protected] filesystem, network, shell +1 242 kB maiavictor
npm/[email protected] filesystem 0 26 kB raszi
npm/[email protected] eval 0 7.18 MB troncore
npm/[email protected] None 0 8.14 kB dchest
npm/[email protected] None 0 751 kB profnandaa
npm/[email protected] None 0 11 kB jdevcs
npm/[email protected] None 0 60.9 kB jdevcs
npm/[email protected] None 0 79.5 kB jdevcs
npm/[email protected] None 0 42.2 kB jdevcs
npm/[email protected] None 0 32.4 kB jdevcs
npm/[email protected] None 0 24.2 kB jdevcs
npm/[email protected] None 0 51.1 kB jdevcs
npm/[email protected] None +1 189 kB jdevcs
npm/[email protected] None 0 86.6 kB jdevcs
npm/[email protected] None 0 150 kB jdevcs
npm/[email protected] None 0 22.9 kB jdevcs
npm/[email protected] None 0 19.5 kB jdevcs
npm/[email protected] None 0 90.8 kB jdevcs
npm/[email protected] None 0 9.38 kB jdevcs
npm/[email protected] None 0 26.1 kB jdevcs
npm/[email protected] None 0 167 kB jdevcs
npm/[email protected] None 0 5.18 MB jdevcs
npm/[email protected] environment 0 661 kB eemeli

🚮 Removed packages: npm/[email protected]

View full report↗︎

@sidmorizon
feat: Add text ellipsis support to Button component and update relate…
e848162 
…d components

- Add `textEllipsis` prop to Button component
- Update ChangeHistoryDialog to use ScrollView and localized text
- Add Button ellipsis example in Developer Gallery
- Bump local database version
@sidmorizon
chore: Update CocoaPods version in Podfile.lock
3105455
@sidmorizon
fix: lint
ce68713
@sidmorizon sidmorizon force-pushed the fix/name-history-dialog branch from 9744927 to ce68713 Compare March 7, 2025 13:35
@sidmorizon sidmorizon changed the title fix: name history UI styles fix: name history UI styles OK-36318 OK-36319 OK-36320 OK-36364 Mar 7, 2025
@sidmorizon sidmorizon enabled auto-merge (squash) March 7, 2025 13:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@originalix originalix originalix approved these changes

@ezailWang ezailWang Awaiting requested review from ezailWang ezailWang is a code owner

@loatheb loatheb Awaiting requested review from loatheb loatheb is a code owner

@huhuanming huhuanming Awaiting requested review from huhuanming huhuanming is a code owner

At least 2 approving reviews are required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@sidmorizon @originalix