fix: pill visibility on small screens #991

ypatadia-eightfold · 2025-05-01T17:03:22Z

SUMMARY:

Pill will visible in single/multiselect for smaller screens

GITHUB ISSUE (Open Source Contributors)

JIRA TASK (Eightfold Employees Only):

https://eightfoldai.atlassian.net/browse/ENG-134598

CHANGE TYPE:

Bugfix Pull Request
Feature Pull Request

TEST COVERAGE:

Tests for this change already exist
I have added unittests for this change

TEST PLAN:

codesandbox-ci · 2025-05-01T17:06:11Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

factory-droid · 2025-05-01T17:10:01Z

Important

Solutions for GitHub Action Failures - `69bc886` - 1

Build

To resolve the test failures, please follow these steps:

Update the snapshot for the Select component by running:
```
yarn test -u
```
Update the useMaxVisibleSections hook tests in src/hooks/useMaxVisibleSections.test.tsx. Add the maxPillWidth property to the expected results:
```
expect(result.current).toEqual({
  width: 20,
  count: 1,
  filled: false,
  maxPillWidth: 144,
});
```
Make sure to update both failing tests.

Additional Details

The test failures are due to recent changes in the Select component and useMaxVisibleSections hook. A new maxPillWidth property has been added, which affects both the rendering of the Select component and the return value of the hook.

In the Select component (src/components/Select/Select.tsx), a new style property has been added to the Pills:

style={{
  visibility: index < count ? 'visible' : 'hidden',
  maxWidth: `${maxPillWidth}px`,
}}

In the useMaxVisibleSections hook (src/hooks/useMaxVisibleSections.ts), the maxPillWidth property has been added to the return object:

return {
  width: 0,
  count: 0,
  filled: false,
  maxPillWidth: 144,
};

These changes are likely intentional improvements to the component's functionality. After updating the tests, review the changes to ensure they're working as expected in your application.

factory-droid

PR Description:
The PR enhances pill visibility in the Select component by implementing responsive pill widths for different screen sizes. The useMaxVisibleSections hook now dynamically calculates pill widths based on container size and item count, with specific handling for single items and narrow containers. ¹

Click For Summary of Files

Summary of Files

Files Modified

src/hooks/useMaxVisibleSections.ts

Enhanced pill width calculations in Select component for better responsiveness:

- Added dynamic pill width calculation based on container size and item count
- Implemented special handling for single items (40px) and narrow containers (45% of width)
- Added maxPillWidth constraint (100px for narrow containers, 144px for normal cases)

src/components/Select/Select.tsx

Enhanced pill visibility in Select component with responsive width constraints:

- Modified useMaxVisibleSections hook integration to handle dynamic pill widths
- Reduced default pill width parameter from 168px to 144px
- Added maxWidth constraint to individual pills for consistent sizing

Tips

Review Droid is highly customizable and comes with powerful features for augmenting your organization's code review process. Here are some tips to get the most out of it.

¹ Early return should maintain consistent object shape to prevent runtime errors:

if (selectedItemsLength === 0) { return { width: 0, count: 0, filled: false, maxPillWidth: 144 }; }

Committable suggestion

Please carefully review the code before committing.

Suggested change

const selectedItemsLength = itemsRef.current?.filter(Boolean)?.length;

if (selectedItemsLength === 0) return;

const selectedItemsLength = itemsRef.current?.filter(Boolean)?.length;

if (selectedItemsLength === 0) {

return {

width: 0,

count: 0,

filled: false,

maxPillWidth: 144

};

}

Footnotes

This suggestion is based on your review guideline: "Catch and correct any obvious bugs. Ensure code is clean, maintainable, and follows project conventions. Check for security vulnerabilities and performance issues. Avoid circular dependencies.
" ↩

factory-droid · 2025-05-01T17:10:43Z

src/hooks/useMaxVisibleSections.ts

+    const selectedItemsLength = itemsRef.current?.filter(Boolean)?.length;
+    if (selectedItemsLength === 0) return;


¹ Return consistent object shape when no items are selected:

if (selectedItemsLength === 0) { return { width: 0, count: 0, filled: false, maxPillWidth: 144 }; }

Committable suggestion

Please carefully review the code before committing.

Suggested change

const selectedItemsLength = itemsRef.current?.filter(Boolean)?.length;

if (selectedItemsLength === 0) return;

const selectedItemsLength = itemsRef.current?.filter(Boolean)?.length;

if (selectedItemsLength === 0) {

return {

width: 0,

count: 0,

filled: false,

maxPillWidth: 144

};

}

Footnotes

This suggestion is based on your review guideline: "Add 'use client' directive at the top of client-side hooks. Export hooks as named exports. Use TypeScript generics for type-safe hooks when appropriate. Add JSDoc comments to describe hook functionality. Return consistent values from hooks. Follow React hooks rules (only call hooks at the top level, only call hooks from React functions). Handle cleanup functions properly in useEffect to prevent memory leaks. Use dependency arrays correctly in useEffect, useMemo, and useCallback. Create custom hooks for reusable logic across components. Ensure hooks have proper error handling and edge case management.
" ↩

factory-droid · 2025-05-01T17:10:43Z

src/hooks/useMaxVisibleSections.ts

    width: 0,
    count: 0,
    filled: false,
