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

fix(styles): visible overflow when more dropdown is available #4931

Merged
merged 1 commit into from
Oct 27, 2023

Conversation

N1XUS
Copy link
Contributor

@N1XUS N1XUS commented Oct 27, 2023

Related Issue

Closes #4813

Description

  • Removed overflow-x: hidden;
  • Added case when overflow dropdown is available. In this case add overflow: visible for popovers that are bound inside icon tab bar would still be visible.

Screenshots

NOTE: If you've made any style changes, please provide appropriate screenshots (before and after) to help reviewers.

To see examples of which screenshots to include, go to Screenshot Examples.

Before:

image

After:

image

Please check whether the PR fulfills the following requirements

  1. The output matches the design specs
  • All values are in rem
  • Text elements follow the truncation rules
  • hover state of the element follow design spec
  • focus state of the element follow design spec
  • active state of the element follow design spec
  • selected state of the element follow design spec
  • selected hover state of the element follow design spec
  • pressed state of the element follow design spec
  • Responsiveness rules - the component has modifier classes for all breakpoints
  • Includes Compact/Cosy/Tablet design
  • RTL support
  1. The code follows fundamental-styles code standards and style
  • only one top level fd-* class is used in the file
  • BEM naming convention is used
  • Mixins are used for repeatable code (fd-rtl, fd-ellipsis, fd-flex, fd-selected, fd-focus, ect.)
  • A11y support - keyboard support, screenreader support, proper ARIA attributes, etc.
  • fd-reset() mixin is applied to all elements
  • Variables are used, if some value is used more than twice.
  • Checked if current components can be reused, instead of having new code.
  1. Testing
  • tested Storybook examples with "CSS Resources" normalize option
  • tested Storybook examples with "CSS Resources" unnormalize option
  • Verified all styles in IE11
  • Updated tests
  • last commit message should have [ci visual] so it can trigger chromatic visual regression (e.g. test: run chromatic visual regression [ci visual])
  1. Documentation
  • Storybook documentation has been created/updated
  • Breaking Changes wiki has been updated in case of breaking changes.

@N1XUS N1XUS added the Bug Something isn't working label Oct 27, 2023
@N1XUS N1XUS added this to the Sprint 124 milestone Oct 27, 2023
@N1XUS N1XUS requested a review from a team October 27, 2023 08:27
@N1XUS N1XUS self-assigned this Oct 27, 2023
@netlify
Copy link

netlify bot commented Oct 27, 2023

Deploy Preview for fundamental-styles ready!

Name Link
🔨 Latest commit a3203ac
🔍 Latest deploy log https://app.netlify.com/sites/fundamental-styles/deploys/653b748b476f160008077ddb
😎 Deploy Preview https://deploy-preview-4931--fundamental-styles.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@InnaAtanasova InnaAtanasova modified the milestones: Sprint 124, Sprint 125 Oct 27, 2023
@droshev droshev merged commit 8502822 into main Oct 27, 2023
8 checks passed
@droshev droshev deleted the fix/4813-itb-visible-overflow branch October 27, 2023 16:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Icon Tab Bar overflow bug
3 participants