codypearce / material-bread Goto Github PK
View Code? Open in Web Editor NEWCross Platform React Native Material Design Components
Home Page: https://material-bread.org/
License: MIT License
Cross Platform React Native Material Design Components
Home Page: https://material-bread.org/
License: MIT License
Describe your feature request
Material docs shows bottom navigation hiding on scrolling down and showing on scroll up.
Context
https://material.io/design/components/bottom-navigation.html#behavior
Todo
Describe your feature request
This seems like a common use case for fab speed dials, therefore we should create a demo section on the AppbarBottom page
*Things that need to be done
Describe your feature request
Material Docs show Bottom Navigation drawer animating from the appbar bottom and the bar disappearing.
Context
https://material.io/design/components/app-bars-bottom.html#behavior
Proposed solution
Showing the Botton Navigation should be as simple as adding that component, the other part is to hide the appbar on this transition.
Describe your feature request
The material doc's Cross-platform guidelines suggests the navigation back icon on iOS should be a left chevron and the title should be centered instead of on the left.
Proposed solution
We will need to check for iOS and change the default icon an title spacing.
Context:
Material docs show two types of Appbars: Normal and Contextual
https://material.io/design/components/app-bars-top.html#usage
Current Implementation:
Normal Appbar
is the only type of top bar supported. However a user can simply replace the children or each inner component navigation, title, and actionItems to produce a new bar.
Possible Changes:
The demo for search bar on the Appbar page switching between the two http://material-bread.org/components/appbar#search-bar. This is essentially a contextual Appbar, maybe this could be made more obvious this is the way to create a contextual appbar.
Another option is to add a prop contextualAppbar
which will render a new appbar given a condition.
Describe your feature request
Add a section to docs for creating a custom badge by replacing children
Things that need to be done
Describe your feature request
In the material docs it shows action icons automatically ending up in the Action bar on changing the viewport.
Context
https://material.io/design/components/app-bars-top.html#behavior
Proposed solution
Ideally the user should be able to list their actions and the component would handle how many to show depending on the available space.
Describe your feature request
Currently each type of button has one example of various functional (loading, icons) etc. This should be increased. Each functionality should be on it's own line and have more demos. This could be broken into separate sections within each button type or with text in the story.
Todo
Describe your feature request
Material docs show an example of inline menus within a datatable, this should be a demo in storybook and possibly in the docs.
Context
https://material.io/design/components/data-tables.html#behavior
Describe your feature request
The Backdrop component appears in the Material docs.
Back layer
Front layer
Context
https://material.io/design/components/backdrop.html#usage
Proposed solution
Things that need to be done
Describe your feature request
Material docs shows the cutout has more rounded corners when it meets the appbar.
Context
https://material.io/design/components/app-bars-bottom.html#anatomy
Proposed solution
Might need to use SVG to create this effect
Describe your feature request
Material Docs shows various ways the header row items can be hovered on desktop.
Part of this will need to wait for the ToolTip component.
Context
https://material.io/design/components/data-tables.html#behavior
Proposed solution
Will need to wait on #45 to implement hover for sorting icon
Will need to wait for Tooltip component
Describe your feature request
Material docs show 4 types of chips: Filter chip is one. It appears to support a checkmark inside the chip to help indicate it's been selected.
Context
https://material.io/design/components/chips.html#usage
Proposed solution
This could be added along with #42 as an option for selected
prop to support showing a checkmark when selected
Describe your feature request
When the badge is shown it should animate on the component it's on.
Context
Material UI supports this as you can see from their visibility section
Things that need to be done
Describe your feature request
All the current demos show exactly 4 items. Create at least a few demos that show various number of navigation items as shown in the docs
Context
https://material.io/design/components/bottom-navigation.html#anatomy
To do
Describe your feature request
Material Docs show the bottom appbar animating away when the user scrolls down and animating up when the user animates up.
Context
https://material.io/design/components/app-bars-bottom.html#behavior
Proposed solution
This should be a prop to toggle this behavior as it's not always desired.
Describe your feature request
Checkbox should have an easy to use interface for displaying an error
Todo
Describe your feature request
Material docs shows four types of chips, Choice chip is one of them. Seems like you are given the ability select a chip.
Context
https://material.io/design/components/chips.html#usage
Proposed solution
Add prop for selecting and changing the select style.
Describe your feature request
There is no section for BottomNavigationItem in storybook. Partly because it overlaps with BottomNavigation. However the docs and storybook should somewhat mirror each other.
Proposed solution
Create some more demos that take advantage of props found only on BottomNavigationItem and not the container.
Describe your feature request
Add prop to for forcing max value on a badge. Show +
and the max value if value exceeds this.
Context
Material UI implements this as shown
Things that need to be done
Describe your feature request
Material docs show that row headers can have a sorting icon that animates from top to bottom, this should be implemented.
Context
https://material.io/design/components/data-tables.html#anatomy
Proposed solution
This should probably a prop that toggles between the two states of up and down.
Describe your feature request
There are only two sections, and each section only has one line of demos, this should be increased to reach all possible states of chips.
Todo
Describe your feature request
In the material docs, Prominent type Appbars have the ability to shrink down to normal app bars when the user scrolls up.
Context
https://material.io/design/components/app-bars-top.html#behavior
Proposed solution
This could be implemented along with #3 as an additional option to the prop onScrollUp
or whatever the prop ends up being. onScrollUp={"shrink"}
for example.
Describe your feature request
Material docs show the header row can contain a checkbox that selects all or deselects all, this should be a demo
Context
https://material.io/design/components/data-tables.html#usage
Describe your feature request
Currently there are only a few card demos in storybook. Add some more demos for example some small and thin ones.
It should also be separated out into different sections
Context
https://codypearce.github.io/material-bread/?path=/story/components-card--card
Todo
Describe your feature request
The material docs show examples of a a checkbox list with the top checkbox toggling all or none of the child checkboxes. This should either be a demo or support this feature out of the box, for example using a checkboxgroup component to wrap the child checkboxes.
Context
Describe your feature request
AppbarBottom component navigation can open the sidebar, we should create a storybook story to demo this functionality similar to the Drawer Demos.
Context
Proposed solution
Things that need to be done
Describe your feature request
Material docs shows how navigation items should retain their spacing in the middle of the screen instead of equally distributed.
Context
https://material.io/design/components/bottom-navigation.html#placement
Todo
Describe your feature request
We have labels only, labels + icons, but not icons only.
Todo
Describe your feature request
Material docs shows four types of chips, Input chip is shown as being created from typing in an input form.
This should take the form of a demo with the following features:
The docs also show them being expandable but I think that is should be considered advanced functionality and implemented into another story
Context
https://material.io/design/components/chips.html#usage
Proposed solution
This could be implemented with existing components or create special support for this with inputs. In either case a demo should be created for this type of functionality.
Todo
Context
Material docs shows the appbar hiding on scroll down
https://material.io/design/components/app-bars-top.html#behavior
Current Behavior
The appbar does not hide at all, with no props or options outside of manually editing the style prop
Proposed Changes
Add a bool prop to hide when the app is scrolled down and show when the app is scrolled up.
Describe your feature request
Both storybook and docs should have more demos for displaying different configurations of the card header.
Todo
Describe your feature request
Add more storybook demos for CardContent since it can be anything.
Todo
Describe your feature request
Create a demo for the docs or storybook that integrates the Banner with an appbar and a simple page. Similar to Drawer examples that mimic a page.
Things to do
Describe your feature request
This seems like a common use case for fab speed dials, therefore we should create a storybook demo for this
Context
Proposed solution
Things that need to be done
Describe your feature request
Create a component that will wrap arbitrary content and expand and collapse based on a visible prop. Material docs shows this functionality in various places.
Context
For example in the cards section https://material.io/design/components/cards.html#anatomy
Todo
Describe your feature request
Material docs shows number of selected items. This can be accomplished by updating the title
but it might be nice to have built in support for this. Either way a demo should be created.
Context
https://material.io/design/components/data-tables.html#tables-within-cards
Proposed solution
Describe how you would implement this feature or expect this feature to work from a dev perspective.
Describe your feature request
Material docs show cards reacting to swipe motions. This might be out of scope, one could use a library like https://www.npmjs.com/package/react-native-swipe-gestures and wrap a component to create this effect.
Context
https://material.io/design/components/cards.html#behavior
Proposed solution
Describe how you would implement this feature or expect this feature to work from a dev perspective.
Describe your feature request
Currently there is only one line of checkbox demos for each section, this should be expanded to show many more checkbox demos
Describe your feature request
Some examples in the material docs show overflow menus on the right hand side, we should display this functionality in at least one of the example demos we have in the docs.
This should also be added as another storybook section in Appbarbottom.
Context
https://material.io/design/components/app-bars-bottom.html#behavior
Proposed solution
Describe how you would implement this feature or expect this feature to work from a dev perspective.
Things that need to be done
Describe your feature request
Create more demos with CardMedia there are many examples in the official docs that use media in different ways.
Todo
Describe your feature request
Material Docs indicate that Snackbars need to show above appbar bottom.
Context
https://material.io/design/components/app-bars-bottom.html#behavior
Proposed solution
Might add a prop to Snackbar for passing bottom offset.
Things that need to be done
Describe your feature request
Material docs shows a type of card for UI controls, these should be represented as demos in the project.
Context
https://material.io/design/components/cards.html#actions
Describe your feature request
Material Docs shows a transition to a fullscreen card, that grows from the center and takes over the screen.
Context
https://material.io/design/components/cards.html#behavior
Proposed solution
Maybe add a prop for isFullScreen
or something that can be toggled. Demos should replace the inner children to reproduce the top commands seen in the docs, with the close icon.
Todo
Describe your feature request
Material docs has a section for inline editing of rows. This comes in two types, large and small.
Proposed solution
This will need to be new component that displays certain text and when clicked it opens a dialog with a TextField
at the location of the table.
Optional Title
Optional pass in actionItems
Describe your feature request
All the demos show using a number, a common use case is to use a dot. It should be able to be styled and toggled.
Context
Proposed solution
Add a prop type
that accepts dot
to choose that variant.
Things that need to be done
Describe your feature request
Add a custom section to the storybook section for buttons with more demos of custom buttons.
Describe your feature request
The material docs indicates that the appbar can change where the cutout is and the location of the actions depending on the context of the page. When this switch occurs there should be an animation to switch these layouts.
Context
https://material.io/design/components/app-bars-bottom.html#behavior
Proposed solution
Looks like most of animating is the growing and shrinking of the Fab button and the cutout. Ideally there might be a prop animateFab
to toggle this behavior, then whenever the user replaces the fab or the appbar first appears it will animate that fab cutout.
Describe your feature request
Currently all Bottom Navigation Demos are in one section. This should be broken into different sections. Probably the following sections
This will require adding more demos, this could go with #22 to add number of items and colors
Context
https://codypearce.github.io/material-bread/?path=/story/components-bottom-navigation--component
Describe your feature request
Material docs displays the selected row as highlighted
Context
https://material.io/design/components/data-tables.html#anatomy
Proposed solution
Probably a simple change to the DataRow selected styles to add a highlight.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.