gabotorresruiz opened a new pull request, #35648: URL: https://github.com/apache/superset/pull/35648
<!--- Please write the PR title following the conventions at https://www.conventionalcommits.org/en/v1.0.0/ Example: fix(dashboard): load charts correctly --> ### SUMMARY <!--- Describe the change below, including rationale and design decisions --> This PR fixes UI issues in the Table Chart header controls 1. **Fixed accessibility issue**: Removed non-functional `sr-only` class that was causing "Select page size" label to be visible. The class doesn't exist in the codebase, so the label was showing alongside the intended UI. Replaced it with a proper `VisuallyHidden` styled component following WCAG accessibility guidelines. 2. **Improved responsive layout**: Replaced custom `StyledSpace` and `StyledRow` components with Ant Design's `Flex` component for better control wrapping behavior. The controls now properly adapt to different chart widths when resized in dashboards. 3. **Layout structure**: - Left side: "Show X entries per page" selector - Right side: "Search by" dropdown and "Search" input - Controls wrap gracefully when space is limited - All elements use proper theming tokens (`theme.sizeUnit`) 4. **Code cleanup**: Removed unnecessary styled components and simplified the layout using built-in Ant Design components. ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF <!--- Skip this if not applicable --> #### Before <img width="589" height="412" alt="image" src="https://github.com/user-attachments/assets/7e0dc2f1-d87d-4c6d-abc4-7113ac546810"; /> #### After <img width="2922" height="830" alt="image" src="https://github.com/user-attachments/assets/72c02c6e-119c-41f1-81fe-ccbc01120918"; /> ### TESTING INSTRUCTIONS <!--- Required! What steps can be taken to manually verify the changes? --> 1. Create (or open) a Table Chart with `server-side pagination` and `Search Box` enabled 2. Verify the header shows "Show X entries per page" on the left 3. Verify `Search by` dropdown and `Search` input appear on the right 4. Add the chart to a dashboard 5. Resize the chart to different widths and verify: - Large width: controls stay on one row (page size left, search controls right) - Medium width: controls wrap to separate rows - Small width: all controls stack vertically 6. Verify no "Select page size" text appears anywhere ### ADDITIONAL INFORMATION <!--- Check any relevant boxes with "x" --> <!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue --> - [ ] Has associated issue: - [ ] Required feature flags: - [x] Changes UI - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351)) - [ ] Migration is atomic, supports rollback & is backwards-compatible - [ ] Confirm DB migration upgrade and downgrade tested - [ ] Runtime estimates and downtime expectations provided - [ ] Introduces new feature or API - [ ] Removes existing feature or API -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
