[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: PNG File image-2024-01-19-13-42-38-867.png    
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,
I want to create a clickable button
So that I can create links to both internal and external content, with the ability to customise the styling and label.

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)

+ Add Block buttons (-https://getbootstrap.com/docs/5.3/components/buttons/#block-buttons)-

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

Block buttons 

This feature depends on the parent element, should move this AC to MCL-12

 

<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 MCL-12 and approved the pull request.

Generated at Mon Feb 12 04:48:37 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.