[MCL-7] Button Created: 08/Dec/23 Updated: 22/Jan/24 Resolved: 22/Jan/24 |
|
| Status: | Closed |
| Project: | Magnolia Component Library |
| Component/s: | Core Content |
| Affects Version/s: | None |
| Fix Version/s: | None |
| Type: | Story | Priority: | Neutral |
| Reporter: | Raymond Tran | Assignee: | Le Hai Thanh |
| Resolution: | Fixed | Votes: | 0 |
| Labels: | None | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | Not Specified | ||
| Original Estimate: | Not Specified | ||
| Attachments: |
|
| Template: |
|
| Acceptance criteria: |
Acceptance Criteria
[X]*
Component is called "Button"
[X]*
Supports all OOTB Bootstrap style variants including Primary, Secondary, Success, Danger, Warning, Info, Light, Dark and Link.
[X]*
Supports OOTB Boostrap outline styling
[X]*
Supports Large and Small styling
[X]*
Shows animation when button is depressed
[X]*
Links to internal or external content page
[X]*
If the button contains a link it should be represented in the markup using an <a> tag.
Documentation Acceptance Criteria
[X]*
Contains Title, Description and Examples
[X]*
Contains FTL and YAML code
Content Author Acceptance Criteria
[X]*
Component can be added to any page template in Column area of a Row component only.
[X]*
The link and label can be specified in the dialog
[X]*
Button label is mandatory
[X]*
The button styles can be configured entirely within the dialog - see Acceptance Criteria for supported styles
[X]*
Class and CSS can be overridden in the dialog
Accessibility Acceptance Criteria
[X]*
Buttons can be navigated through, selected and depressed using the keyboard.
[X]*
If the button is a link, the markup should contain role="button" attribute to indicate that the link is a button.
|
| Date of First Response: |
| Description |
User Story:As a content author, Description:Exists in BTK already as Button component Bootstrap documentation: https://getbootstrap.com/docs/5.3/components/buttons/ |
| Comments |
| Comment by Le Hai Thanh [ 16/Jan/24 ] |
|
Changes: + Text 'Style' to 'Variant' + Add Outline buttons (https://getbootstrap.com/docs/5.3/components/buttons/#outline-buttons) + Add Sizes (https://getbootstrap.com/docs/5.3/components/buttons/#sizes)
+ Shows animation when button is depressed + If the button contains a link it should be represented in the markup using an <a> tag.
|
| Comment by Le Hai Thanh [ 16/Jan/24 ] |
|
This feature depends on the parent element, should move this AC to
<div class="d-grid gap-2 d-md-block"> <button class="btn btn-primary" type="button">Button</button> <button class="btn btn-primary" type="button">Button</button> </div> <div class="d-grid gap-2 col-6 mx-auto"> <button class="btn btn-primary" type="button">Button</button> <button class="btn btn-primary" type="button">Button</button> </div>
|
| Comment by Le Hai Thanh [ 19/Jan/24 ] |
|
Hi rtran The pull request (PR) has been opened for this ticket. Please take a look when you have a chance https://git.magnolia-cms.com/projects/LIGHT-MODULES/repos/btk/pull-requests/4/overview Regarding AC 'Block buttons ', please refer to my previous comment. Its documentation is added as well
Thanks, Thanh Le |
| Comment by Raymond Tran [ 22/Jan/24 ] |
|
Thanks thanh.lehai ! I've updated |