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.

Sign up for GitHub

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

Jump to bottom

[Umbrella] Grid #10392

Closed
8 of 27 tasks
joshblack opened this issue Jan 12, 2022 · 2 comments
Closed
8 of 27 tasks

[Umbrella] Grid #10392

joshblack opened this issue Jan 12, 2022 · 2 comments
Assignees
@tay1orjones @joshblack
Labels
planning: umbrella Umbrella issues, surfaced in Projects views
Milestone
v11 GA

Comments

@joshblack
Copy link
Contributor

joshblack commented Jan 12, 2022 •
edited by tay1orjones
Loading

About

Features and supporting documentation for CSS Grid needs to be completed for v11. This work includes adding in missing features, defining migration paths for teams using our existing grid, along with syncing up with design on our overall grid direction in v11.

Features

  • All grid modes supported
    • Wide
    • Narrow
    • Condensed
    • No gutter
  • Full width support
  • Supports responsive column classes
    • Spanning different amounts of columns at different breakpoints
    • Spanning no columns at specific breakpoints
  • Subgrid support
    • Includes responsive column classes
  • Mixed grid modes
    • Invariant: starts as wide and goes narrow
  • Offset
  • Gutter
    • Change gutter per-column
    • Change gutter per-row
    • Responsive classes

Checklist

Constraints

  • Mixing grid modes results in the incorrect layout when rows wrap
  • CSS Grid does not have a gutter on the left/right
  • Margin on the outer side only works if full grid
  • Full width versus snap to breakpoints ???

Things to consider

  • How easy would it be to move from flexbox to CSS Grid?
  • Could we change narrow from an asymmetric grid to a symmetric grid with 16px gutter?
  • Could we opt specific columns into a hang? Could we opt a column not to hang?

Deferred

  • Bring back auto column-span support
    • Still exists in flexbox grid for now
@joshblack joshblack added the planning: umbrella Umbrella issues, surfaced in Projects views label Jan 12, 2022
@joshblack
Copy link
Contributor Author

joshblack commented Jan 12, 2022 •
edited by tay1orjones
Loading

January 12th, 2022

  • Created umbrella issue
  • Documented features, checklist, and constraints we ran into
  • Next steps
    • Create Grid API Design doc
    • Mixed grid mode is still an issue, need to explore hang on column (needs codesandbox)
    • Checkout other CSS Grid implementations (bootstrap)

@tay1orjones tay1orjones mentioned this issue Jan 14, 2022
Closed
21 tasks
@tay1orjones tay1orjones added this to the v11 Release Candidate 0 milestone Jan 19, 2022
@tay1orjones
Copy link
Member

@joshblack With the re-addition of narrow mode in #10934, I think this is complete. Closing.

kennylam pushed a commit to kennylam/carbon that referenced this issue Jul 30, 2024
@pjudge
fix(bx-header-menu): add button role (carbon-design-system#10440)
41f08b5 
### Related Ticket(s)

Fixes carbon-design-system#10392

### Description

This PR adds `role="button"` to the `<a>` tags inside the L0 menu. This improves accessibility by identifying these elements are acting as buttons. 

> The button role identifies an element as a button to assistive technology such as screen readers. A button is a widget used to perform actions such as submitting a form, opening a dialog, canceling an action, or performing a command such as inserting a new record or displaying information.

### Changelog

**New**

- Markup for `<a>` tags in dropdown menu items now includes `role="button"`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tay1orjones tay1orjones

@joshblack joshblack

Labels
planning: umbrella Umbrella issues, surfaced in Projects views
Projects
Design System
Archived in project
Milestone
v11 GA
Development

No branches or pull requests
2 participants
@tay1orjones @joshblack