Implement Button component
#3
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implement the Button component to handle button creation and removal based on the provided configuration. The button class consists of a constructor method that initializes the configuration, a create method to create buttons, and a remove method to remove buttons. This implementation ensures that the provided configuration is verified before creating or removing buttons.
This function creates a button element based on the provided configuration object. It checks if the configuration is verified before creating the button. If the configuration is not verified, the function returns undefined. The button type determines the style of the button: rounded-square, slab, or transparent.
This function creates a container element for a button, allowing the inclusion of an icon, text, and various attributes such as ID, class name, and event listeners. It uses helper functions from the utilities module to set attributes and events for the container element.
This function removes a button element from the DOM based on the provided configuration. It utilizes strict mode for improved code quality and reliability.
Ensure early return in the if statement when events are not present in the configuration. This adjustment improves code clarity and adheres to the expected behavior. Additionally, relocate the error message handling to the `button-create-container` file for better organization within the codebase.
Due to changes in the configuration verification utility, parameters needed to be updated in this.config at condition. Added this.name to make the parameters more readable and ensure proper initialization.
The `button-create` file had a helper function `button-create-container`. Merged them into one file for better file organization within the components folder. This change helps in tracking related functions more effectively.
Updated `button-create` by adding the 'button' parameter due to changes in the configuration verifier. This ensures the function operates with the correct parameters.
chessurisme
force-pushed
the
feature/button
branch
from
07e318a
to
20e3819
Compare
Set 'text' to let instead of const to accommodate 'rounded-square' type of button, which forces such buttons to have no 'text'. This change ensures that the 'text' can be modified in the switch statement even if explicitly included in the config properties. Keeping other properties as const prevents unintended changes, maintaining stability.
Ensure the icon is wrapped in an `i` element instead of a `div` for proper icon display and alignment according to standard practices.
Introduce tests to validate the functionality of the Button component methods. These tests provide assurance regarding the reliability and correctness of the methods implemented within the component.
Updated import paths in component files to use module resolution aliases defined in jsconfig.json. This change improves code readability and maintainability by replacing relative paths with aliases.
Fixes the bug of not setting events on a button because the button is not yet created or appended to the DOM. Event setting relies on the element's ID in the DOM. Separated event setting into another method to address this issue. Additionally, return `this` in methods where chaining is necessary.
Combine multiple files into a single file to reduce unnecessary module creation. This change simplifies navigation and improves codebase organization.
Combine multiple test files into a single test file to reduce unnecessary module tests. This change simplifies navigation and improves codebase organization.
Adjusted code formatting to adhere to a maximum print width of 100characters, improving readability and consistency across the codebase.
|
Since the files have been merged into one, most of the bugs have been fixed, including:
The merged test ensures everything is working well. Alas, no more getting lost trying to find multiple files. 😁 |
chessurisme
added a commit
that referenced
this pull request
Jun 18, 2024
* feat: implement Button component Implement the Button component to handle button creation and removal based on the provided configuration. The button class consists of a constructor method that initializes the configuration, a create method to create buttons, and a remove method to remove buttons. This implementation ensures that the provided configuration is verified before creating or removing buttons. * feat: implement button creation function This function creates a button element based on the provided configuration object. It checks if the configuration is verified before creating the button. If the configuration is not verified, the function returns undefined. The button type determines the style of the button: rounded-square, slab, or transparent. * feat: implement button container creation function This function creates a container element for a button, allowing the inclusion of an icon, text, and various attributes such as ID, class name, and event listeners. It uses helper functions from the utilities module to set attributes and events for the container element. * feat: implement button removal function This function removes a button element from the DOM based on the provided configuration. It utilizes strict mode for improved code quality and reliability. * fix: modify and relocate events error message Ensure early return in the if statement when events are not present in the configuration. This adjustment improves code clarity and adheres to the expected behavior. Additionally, relocate the error message handling to the `button-create-container` file for better organization within the codebase. * refactor: add parameters to this.config in Button class Due to changes in the configuration verification utility, parameters needed to be updated in this.config at condition. Added this.name to make the parameters more readable and ensure proper initialization. * refactor: move helper function to main function The `button-create` file had a helper function `button-create-container`. Merged them into one file for better file organization within the components folder. This change helps in tracking related functions more effectively. * fix: add 'button' parameter in 'button-create' Updated `button-create` by adding the 'button' parameter due to changes in the configuration verifier. This ensures the function operates with the correct parameters. * fix: separate 'text' from other config properties Set 'text' to let instead of const to accommodate 'rounded-square' type of button, which forces such buttons to have no 'text'. This change ensures that the 'text' can be modified in the switch statement even if explicitly included in the config properties. Keeping other properties as const prevents unintended changes, maintaining stability. * fix: change icon wrapper to i element from div Ensure the icon is wrapped in an `i` element instead of a `div` for proper icon display and alignment according to standard practices. * feat: add tests for Button component Introduce tests to validate the functionality of the Button component methods. These tests provide assurance regarding the reliability and correctness of the methods implemented within the component. * refactor: update import paths for module resolution Updated import paths in component files to use module resolution aliases defined in jsconfig.json. This change improves code readability and maintainability by replacing relative paths with aliases. * fix: separate event setting from button creation Fixes the bug of not setting events on a button because the button is not yet created or appended to the DOM. Event setting relies on the element's ID in the DOM. Separated event setting into another method to address this issue. Additionally, return `this` in methods where chaining is necessary. * refactor: merge files into one Combine multiple files into a single file to reduce unnecessary module creation. This change simplifies navigation and improves codebase organization. * test: merge test files into one Combine multiple test files into a single test file to reduce unnecessary module tests. This change simplifies navigation and improves codebase organization. * style: expand print width to 100 characters Adjusted code formatting to adhere to a maximum print width of 100characters, improving readability and consistency across the codebase.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
❓ What type of PR is this?
💬 Description
This PR includes a Button component class with methods of creation and removal.
This is responsible for creating a button throughout the DOM.
🎟️ Related Tickets & Documents
🃏 Added/updated tests?
We encourage you to keep the code coverage percentage at 90% and above.
📚 Resources for Reviewers
Button- https://github.com/free-bird-operation-project/quiz-manager/wiki/Button🌿 What branch would you like to merge this into?
feature/components📷 [optional] What gif best describes this PR or how it makes you feel?