codypearce / material-bread Goto Github PK

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
Checkbox should have an easy to use interface for displaying an error

Todo

• Create error demo
• Create story for error demo
• Implement error

Describe your feature request
Both storybook and docs should have more demos for displaying different configurations of the card header.

Todo

• Create storybook demos
• Create doc demos

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.

• Add prop to chip for selected state
• Update prop table
• Add demo for choice chip
• Add storybook demo for choice chip

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.

Context
https://material.io/design/platform-guidance/cross-platform-adaptation.html#cross-platform-guidelines

Proposed solution
We will need to check for iOS and change the default icon an title spacing.

Describe your feature request
Material docs has a section for inline editing of rows. This comes in two types, large and small.

Context

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

• Create Component
• Create storybook stories
• Create storybook story for using the edit icon within a table
• Create Doc page for new component
• Create demos for doc page
• Create jest tests

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

• Add storybook story
• Add demos for opening side navigation

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

• Create dot type that toggles
• Update prop table
• Add demo section to docs
• Add storybook section for dot variant

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

• Simple
• Full
• Clickable

Context
https://codypearce.github.io/material-bread/?path=/story/components-card--card

Todo

• Add more demos to the card section in storybook
• Create simple section
• Create full section
• Creat clickable section

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

• Add storybook story to display this
• Add functionality

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.

• Add highlight to selected row

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
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

• Add more demos to Text Button
• Add more demos to Outlined Button
• Add more demos to Flat button
• Add more demos to Contained Button

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

• Create Collapse component
• Create storybook story
• Create doc page
• Create props table
• Create doc demo
• Add Card demo as shown in material docs
• Add jest tests

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

• Create storybook section and add demos
• Create demo in docs

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

• Add to at least one demo
• Create new section in storybook Appbarbottom for "with menu"
• Create demos in Storybook under above section

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
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

• Add storybook demo
• Add demo to docs?

Describe your feature request
Add a custom section to the storybook section for buttons with more demos of custom buttons.

• Add custom section to storybook button section
• Create more custom demos

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

• Create demo in storybook

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

• Add more demos to each section

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

• Create prop to toggle this behavior
• Update prop table
• Add storybook story for this functionality

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

• Create demo
• Create section in docs
• Add to docs sidebar

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
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

• Implement feature
• Add storybook demo
• Add doc demo

Describe your feature request
We have labels only, labels + icons, but not icons only.

Todo

• Add demo section for icons only to docs

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
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.

• Add prop for toggling
• Update prop table
• Add storybook demo
• Add demo of sorting to datarow page

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
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
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

• Create more demos in storybook

Describe your feature request
Add more storybook demos for CardContent since it can be anything.

Todo

• Create more storybook demos

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
Create more demos with CardMedia there are many examples in the official docs that use media in different ways.

Todo

• Create more storybook demos
• Add more demos to docs

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

• Add storybook story for filter chip
• Add demo to docs
• Update props
• Update prop table

Describe your feature request
Currently all Bottom Navigation Demos are in one section. This should be broken into different sections. Probably the following sections

• Simple
• Label
• Icon
• Icon + Label
• with badge
• custom

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

• Create simple storybook section and add demos that are only basic navigation
• Create Label section with demos that are only labels
• Create icon section with demos that are only icons
• Create icon + label section with demos that are both icons and labels
• Create with badge section with demos that show badges used with various of the above types
• Create custom section with at least one demo that shows a custom implementation

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

• Create Storybook demo

Describe your feature request
The Backdrop component appears in the Material docs.

1. There are two parts, backlayer and and front layer.
2. Each layer contains arbitrary children

Back layer

1. Has two states: active and inactive
2. Toggles between active and inactive when navigation is clicked
3. Clicking the backlayer will expand, pushing the front layer down
4. While not expanded it can also display information related to the front layer
5. Back layer can change the front layer content with navigation or filtering

Front layer

1. Has two states: active and inactive
2. When active it shows on top of backlayer
3. When inactive it shows at the bottom of the page
4. When inactive and clicked it will expand to to active
5. Has option subheader

Context
https://material.io/design/components/backdrop.html#usage

Proposed solution

Things that need to be done

• Create Component
• Create Stories and add to storybook
• Create Doc Page
• Create Doc Demos
• Write Tests

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.

• Create new section for BottomNavigationItem in storyboook within the BottomNavigation section
• Add simple section with demos
• Add with badge section
• Add custom section

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

• Add prop for toggling
• Create functionality
• Update Prop table
• Add storybook story section
• Add doc demo

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

• Add prop for visibility
• Update props table
• Create animation for growing and shrinking the badge
• Add demo section for toggling visibility in docs
• Add storybook story

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
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

• Add prop for max value
• Update prop table
• Add demo section to docs for max value
• Add storybook story for max value

Describe your feature request
Add a section to docs for creating a custom badge by replacing children

Things that need to be done

• Add demo section to docs
• Add storybook story for customizing

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:

• Editable
• Error state
• Created after a space or comma is added to the input

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

• Add storybook story for input chip demo
• Add demo to docs

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
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

• Add more complex storybook story
• Add more complex demo to docs

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

• Add some demos in storybook that have 3 items
• Add some demos in storybook that have 5 items

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.