+    maxPillWidth: 144,


¹ Define an interface for the maxSections object shape to improve type safety and maintainability:

interface MaxSections { readonly width: number; readonly count: number; readonly filled: boolean; readonly maxPillWidth: number; }

Then use this interface consistently:

const [maxSections, setMaxSections] = useState<MaxSections>({...});

Footnotes

This suggestion is based on your review guideline: "Follow our TypeScript style guide. Use interfaces for object shapes and types for unions/primitives. Prefer readonly properties when values shouldn't change. Use proper enums for function parameters and return types. Avoid using 'any' type when possible, prefer unknown for truly unknown types. Use type guards to narrow types safely. Leverage TypeScript's utility types (Partial, Required, Pick, etc.) when appropriate.
"
External URL: Use interfaces for object shapes and types for unions/primitives ↩

sravichandran-eightfold · 2025-06-12T23:10:47Z

src/components/Select/Select.tsx

    };

-    const { count, filled, width } = useMaxVisibleSections(
+    const { count, filled, width, maxPillWidth } = useMaxVisibleSections(


why maxPillWidth, just pillWidth

sravichandran-eightfold · 2025-06-12T23:11:31Z

src/hooks/useMaxVisibleSections.ts

+    const containerWidth =
+      containerRef.current?.getBoundingClientRect().width ?? 0;
+    const firstItemWidth =
+      itemsRef.current?.[0]?.getBoundingClientRect().width ?? extraItemWidth;
+
+    const isSingleItem = selectedItemsLength === 1;
+    const isNarrowContainer = isSingleItem
+      ? containerWidth <= 210
+      : containerWidth <= 350;
+
+    const updatedExtraItemWidth = isSingleItem
+      ? 40
+      : isNarrowContainer
+      ? containerWidth * 0.45
+      : firstItemWidth + 24;
+    const maxPillWidth = isNarrowContainer ? 100 : 144;


is this possible without doing a boundingClientRect call

fix: pill visibility on small screens

69bc886

ypatadia-eightfold requested a review from uagarwal-eightfold May 1, 2025 17:03

factory-droid bot reviewed May 1, 2025

View reviewed changes

ypatadia-eightfold requested a review from sravichandran-eightfold June 11, 2025 15:44

Merge branch 'main' into ypatadia/select-mobile-pill-fix/ENG-134598

c6a2c5e

sravichandran-eightfold reviewed Jun 12, 2025

View reviewed changes

Merge branch 'main' into ypatadia/select-mobile-pill-fix/ENG-134598

53d77b3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: pill visibility on small screens #991

fix: pill visibility on small screens #991

Uh oh!

ypatadia-eightfold commented May 1, 2025 •

edited

Loading

Uh oh!

codesandbox-ci bot commented May 1, 2025 •

edited

Loading

Uh oh!

factory-droid bot commented May 1, 2025

Solutions for GitHub Action Failures - `69bc886` - 1

Uh oh!

factory-droid bot left a comment

Uh oh!

factory-droid bot May 1, 2025

Uh oh!

factory-droid bot May 1, 2025

Uh oh!

factory-droid bot May 1, 2025

Uh oh!

sravichandran-eightfold Jun 12, 2025

Uh oh!

sravichandran-eightfold Jun 12, 2025

Uh oh!

Uh oh!

		const selectedItemsLength = itemsRef.current?.filter(Boolean)?.length;
		if (selectedItemsLength === 0) return;

fix: pill visibility on small screens #991

Are you sure you want to change the base?

fix: pill visibility on small screens #991

Uh oh!

Conversation

ypatadia-eightfold commented May 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY:

GITHUB ISSUE (Open Source Contributors)

JIRA TASK (Eightfold Employees Only):

CHANGE TYPE:

TEST COVERAGE:

TEST PLAN:

Uh oh!

codesandbox-ci bot commented May 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

factory-droid bot commented May 1, 2025

Solutions for GitHub Action Failures - 69bc886 - 1

Uh oh!

factory-droid bot left a comment

Choose a reason for hiding this comment

Summary of Files

Files Modified

Table of contents

⌨️ Droid Fill

Contextual PR Body Replacement

📚 Review Guidelines

Creating guidelines for Droid to follow

💬 Droid Chat

Ask questions on a PR

Follow up with Review Droid's Comments

🛠️ PR Healing

Diagnose & Fix Failures in CI

🎓 Teaching Droid

Giving Droid feedback so it learns

🔎 Review Usage

Re-Requesting Review

.droid.yaml to Configure Review Droid

Ignoring Reviews

Footnotes

Uh oh!

factory-droid bot May 1, 2025

Choose a reason for hiding this comment

Footnotes

Uh oh!

factory-droid bot May 1, 2025

Choose a reason for hiding this comment

Footnotes

Uh oh!

factory-droid bot May 1, 2025

Choose a reason for hiding this comment

Footnotes

Uh oh!

sravichandran-eightfold Jun 12, 2025

Choose a reason for hiding this comment

Uh oh!

sravichandran-eightfold Jun 12, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ypatadia-eightfold commented May 1, 2025 •

edited

Loading

codesandbox-ci bot commented May 1, 2025 •

edited

Loading

Solutions for GitHub Action Failures - `69bc886` - 1

`.droid.yaml` to Configure Review Droid