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.

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

[Bug/improvement]: Chips component is missing grid specifications where no input field is required (Material "Suggestion" chip) #527

Open
3 tasks done
gselderslaghs opened this issue Nov 7, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@gselderslaghs
Copy link

Before submitting...

Context

Implementing the Chips component as standalone element without surrounding chips class container, results in missing grid specifications and as a result no horizontal grid padding applied when chips render over multiple rows

Current Behavior

Documentation suggests the possibility of using the chip element without a wrapping chips container element, however, using this approach results in no grid with inner padding applied to the chip elements, this results in chips being rendered with no horizontal padding between the elements in a state where chips are rendered over multiple lines

Current documentation only applies as a component in the forms components, after doing investigation on the Material Chips component documentation lists four different types of available Chips (Assist chip, Filter chip, Input chip, Suggestion chip).

As of the Materialize documentation, all types are available to use, however, in a use-case where only the suggestion chip should be applied (e.g. the "Suggestion" chip in the documentation example) and/or in a use-case where no input field is needed, building up the component with surrounding container with the chips class, results in rendering the input field dynamically within the constructor

Building up the chip component without the surrounding chips container, for creating a non-form chips use case, results in the previously mentioned styling issue where horizontal grid padding seems to be missing between the elements

Expected behavior

Implementing Chips component should render in the correct styling and should always be wrapped inside a chips container

Possible Solutions or Causes

  • Allow building up the chips container without constructing the input field, as result the grid styling would always be applied
  • Implement the rendering of the input element as option within the Chips component
  • Update documentation since Chips component is not necessarily a subcomponent within forms, but should be available as
    standalone component or as a form component

Steps to reproduce

Scenario 1 - Use case without container

  1. Implement chip elements without surrounding chips container class, make sure there are enough chips to render over multiple lines or check in responsive state
  2. Chips component grid specifications are missing, since they only apply to the container element

Scenario 2 - Use case with container

  1. Implement chip elements with the surrounding chips container class within the point of view where no input field is required
  2. Input field is rendered within the chips container, since it's triggered in the constructor

Your Environment

  • Version used: v2.1.1
  • Browser Name and version:
  • Operating System and version (desktop or mobile):
  • Additional information you want to tell us:
@gselderslaghs gselderslaghs added the bug Something isn't working label Nov 7, 2024
gselderslaghs added a commit to gselderslaghs/materialize that referenced this issue Nov 9, 2024
…actored constructor, moved input field functional method invocations to setupInput method (materializecss#527)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant