Skip to content

BtnClose component #5

@bonsall

Description

@bonsall

Create a component to encapsulate the bootstrap close button component.
https://getbootstrap.com/docs/5.1/components/close-button/

This component belongs in the Bonzai.Blazor.Bootstrap project and should be placed in the Components folder.

This component requires 2 parameters

  1. bool IsWhite
  2. EventCallback OnClick

The component needs to display the "X" button just like it does in the bootstrap documentation. This component should also apply attribute splatting for all attributes. The aria-label attribute should default to "Close" but the user of the component should be able to override that value via attribute splatting.

In addition to the attribute splatting, setting class names on the component should automatically combine the user provided class with the btn-close class name. For example, creating a BtnClose component like this

<BtnClose class="mr-2" />

Should result in this html output (notice how it has both the btn-close and mr-2 class names).

<button type="button" class="btn-close mr-2" aria-label="Close"></button>

All of the existing components in this library have this class name behavior. So you should be able to look at other components and see how they achieve this. To get you started, you will need to inherit the BootstrapComponentBase class.

You will also need to create a test class in the Bonzai.Blazor.Bootstrap.Test project. You will need to write tests that prove the following:

  1. The component renders a button and that button has the btn-close class name
  2. Setting the class attribute appends that class name to the list of class names (as described above).
  3. Attribute splatting is working
  4. The aria-label attribute defaults to "Close"
  5. The aria-label attribute can be overridden by setting aria-label="Some Value" on the component.

You will also need to create a page in the documentation project that describes this component and details its parameters. If you're not sure what to write to describe the component you can always get some inspiration from bootstraps documentation. There are a lot of examples in the documentation project, please take a look at those to see how the style of the documentation pages is achieved. This documentation needs to have working example of the following:

  1. Basic example that just shows the closed button
  2. Shows off the disabled state
  3. Shows off the IsWhite variation.
  4. Shows that the OnClick button will execute some code.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions