Skip to content

Support markdown for header attr in dropdown #1029

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yamgent merged 8 commits into from
Feb 22, 2020
Merged

Support markdown for header attr in dropdown #1029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b0da538
Implement parsing for header attr in dropdown
le0tan Feb 6, 2020
c487a62
Make text the same as header
le0tan Feb 14, 2020
933c72c
Update tests
le0tan Feb 16, 2020
5cf5ecf
Update documentation
le0tan Feb 16, 2020
f791ee5
Update tests
le0tan Feb 16, 2020
443ffd1
Minor changes
le0tan Feb 16, 2020
d068c87
Update doc
le0tan Feb 22, 2020
baf32a3
Merge branch 'master' into issue-1028
le0tan Feb 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/userGuide/components/advanced.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,10 @@ Slot name | Default class
header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>`title` <br> (deprecated)</small> | `popover-header`
content | `popover-body`

**Dropdown Slot Options:**
Slot name | Default class
--- | ---
header | `dropdown-toggle`

### Inserting custom classes into components

Expand Down
7 changes: 4 additions & 3 deletions docs/userGuide/syntax/dropdowns.mbdf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
<span id="code">

```html
<dropdown header="Action" type="primary">
<!--Notice how header attribute supports inline MarkDown-->
<dropdown header="*Action*" type="primary">
<li><a href="#dropdown" class="dropdown-item">Action</a></li>
<li><a href="#dropdown" class="dropdown-item">Another action</a></li>
<li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
Expand All @@ -28,7 +29,7 @@
</span>
<span id="output">

<dropdown header="Action" type="primary">
<dropdown header="*Action*" type="primary">
<li><a href="#dropdown" class="dropdown-item">Action</a></li>
<li><a href="#dropdown" class="dropdown-item">Another action</a></li>
<li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
Expand Down Expand Up @@ -102,7 +103,7 @@ Name | Type | Default | Description
--- | --- | --- | ---
disabled | `Boolean` | `false` | Whether Dropdown can be opened.
menu-align-right | `Boolean` | `false` | Whether the dropdown list will be right-aligned.
header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>text <br> (deprecated)</small> | `String` | `''` | Dropdown button header text.
header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>text <br> (deprecated)</small> | `String` | `''` | Dropdown button header text. (Supports inline MarkDown syntax)
type | `String` | `default` | Supports: `default`, `primary`, `danger`, `info`, `warning`, `success`.

<div class="indented">
Expand Down
30 changes: 30 additions & 0 deletions src/lib/markbind/src/parsers/componentParser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,33 @@ function _parseBoxAttributes(element) {
// TODO warn when light and seamless attributes are both present
}

/*
* Dropdowns
*/

function _parseDropdownAttributes(element) {
const el = element;
const slotChildren = el.children && el.children.filter(child => _.has(child.attribs, 'slot'));
const hasHeaderSlot = slotChildren && slotChildren.some(child => child.attribs.slot === 'header');

// If header slot is present, the header attribute has no effect, and we can simply remove it.
if (hasHeaderSlot) {
Comment thread
le0tan marked this conversation as resolved.
delete el.attribs.header;
// TODO deprecate text attribute of dropdown
delete el.attribs.text;
return;
}

// header attribute takes priority over text attribute
if (_.has(element.attribs, 'header')) {
_parseAttributeWithoutOverride(element, 'header', true, '_header');
Comment thread
le0tan marked this conversation as resolved.
delete el.attribs.text;
} else {
// TODO deprecate text attribute of dropdown
_parseAttributeWithoutOverride(element, 'text', true, '_header');
}
}

/*
* API
*/
Expand All @@ -213,6 +240,9 @@ function parseComponents(element, errorHandler) {
case 'box':
_parseBoxAttributes(element);
break;
case 'dropdown':
_parseDropdownAttributes(element);
break;
default:
break;
}
Expand Down
4 changes: 2 additions & 2 deletions test/functional/test_site/expected/testAntiFOUCStyles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,15 @@
<li><a href="/" class="nav-link">One</a></li>
<li><a href="/" class="nav-link">Two</a></li>
<div class="nav-link temp-dropdown-placeholder">Dropdown</div>
<dropdown header="Dropdown" class="nav-link temp-dropdown">
<dropdown class="nav-link temp-dropdown"><template slot="_header">Dropdown</template>
<li><a class="dropdown-item" href="/">Dropdown One</a></li>
<li><a class="dropdown-item" href="/">Dropdown Two</a></li>
</dropdown>
</navbar>

<p><strong>Test dropdown in body with text and class attributes</strong></p>
<div class="test-class temp-dropdown-placeholder">Test One</div>
<dropdown header="Test One" class="test-class temp-dropdown">
<dropdown class="test-class temp-dropdown"><template slot="_header">Test One</template>
<li><a class="dropdown-item" href="/">Dropdown One</a></li>
<li><a class="dropdown-item" href="/">Dropdown Two</a></li>
</dropdown>
Expand Down
2 changes: 1 addition & 1 deletion test/functional/test_site_algolia_plugin/expected/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<p><strong>Test Algolia plugin adds algolia-no-index classes</strong></p>
<p><strong>Dropdowns should have algolia-no-index class</strong></p>
<div class="temp-dropdown-placeholder">Dropdown</div>
<dropdown header="Dropdown" class="temp-dropdown algolia-no-index">
<dropdown class="temp-dropdown algolia-no-index"><template slot="_header">Dropdown</template>
<li><a class="dropdown-item" href="/">One</a></li>
<li><a class="dropdown-item" href="/">Two</a></li>
</dropdown>
Expand Down
2 changes: 1 addition & 1 deletion test/functional/test_site_convert/expected/contents/topic1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
<li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
<div class="nav-link temp-dropdown-placeholder">Topic 3</div>
<dropdown header="Topic 3" class="nav-link temp-dropdown">
<dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
<li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
<li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
</dropdown>
Expand Down
2 changes: 1 addition & 1 deletion test/functional/test_site_convert/expected/contents/topic2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
<li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
<div class="nav-link temp-dropdown-placeholder">Topic 3</div>
<dropdown header="Topic 3" class="nav-link temp-dropdown">
<dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
<li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
<li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
</dropdown>
Expand Down
2 changes: 1 addition & 1 deletion test/functional/test_site_convert/expected/contents/topic3a.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
<li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
<div class="nav-link temp-dropdown-placeholder">Topic 3</div>
<dropdown header="Topic 3" class="nav-link temp-dropdown">
<dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
<li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
<li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
</dropdown>
Expand Down
2 changes: 1 addition & 1 deletion test/functional/test_site_convert/expected/contents/topic3b.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
<li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
<div class="nav-link temp-dropdown-placeholder">Topic 3</div>
<dropdown header="Topic 3" class="nav-link temp-dropdown">
<dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
<li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
<li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
</dropdown>
Expand Down
2 changes: 1 addition & 1 deletion test/functional/test_site_templates/test_default/expected/contents/topic1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
<li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
<div class="nav-link temp-dropdown-placeholder">Topic 3</div>
<dropdown header="Topic 3" class="nav-link temp-dropdown">
<dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
<li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
<li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
</dropdown>
Expand Down
2 changes: 1 addition & 1 deletion test/functional/test_site_templates/test_default/expected/contents/topic2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
<li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
<div class="nav-link temp-dropdown-placeholder">Topic 3</div>
<dropdown header="Topic 3" class="nav-link temp-dropdown">
<dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
<li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
<li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
</dropdown>
Expand Down
2 changes: 1 addition & 1 deletion test/functional/test_site_templates/test_default/expected/contents/topic3a.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
<li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
<div class="nav-link temp-dropdown-placeholder">Topic 3</div>
<dropdown header="Topic 3" class="nav-link temp-dropdown">
<dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
<li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
<li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
</dropdown>
Expand Down
2 changes: 1 addition & 1 deletion test/functional/test_site_templates/test_default/expected/contents/topic3b.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
<li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
<div class="nav-link temp-dropdown-placeholder">Topic 3</div>
<dropdown header="Topic 3" class="nav-link temp-dropdown">
<dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
<li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
<li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
</dropdown>
Expand Down
2 changes: 1 addition & 1 deletion test/functional/test_site_templates/test_default/expected/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
<li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
<div class="nav-link temp-dropdown-placeholder">Topic 3</div>
<dropdown header="Topic 3" class="nav-link temp-dropdown">
<dropdown class="nav-link temp-dropdown"><template slot="_header">Topic 3</template>
<li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
<li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
</dropdown>
Expand Down
20 changes: 20 additions & 0 deletions test/unit/parsers/componentParser.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,3 +97,23 @@ test('postParseComponent assigns the correct header id to panels', () => {
testData.POST_PARSE_PANEL_ID_ASSIGNED_USING_HEADER_SLOT_EXPECTED,
true);
});

test('parseComponent parses dropdown header attribute and inserts into DOM as _header slot correctly', () => {
parseAndVerifyTemplate(testData.PARSE_DROPDOWN_HEADER,
testData.PARSE_DROPDOWN_HEADER_EXPECTED);
});

test('parseComponent parses dropdown text attribute and inserts into DOM as _header slot correctly', () => {
parseAndVerifyTemplate(testData.PARSE_DROPDOWN_TEXT_ATTR,
testData.PARSE_DROPDOWN_TEXT_ATTR_EXPECTED);
});

test('parseComponent parses dropdown with header taking priority over text attribute', () => {
parseAndVerifyTemplate(testData.PARSE_DROPDOWN_HEADER_SHADOWS_TEXT,
testData.PARSE_DROPDOWN_HEADER_SHADOWS_TEXT_EXPECTED);
});

test('parseComponent parses dropdown with header slot taking priority over header attribute', () => {
parseAndVerifyTemplate(testData.PARSE_DROPDOWN_HEADER_SLOT_TAKES_PRIORITY,
testData.PARSE_DROPDOWN_HEADER_SLOT_TAKES_PRIORITY_EXPECTED);
});
58 changes: 58 additions & 0 deletions test/unit/utils/componentParserData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,4 +279,62 @@ module.exports.PARSE_BOX_HEADING_EXPECTED = `
</box>
`;

/**
* Dropdowns
*/

module.exports.PARSE_DROPDOWN_HEADER = `
<dropdown header="**Lorem ipsum dolor sit amet**">
Header attribute should be inserted as internal _header slot and deleted.
</dropdown>
`;

module.exports.PARSE_DROPDOWN_HEADER_EXPECTED = `
<dropdown><template slot="_header"><strong>Lorem ipsum dolor sit amet</strong></template>
Header attribute should be inserted as internal _header slot and deleted.
</dropdown>
`;

// TODO deprecate text attribute of dropdown
module.exports.PARSE_DROPDOWN_TEXT_ATTR = `
<dropdown text="**Lorem ipsum dolor sit amet**">
Text attribute should be inserted as internal _header slot and deleted.
</dropdown>
`;

// TODO deprecate text attribute of dropdown
module.exports.PARSE_DROPDOWN_TEXT_ATTR_EXPECTED = `
<dropdown><template slot="_header"><strong>Lorem ipsum dolor sit amet</strong></template>
Text attribute should be inserted as internal _header slot and deleted.
</dropdown>
`;

// TODO deprecate text attribute of dropdown
module.exports.PARSE_DROPDOWN_HEADER_SHADOWS_TEXT = `
<dropdown text="Not expected text" header="**Lorem ipsum dolor sit amet**">
Header attribute should be inserted as internal _header slot and deleted. Text attribute should be ignored.
</dropdown>
`;

// TODO deprecate text attribute of dropdown
module.exports.PARSE_DROPDOWN_HEADER_SHADOWS_TEXT_EXPECTED = `
<dropdown><template slot="_header"><strong>Lorem ipsum dolor sit amet</strong></template>
Header attribute should be inserted as internal _header slot and deleted. Text attribute should be ignored.
</dropdown>
`;

module.exports.PARSE_DROPDOWN_HEADER_SLOT_TAKES_PRIORITY = `
<dropdown header="**Lorem ipsum dolor sit amet**" text="shouldn't appear in result">
<strong slot="header">slot text</strong>
Header attribute should be ignored and deleted while header slot is reserved.
</dropdown>
`;

module.exports.PARSE_DROPDOWN_HEADER_SLOT_TAKES_PRIORITY_EXPECTED = `
<dropdown>
<strong slot="header">slot text</strong>
Header attribute should be ignored and deleted while header slot is reserved.
</dropdown>
`;

/* eslint-enable max-len */