Comments (11)
Thanks for making this issue @maximedegreve!
Just wanted to leave a note that I believe the "ActionMenu positioning" section has a corresponding issue over at: #4059
from react.
@broccolinisoup π Assigning to you and me (FR) to do the initial triage.
from react.
There is a missing prop to remove the extra padding on the left of this component as it would provide better alignment with the content below when not used in the navigation.
Ideally, there shouldn't be any padding around the component by default? It should be left to the user to align π€
from react.
@broccolinisoup, this is the winning combination for consistently reproducing early truncation:
const children = ['Trending this week', 'Recently added']
losing-combo.mov
from react.
Hi folks π @maximedegreve @siddharthkp
Regarding the early truncation, it was an accessibility improvement that we made sure there is at least two elements in the overflow menu if we are going to display a menu - see the PR that we introduced this behaviour #2471 We can maybe look into other variants like condense or something we can squeeze the items to fit both into the narrow viewport. Just throwing ideas.
Regarding the padding, it was on the design specs. We can remove it if it is not valid anymore or not needed in general.
from react.
Regarding the early truncation, it was an accessibility improvement that we made sure there is at least two elements in the overflow menu if we are going to display a menu - see the PR that we introduced this behaviour #2471
That's very interesting, thanks!
from react.
ArmaΔan: Regarding the padding, it was on the design specs. We can remove it if it is not valid anymore or not needed in general.
Maxime: There is a missing prop to remove the extra padding on the left of this component as it would provide better alignment with the content below when not used in the navigation.
I think it's always a risk when we bake in some padding around the edges of the component. I don't think we should add a prop to remove noPadding
. the sx prop (or a className) should be used instead.
I'd leave it up to you and Maxime to decide if we should remove it from the default. (If we decide to remove it, we should add it back to the instances where it's already used)
from react.
I think it's always a risk when we bake in some padding around the edges of the component. I don't think we should add a prop to remove noPadding. the sx prop (or a className) should be used instead.
I'd leave it up to you and Maxime to decide if we should remove it from the default. (If we decide to remove it, we should add it back to the instances where it's already used)
Sounds like a good plan - @maximedegreve let me know how you want to go forward with that π
from react.
My understanding is that for the UnderlineNav, most of the time you wouldn't want padding when it's added in the content area. The only exception I'm aware of right now is the UnderlineNav in the navigation, but that's something that's rarely changed.
I'm not up to speed with previous React decisions, but I thought that the sx prop is discouraged where possible.
I think this conversation goes hand in hand with the work @mperrotti is doing on our tabs. For example, in security, we use a different style of tabs that doesn't have this padding.
from react.
I did a quick lookup on the current use cases of UnderlineNav to see how many of the cases reset the padding and there are only few of them. https://musical-adventure-wlr3n3k.pages.github.io/?name=%22UnderlineNav%22&attribute=sx That doesn't mean that they should retain their padding but I just thought it might be a good place to reference before making that final decision. @maximedegreve
from react.
I am taking this to work in progress and remove from the inbox since we are having the conversation π
from react.
Related Issues (20)
- Setting `required` to `input` element within `TextInput` HOT 2
- TypeError: CSS.supports is not a function when running Jest tests HOT 2
- Active `NavList.Item` is incorrectly missing bold styling HOT 4
- The theme object inflates bundle size. HOT 1
- Release Tracking
- The `useAnchoredPosition` hook returns generic refs for Element, which always requires a type assertion by the user
- TreeView: Remove aria-describedby when leading and trailing visuals do not exist HOT 2
- Does the Primer Design System have card components or similar card-like components? HOT 1
- Release Tracking HOT 1
- TreeView: Add support for external styling HOT 2
- TexInput `onClick` focus behavior broken with `type=date` on Safari
- `Dialog` should allow wrapping content, header, and footer (for example in `Suspense` or some context) HOT 1
- Utils should be exported
- Tests: Remove redundant ThemeProvider from tests
- `DialogV2` has incorrect names for width values HOT 1
- Enhancement: Add support for flush action lists HOT 2
- Update docs for `Button` to not consider `count` as required HOT 1
- Release Tracking
- Using `TooltipV2` always sets aria associations on first child element HOT 6
- [Tests] Ensure that axe calls are made on open state of the component HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.