[MGNLUI-8368] Tab names are only displayed when the dialog has more than one tab Created: 15/Sep/23  Updated: 24/Oct/23  Resolved: 20/Oct/23

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: 6.2.38
Fix Version/s: 6.3.0, 6.2.40

Type: Bug Priority: Neutral
Reporter: Carlos Cantalapiedra Assignee: Antonín Juran
Resolution: Fixed Votes: 0
Labels: VN-Testing
Σ Remaining Estimate: Not Specified Remaining Estimate: Not Specified
Σ Time Spent: 3h Time Spent: 3h
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Attachments: PNG File image-2023-09-29-14-58-38-278.png     PNG File image-2023-09-29-15-01-55-704.png    
Issue Links:
Problem/Incident
Sub-Tasks:
Key
Summary
Type
Status
Assignee
MGNLUI-8457 Implementation Sub-task Completed Antonín Juran  
MGNLUI-8458 Code review Sub-task Completed Jaromir Sarf  
MGNLUI-8459 Pre-integration QA Sub-task Completed Jaromir Sarf  
MGNLUI-8460 Final QA Sub-task Completed Quach Hao Thien  
Template:
Acceptance criteria:
Empty
Task DoD:
[X]* Doc/release notes changes? Comment present?
[X]* Downstream builds green?
[X]* Solution information and context easily available?
[X]* Tests
[X]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Sprint: Nucleus 47
Story Points: 2
Team: Nucleus
Work Started:
Approved:
Yes

 Description   

Steps to reproduce

  1. Go to demo and edit the html yaml with the following code: 
    /mtk2/dialogs/components/html.yaml
     form:
      properties:
        description:
          $type: textField
        headline:
          $type: textField
        video:
          $type: textField
          placeholder: https://
          required: true
          label: generic_link_url_label
          validators:
            url:
              $type: regexpValidator
              pattern: "^(https?|http)://[-a-zA-Z0-9+&@#/%?=~_|!:,.;]*[-a-zA-Z0-9+&@#/%=~_|]"
              errorMessage: generic_validation_wrong_url
              
      layout:
        $type: tabbedLayout
        tabs:
          myContent:
            label: My Content
            fields:
              - name: headline
              - name: video
  2.  Go to Pages app and create a page (basic page template)
  3. Open the page and within the main area, create an HTML component
  4. Check no tab name is displayed
  5. Now go back to the html yaml definition and include a second tag:  
    /mtk2/dialogs/components/html.yaml
     form:
      properties:
        description:
          $type: textField
        headline:
          $type: textField
        video:
          $type: textField
          placeholder: https://
          required: true
          label: generic_link_url_label
          validators:
            url:
              $type: regexpValidator
              pattern: "^(https?|http)://[-a-zA-Z0-9+&@#/%?=~_|!:,.;]*[-a-zA-Z0-9+&@#/%=~_|]"
              errorMessage: generic_validation_wrong_url
              
      layout:
        $type: tabbedLayout
        tabs:
          myContent:
            label: My Content
            fields:
              - name: headline
              - name: video
          myData:
            label: My data
            fields:
              - name: description
  6. Go back to the Pages app and open the page created at step 2
  7. Create an HTML component
  8. Check now the tab names appear

Expected results

Even when a dialog has a single tab, the tab name must be displayed

Actual results

Only when the dialog has more than one tab the tab name is displayed

Workaround

N/A

Development notes

N/A



 Comments   
Comment by Quach Hao Thien [ 29/Sep/23 ]

Discovery

Css that hides the tab name when there is only one tab 
https://git.magnolia-cms.com/projects/platform/repos/ui/browse/magnolia-resurface-theme/src/main/resources/VAADIN/themes/resurface/form.scss#145

The single tab in TabbedLayout:

  • Before the change
  • And after the change

cc: avongunten Do you have any concerns about ui change?

Generated at Mon Feb 12 09:54:32 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.