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.

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

LF-4219: Create component for weight application rate tabs #3204

Conversation

SayakaOno
Copy link
Collaborator

@SayakaOno SayakaOno commented May 2, 2024

Description

  • Update StateTab component to
    • take variant.
    • replace Semibold with button so that tabs become focusable. (I plan to use :focus-within to style cards when focused, which will require this change. The outline is "none" for now.)
  • Update RoterTab to be compatible with the new CSS.
  • Stories

Jira link: https://lite-farm.atlassian.net/browse/LF-4219

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

  • Passes test case
  • UI components visually reviewed on desktop view
  • UI components visually reviewed on mobile view
  • Other (please explain)

Checklist:

  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • The precommit and linting ran successfully
  • I have added or updated language tags for text that's part of the UI
  • I have added "MISSING" for all new language tags to languages I don't speak
  • I have added the GNU General Public License to all new files

@SayakaOno SayakaOno self-assigned this May 2, 2024
@SayakaOno SayakaOno added the enhancement New feature or request label May 2, 2024
@kathyavini kathyavini self-requested a review May 2, 2024 15:38
@SayakaOno SayakaOno force-pushed the LF-4219/Create_component_for_weight_application_rate_tabs branch from e101944 to 7812d54 Compare May 17, 2024 16:55
@SayakaOno SayakaOno marked this pull request as ready for review May 21, 2024 18:38
@SayakaOno SayakaOno requested review from a team as code owners May 21, 2024 18:38
@SayakaOno
Copy link
Collaborator Author

The design has changed, and this component is no longer necessary. Closing this pull request as it is no longer relevant.

@SayakaOno SayakaOno closed this May 22, 2024
@Duncan-Brain
Copy link
Collaborator

😢 Again!

@SayakaOno SayakaOno reopened this May 23, 2024
import styles from '../styles.module.scss';
import clsx from 'clsx';

const VARIANTS = {
PILL: 'pill',
PLANE: 'plane',
Copy link
Collaborator

Choose a reason for hiding this comment

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

"plain" 😄 not plane ✈️

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

🙈🙈🙈

Copy link
Collaborator

@Duncan-Brain Duncan-Brain left a comment

Choose a reason for hiding this comment

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

Looks great!

Only thing I noticed was when long text is squished the padding from the edge of the pill disappears.
Screenshot 2024-06-04 at 3 37 41 PM

@kathyavini
Copy link
Collaborator

kathyavini commented Jun 4, 2024

I get this funny bug only in App (not in Storybook) on the exiting case of StateTabs only and not RouterTab; can you re-create it? It looks like a height bug on the non-focused tab?

Screenshot 2024-06-04 at 1 38 55 PM

Screenshot 2024-06-04 at 1 38 46 PM

@SayakaOno
Copy link
Collaborator Author

Thank you for reviewing Duncan and Joyce!!!
I hope to reopen this again in the future 😂

@SayakaOno SayakaOno closed this Jun 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
3 participants