material-components/material-components-web-catalog

Catalog of Material Components for the web (MDC Web)

Material Components: Shared Documentation and Policies

Material Components for Android, iOS, web and Flutter help developers execute Material Design with modular and customizable UI components. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional user experiences.

This repo contains all common documentation for Material Components projects across the different platforms.

Repos

• Material Components Android
• Material Components iOS
• Material Components Web
• Material Components Flutter

Useful Links

• Contributing
• Filing an Issue
• Components Request Policy
• Code of Conduct
• Stack Overflow (external site)
• Material.io (external site)
• Material Design Guidelines (external site)
• Discord Chat Rooms (external site)

material-components-web-catalog's Issues

Update landing grid with screenshots

And update aspect ratio of images

checkbox: Add checked and unchecked demos to page

Create Checkbox component page

Update all "Material Design Guidelines" links to new "go" links

Change the title of the catalog

It should be "Material Components for the Web", not "Material Components for Web".

Create elevation component

Live is a bit dull

Its not meant to work yet right ?

Page only has header and nothing else. Nice big service worker cache though

Catalog title is too long for mobile screens

Title is cut off

drawer: Drawer items shouldn't navigate away from page

Currently, clicking on drawer items will navigate back to '#'. This is the homepage if you click in the hero, and a blank page if you click in the demos.

Top App Bar and Drawer iframes do not work in Firefox

iframes in Firefox don't seem to like # in the URL. See related issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=302976

Shape demo causes error when navigating away

Steps:

1. Navigate to Shape demo
2. Navigate away by any means (arrow, sidebar, back button)

8 errors are reported, seemingly one for each of the ripples constructed in the shape catalog component:

Create landing page

Basically just the Top App Bar. We will add links to individual component pages later.

Somewhat confusingly...The Top App Bar is not the MDC Web version of the Top App Bar (because it is not written yet). It will be a custom one specific to our catalog...Once the MDC Web version of Top App Bar is written, we will update this catalog to use that Top App Bar.

Update theme to reuse components from catalog pages

Most of the components also need to be updated so that individual components can be rendered with different variants, so the theme can also use those components.

Linear Progress Indicator wraps to two lines in sidebar

SVGs on front page do not use correct font on systems without Roboto installed

Pat pointed out that this problem is exclusive to referencing the SVGs in img tags... if we inline the SVGs it will work.

Create typography component

Create Radio Button component page

Create shape component

Create snackbar component

Create List component page

Build out animations between transitions

• Chat with Sharron Harris about the https://material-io-project.appspot.com/design/environment/surfaces.html#material-environment motion spec.
• every route change should trigger an animation

Update HeaderBar with new design

• Update HeaderBar colour to black
• Make HeaderBar icon a back arrow on component pages (make icon a param?)
• Update HeaderBar typography
• Update HeaderBar title to "MATERIAL COMPONENTS FOR WEB"

ripple: Unbounded ripple has visible rectangular bounds

Go to the catalog and click on the icon to view the unbounded ripple.
The edge of it is hidden behind the borders of its bounding box.

Create menu component

Create Dialog component

Create tabs component

mobile: Non determinism in scrolling the view when the user clicks into a textfield and the keyboard comes up

I know this is a sticky one.

But on mobile in the Text field demo.
Sometimes when you click into a text box it scrolls the view so that you can still see the text field when the keyboard comes up a the bottom.

Other times it does not, and the keyboard hides the text field you just clicked in.

I knwo the answer is DOT USE web views on mobiles, but its weird how non deterministic it is.

Mobile view of a component catalog page should hide the sidebar

Right now the sidebar ends up at the top of the screen

And all the actual content is pushed down to the bottom

Create Chips component page

Create grid list component

App should scroll to top of page upon navigation

With the update to use hash routing, currently the page maintains its current scroll position when you navigate, which is confusing since it can mean landing smack in the middle of a component's page when navigating from the index.

Can we do something to set document.documentElement.scrollTop = 0 whenever the route changes?

Create Switch component page

Create layout grid component

Create slider component

Create Card component page

Create Top App Bar component page

Create theme component

Create button component page

• Import @material/button
• Link to guidelines
• Link to documentation
• Link to source code
• Demo sections showing types of buttons
• Home grown navigation side panel (will replace with MDC Drawer once it is ready)
• Update landing page to have link to Button

Create FAB component page

Create Linear Progress Component

Initial create-react-app Hello World

use create-react-app to create a new app in React, which just says "Hello World" on a GitHub page.

Add ripple to drawer links

• All links on the navigation drawer should have ripple

Create Icon Toggle Component

Create select component

Create ripple component

How is this catalog going to be different to the existing catalog at https://material-components-web.appspot.com/ ?

Create Text Field component page

Create Image List component page

Create Drawer Component

Top app bar "Material Design Guidelines" and "Documentation" links 404

The "Material Design Guidelines" should link to https://material.io/go/design-app-bar-top

And "Documentation" should link to https://material.io/components/web/catalog/top-app-bar/