Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-159214

Incorrect styles applied to buttons due to misuse of aui:button taglib api.

Details

    Description

      The aui:button taglib automatically applies btn-primary, btn-secondary, and btn-cancel classes based on the parameters that are passed to it. It should never have these classes directly passed to the cssClass attribute. Instead the user should set the primary or type parameters and let the classes be automatically set. 

      Due to misuse of this tag there are a number of places where a btn-secondary class has been added in addition to the btn-primary class which results in the button being styled as secondary when it should be primary. There are also a number of instances where the btn-secondary class is duplicated unnecessarily.

      The important logic here is primarily in this file: https://github.com/liferay/liferay-portal/blob/master/portal-web/docroot/html/taglib/aui/button/init-ext.jspf#L69-L90

       

       

      Steps to Reproduce:

      Primary Buttons

      • edit_role_permissions_form.jsp
        • Navigate to "Control Panel > Roles".
        • Select the Guest Role
        • Switch to the "Define Permissions" tab.
        • Select the "General Permissions" Category.
        • Scroll to the bottom to see the "Save" button.
          • The Button should be a primary button but has an extra btn-secondary class added to it.
      • /discussion/view_message_thread.jsp & /discussion/page.jsp
        • Add the page comments widget to a page.
          • The Reply button should be a primary button.
        • Add a comment then click the reply button to reply to that comment.
          • The Reply button should be a primary button.
        • Click to edit your comment.
          • The Save button should be a primary button.
      • edit_commerce_order_notes.jsp
        • Create a commerce order.
        • Navigate to the Order Details page.
        • Click on the "Notes" icon next to the notes label.
          • The Save button should only have 1 btn & btn-primary class, but both classes are duplicated.
      • view_commerce_order_details.jsp
        • Tested by modifying an if statement in the code to make the button show up on the order details page.
          • The "Retry Payment" button should be a primary button but is rendered as a secondary button.
      • /commerce_order/notes.jsp
        • Submit a commerce order.
        • Navigate to "Control Panel > Commerce > Orders"
        • Select an order.
        • Switch to the notes tab.
          • The Save button should include only one btn-primary class but it contains two.
      • /product_detail/render/view.jsp
        • Follow the steps from learn to show the "Replacement Product" button. The product must be discontinued, not purchaseable and have areplacement product set in order for the button to show up on the product page.
          • The "Replacement Product" Button should only have btn-primary class and only one btn class.
      • /view_warehouse_items.jsp
        • Navigate to "Commerce > Products > Any Product > Skus > Any Sku > Inventory".
          • The Save button for each warehouse quantity should only have one btn-primary class, but it has two.

      Secondary Buttons

      • /wiki/error.jsp
        • Add a wiki node with content.
        • Add the wiki widget to a page and navigate to the node.
        • Edit the url so that end of the url that contains the title of the node includes a node name that does not exist. This will render the error.jsp.
          • The "Search for *"  button should only have one btn-secondary class but it has two.
      • edit_ddm_template.jsp
        • Add a new widget template.
          • The "Save and Continue" button should only have one btn-secondary class but it has two.
      • document_library/edit_file_entry_type.jsp
        • Navigate to "Sites Menu > Content & Data > Documents & Media"
        • Switch to the "Document Types" tab.
        • Add a new document type.
          • The Cancel button at the top of the page should only have one btn-secondary class but it has two.
      • look_and_feel_themes_edit.jsp
        • Navigate to "Site Menu > Site Builder > Pages".
        • Click on the 3 dots menu at the top and select "Configurations".
        • Scroll down to the "Look and Feel" section and find the "Change Current Theme" button.
          • The button should only have one btn & btn-secondary class but it has two.
      • /discussion/view_message_thread.jsp
        • Add the page comments widget to a page.
        • Add a comment and then edit it.
          • The Cancel button should only have one btn-secondary class but it has two.
      • set_asset_category_display_page_template.jsp
        • Add a new vocabulary and then add a category to it.
        • When viewing all categories in a vocabulary select one category using the checkbox on the card. 
        • Click the icon to Assign Display Page Template.
          • The Cancel button should only have one btn-secondary class but it has two.
      • /category/details.jsp
        • Add a new vocabulary and then click to add a category to it.
          • The "Save and Add a New One" and the "Cancel" button should both have only one btn-secondary class but they have two.
      • /placed_commerce_orders/view_commerce_order_details.jsp
        • With a Minium site create an order, checkout and complete it.
        • Navigate to the order via the "Placed Orders" page.
          • The "Reorder" button should only have one btn & btn-secondary class, but it has two. 
      • commerce_shipment_item/edit_commerce_shipment_item.jsp
        • Add a commerce shipment then click the shipment to edit it.
          • The "Cancel" button should only have one btn-secondary class but it has two.
      • journal-web/../edit_data_definition.jsp
        • Navigate to "Site Menu > Content & Data > Web Content > Structures".
        • Click to add a new structure.
          • The "Cancel" button should only have one btn-secondary class but it has two.
      • journal-web/../edit_article.jsp
        • Navigate to "Site Menu > Content & Data > Web Content".
        • Click to add a new article.
        • Had to test by removing an if statement in the code to render the button. 
          • The "Cancel" button should only have one btn-secondary class but it has two.
      • journal-web/../edit_ddm_template.jsp
        • Navigate to "Site Menu > Content & Data > Web Content > Templates".
        • Click to add a new template.
          • The "Cancel" button should only have one btn-secondary class but it has two.
          • The "Save and Continue" button includes the btn-primary class but it shouldn't.
      • avalara_settings.jsp
        • Navigate to "Commerce > Channels > Minium Portal"
        • Scroll to the bottom and click "Edit" next to the Alvara tax calculation.
        • Switch to the Settings tab.
          • The "Verify Connection" button should only have a btn-secondary class but it also has a btn-primary class.
      • taglib/ui/logo_selector/page.jsp
        • Navigate to "Site Menu > Page Builder > Pages".
        • Click on the 3 dots menu at the top and select configurations.
        • Scroll to the bottom and expand the Logo section.
          • The "Change" and "Delete" buttons should only have one btn and btn-secondary class but they have two.

      Attachments

        Activity

          People

            evan.thibodeau Evan Thibodeau
            evan.thibodeau Evan Thibodeau
            Kiyoshi Lee Kiyoshi Lee
            Evan Thibodeau Evan Thibodeau
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:
              6 weeks, 1 day ago

              Packages

                Version Package
                7.4.3.37 CE GA37
                7.4.3.40 CE GA40
                Master