From b0da5384aec088323b00d6ec9c10941b04e5e4a4 Mon Sep 17 00:00:00 2001 From: Tan Yuanhong Date: Thu, 6 Feb 2020 15:52:18 +0800 Subject: [PATCH 1/7] Implement parsing for header attr in dropdown --- src/lib/markbind/src/parsers/componentParser.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/lib/markbind/src/parsers/componentParser.js b/src/lib/markbind/src/parsers/componentParser.js index 3bbc235cc6..7ff18f5c3c 100644 --- a/src/lib/markbind/src/parsers/componentParser.js +++ b/src/lib/markbind/src/parsers/componentParser.js @@ -181,6 +181,14 @@ function _parseBoxAttributes(element) { _parseAttributeWithoutOverride(element, 'icon', true, '_icon'); } +/* + * Dropdowns + */ + +function _parseDropdownAttributes(element) { + _parseAttributeWithoutOverride(element, 'header', true, '_header'); +} + /* * API */ @@ -207,6 +215,9 @@ function parseComponents(element, errorHandler) { case 'box': _parseBoxAttributes(element); break; + case 'dropdown': + _parseDropdownAttributes(element); + break; default: break; } From c487a62439ea7e3902c5a34f71adb8c1603abb5f Mon Sep 17 00:00:00 2001 From: Tan Yuanhong Date: Fri, 14 Feb 2020 11:36:37 +0800 Subject: [PATCH 2/7] Make text the same as header Add support for header slot --- src/lib/markbind/src/parsers/componentParser.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/lib/markbind/src/parsers/componentParser.js b/src/lib/markbind/src/parsers/componentParser.js index 7ff18f5c3c..53ca9241e9 100644 --- a/src/lib/markbind/src/parsers/componentParser.js +++ b/src/lib/markbind/src/parsers/componentParser.js @@ -186,7 +186,22 @@ function _parseBoxAttributes(element) { */ function _parseDropdownAttributes(element) { - _parseAttributeWithoutOverride(element, 'header', true, '_header'); + 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) { + delete el.attribs.header; + return; + } + + // header attribute takes priority over text attribute + if (_.has(element.attribs, 'header')) { + _parseAttributeWithoutOverride(element, 'header', true, '_header'); + } else { + _parseAttributeWithoutOverride(element, 'text', true, '_header'); + } } /* From 933c72c884d2a136334bef2d2fa0eb72689110f0 Mon Sep 17 00:00:00 2001 From: Tan Yuanhong Date: Sun, 16 Feb 2020 15:28:04 +0800 Subject: [PATCH 3/7] Update tests --- test/functional/test_site/expected/testAntiFOUCStyles.html | 4 ++-- test/functional/test_site_algolia_plugin/expected/index.html | 2 +- .../test_site_convert/expected/contents/topic1.html | 2 +- .../test_site_convert/expected/contents/topic2.html | 2 +- .../test_site_convert/expected/contents/topic3a.html | 2 +- .../test_site_convert/expected/contents/topic3b.html | 2 +- .../test_default/expected/contents/topic1.html | 2 +- .../test_default/expected/contents/topic2.html | 2 +- .../test_default/expected/contents/topic3a.html | 2 +- .../test_default/expected/contents/topic3b.html | 2 +- .../test_site_templates/test_default/expected/index.html | 2 +- 11 files changed, 12 insertions(+), 12 deletions(-) diff --git a/test/functional/test_site/expected/testAntiFOUCStyles.html b/test/functional/test_site/expected/testAntiFOUCStyles.html index c8b0b15dc4..2a4dad4bb0 100644 --- a/test/functional/test_site/expected/testAntiFOUCStyles.html +++ b/test/functional/test_site/expected/testAntiFOUCStyles.html @@ -31,7 +31,7 @@
  • One
  • Two
    • Dropdown
    - +
  • Dropdown One
  • Dropdown Two
    •  @@ -39,7 +39,7 @@

    Test dropdown in body with text and class attributes

    Test One
    - +
  • Dropdown One
  • Dropdown Two
    •  diff --git a/test/functional/test_site_algolia_plugin/expected/index.html b/test/functional/test_site_algolia_plugin/expected/index.html index 0c0dacf77b..20be5ed94f 100644 --- a/test/functional/test_site_algolia_plugin/expected/index.html +++ b/test/functional/test_site_algolia_plugin/expected/index.html @@ -35,7 +35,7 @@

    Test Algolia plugin adds algolia-no-index classes

    Dropdowns should have algolia-no-index class

    Dropdown
    - +
  • One
  • Two
    •  diff --git a/test/functional/test_site_convert/expected/contents/topic1.html b/test/functional/test_site_convert/expected/contents/topic1.html index cdc6570c43..c8f4bd0159 100644 --- a/test/functional/test_site_convert/expected/contents/topic1.html +++ b/test/functional/test_site_convert/expected/contents/topic1.html @@ -27,7 +27,7 @@
  • Topic 1
  • Topic 2
    • Topic 3
    - +
  • Topic 3a
  • Topic 3b
    •  diff --git a/test/functional/test_site_convert/expected/contents/topic2.html b/test/functional/test_site_convert/expected/contents/topic2.html index 46e628d8d1..cfa16eac22 100644 --- a/test/functional/test_site_convert/expected/contents/topic2.html +++ b/test/functional/test_site_convert/expected/contents/topic2.html @@ -27,7 +27,7 @@
  • Topic 1
  • Topic 2
    • Topic 3
    - +
  • Topic 3a
  • Topic 3b
    •  diff --git a/test/functional/test_site_convert/expected/contents/topic3a.html b/test/functional/test_site_convert/expected/contents/topic3a.html index 60d2181832..189fc91395 100644 --- a/test/functional/test_site_convert/expected/contents/topic3a.html +++ b/test/functional/test_site_convert/expected/contents/topic3a.html @@ -27,7 +27,7 @@
  • Topic 1
  • Topic 2
    • Topic 3
    - +
  • Topic 3a
  • Topic 3b
    •  diff --git a/test/functional/test_site_convert/expected/contents/topic3b.html b/test/functional/test_site_convert/expected/contents/topic3b.html index 9e21fd8546..94cc5ede13 100644 --- a/test/functional/test_site_convert/expected/contents/topic3b.html +++ b/test/functional/test_site_convert/expected/contents/topic3b.html @@ -27,7 +27,7 @@
  • Topic 1
  • Topic 2
    • Topic 3
    - +
  • Topic 3a
  • Topic 3b
    •  diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic1.html b/test/functional/test_site_templates/test_default/expected/contents/topic1.html index ce3ad7e05e..6b4be0ea23 100644 --- a/test/functional/test_site_templates/test_default/expected/contents/topic1.html +++ b/test/functional/test_site_templates/test_default/expected/contents/topic1.html @@ -27,7 +27,7 @@
  • Topic 1
  • Topic 2
    • Topic 3
    - +
  • Topic 3a
  • Topic 3b
    •  diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic2.html b/test/functional/test_site_templates/test_default/expected/contents/topic2.html index 4ee06b36c2..6e36a8560e 100644 --- a/test/functional/test_site_templates/test_default/expected/contents/topic2.html +++ b/test/functional/test_site_templates/test_default/expected/contents/topic2.html @@ -27,7 +27,7 @@
  • Topic 1
  • Topic 2
    • Topic 3
    - +
  • Topic 3a
  • Topic 3b
    •  diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic3a.html b/test/functional/test_site_templates/test_default/expected/contents/topic3a.html index f7dfa458c8..99afd028ed 100644 --- a/test/functional/test_site_templates/test_default/expected/contents/topic3a.html +++ b/test/functional/test_site_templates/test_default/expected/contents/topic3a.html @@ -27,7 +27,7 @@
  • Topic 1
  • Topic 2
    • Topic 3
    - +
  • Topic 3a
  • Topic 3b
    •  diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic3b.html b/test/functional/test_site_templates/test_default/expected/contents/topic3b.html index 0db077290c..0399fe2cb6 100644 --- a/test/functional/test_site_templates/test_default/expected/contents/topic3b.html +++ b/test/functional/test_site_templates/test_default/expected/contents/topic3b.html @@ -27,7 +27,7 @@
  • Topic 1
  • Topic 2
    • Topic 3
    - +
  • Topic 3a
  • Topic 3b
    •  diff --git a/test/functional/test_site_templates/test_default/expected/index.html b/test/functional/test_site_templates/test_default/expected/index.html index d080ba771a..a2d429bf88 100644 --- a/test/functional/test_site_templates/test_default/expected/index.html +++ b/test/functional/test_site_templates/test_default/expected/index.html @@ -28,7 +28,7 @@
  • Topic 1
  • Topic 2
    • Topic 3
    - +
  • Topic 3a
  • Topic 3b
    •  From 5cf5ecf990550ed95cfc9ce892073c82c22a8977 Mon Sep 17 00:00:00 2001 From: Tan Yuanhong Date: Sun, 16 Feb 2020 15:58:44 +0800 Subject: [PATCH 4/7] Update documentation --- docs/userGuide/components/advanced.md | 4 ++++ docs/userGuide/syntax/dropdowns.mbdf | 7 ++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/docs/userGuide/components/advanced.md b/docs/userGuide/components/advanced.md index f4fbe22187..6a994317a4 100644 --- a/docs/userGuide/components/advanced.md +++ b/docs/userGuide/components/advanced.md @@ -90,6 +90,10 @@ Slot name | Default class header
    `title`
    (deprecated)     | `popover-header` content | `popover-body` +**Dropdown Slot Options:** +Slot name | +--- | +header | ### Inserting custom classes into components diff --git a/docs/userGuide/syntax/dropdowns.mbdf b/docs/userGuide/syntax/dropdowns.mbdf index 46d3f7372f..3d317a49e0 100644 --- a/docs/userGuide/syntax/dropdowns.mbdf +++ b/docs/userGuide/syntax/dropdowns.mbdf @@ -6,7 +6,8 @@ ```html - + +
  • Action
  • Another action
  • Something else here
    • @@ -28,7 +29,7 @@     - +
  • Action
  • Another action
  • Something else here
    • @@ -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
    text
    (deprecated)     | `String` | `''` | Dropdown button header text. +header
    text
    (deprecated)     | `String` | `''` | Dropdown button header text. (Supports inline MarkDown syntax) type | `String` | `default` | Supports: `default`, `primary`, `danger`, `info`, `warning`, `success`.
    From f791ee588a3fbea1b44aa22ba521eb29d2a16c89 Mon Sep 17 00:00:00 2001 From: Tan Yuanhong Date: Sun, 16 Feb 2020 16:11:58 +0800 Subject: [PATCH 5/7] Update tests * testing edge cases on parsing header/text attr of Dropdown component --- test/unit/parsers/componentParser.test.js | 20 +++++++++ test/unit/utils/componentParserData.js | 54 +++++++++++++++++++++++ 2 files changed, 74 insertions(+) diff --git a/test/unit/parsers/componentParser.test.js b/test/unit/parsers/componentParser.test.js index 8ba8473357..7f8041e94b 100644 --- a/test/unit/parsers/componentParser.test.js +++ b/test/unit/parsers/componentParser.test.js @@ -93,3 +93,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); +}); diff --git a/test/unit/utils/componentParserData.js b/test/unit/utils/componentParserData.js index b17eb7912f..69b096d65c 100644 --- a/test/unit/utils/componentParserData.js +++ b/test/unit/utils/componentParserData.js @@ -251,4 +251,58 @@ module.exports.PARSE_BOX_ICON_EXPECTED = ` `; +/** + * Dropdowns + */ + +module.exports.PARSE_DROPDOWN_HEADER_EXPECTED = ` + + Header attribute should be inserted as internal _header slot and deleted. + +`; + +module.exports.PARSE_DROPDOWN_HEADER = ` + + Header attribute should be inserted as internal _header slot and deleted. + +`; + +module.exports.PARSE_DROPDOWN_TEXT_ATTR_EXPECTED = ` + + Text attribute should be inserted as internal _header slot and deleted. + +`; + +module.exports.PARSE_DROPDOWN_TEXT_ATTR = ` + + Text attribute should be inserted as internal _header slot and deleted. + +`; + +module.exports.PARSE_DROPDOWN_HEADER_SHADOWS_TEXT_EXPECTED = ` + + Header attribute should be inserted as internal _header slot and deleted. Text attribute should be ignored. + +`; + +module.exports.PARSE_DROPDOWN_HEADER_SHADOWS_TEXT = ` + + Header attribute should be inserted as internal _header slot and deleted. Text attribute should be ignored. + +`; + +module.exports.PARSE_DROPDOWN_HEADER_SLOT_TAKES_PRIORITY_EXPECTED = ` + + slot text + Header attribute should be ignored and deleted while header slot is reserved. + +`; + +module.exports.PARSE_DROPDOWN_HEADER_SLOT_TAKES_PRIORITY = ` + + slot text + Header attribute should be ignored and deleted while header slot is reserved. + +`; + /* eslint-enable max-len */ From 443ffd160c2c745f289f5be218319a1a2c590942 Mon Sep 17 00:00:00 2001 From: Tan Yuanhong Date: Sun, 16 Feb 2020 18:20:03 +0800 Subject: [PATCH 6/7] Minor changes --- .../markbind/src/parsers/componentParser.js | 4 +++ test/unit/utils/componentParserData.js | 34 +++++++++++-------- 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src/lib/markbind/src/parsers/componentParser.js b/src/lib/markbind/src/parsers/componentParser.js index 53ca9241e9..961de368a6 100644 --- a/src/lib/markbind/src/parsers/componentParser.js +++ b/src/lib/markbind/src/parsers/componentParser.js @@ -193,13 +193,17 @@ function _parseDropdownAttributes(element) { // If header slot is present, the header attribute has no effect, and we can simply remove it. if (hasHeaderSlot) { 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'); + delete el.attribs.text; } else { + // TODO deprecate text attribute of dropdown _parseAttributeWithoutOverride(element, 'text', true, '_header'); } } diff --git a/test/unit/utils/componentParserData.js b/test/unit/utils/componentParserData.js index 69b096d65c..b19a63701d 100644 --- a/test/unit/utils/componentParserData.js +++ b/test/unit/utils/componentParserData.js @@ -255,51 +255,55 @@ module.exports.PARSE_BOX_ICON_EXPECTED = ` * Dropdowns */ -module.exports.PARSE_DROPDOWN_HEADER_EXPECTED = ` - - Header attribute should be inserted as internal _header slot and deleted. - -`; - module.exports.PARSE_DROPDOWN_HEADER = ` Header attribute should be inserted as internal _header slot and deleted. `; -module.exports.PARSE_DROPDOWN_TEXT_ATTR_EXPECTED = ` +module.exports.PARSE_DROPDOWN_HEADER_EXPECTED = ` - Text attribute should be inserted as internal _header slot and deleted. + Header attribute should be inserted as internal _header slot and deleted. `; +// TODO deprecate text attribute of dropdown module.exports.PARSE_DROPDOWN_TEXT_ATTR = ` Text attribute should be inserted as internal _header slot and deleted. `; -module.exports.PARSE_DROPDOWN_HEADER_SHADOWS_TEXT_EXPECTED = ` - - Header attribute should be inserted as internal _header slot and deleted. Text attribute should be ignored. +// TODO deprecate text attribute of dropdown +module.exports.PARSE_DROPDOWN_TEXT_ATTR_EXPECTED = ` + + Text attribute should be inserted as internal _header slot and deleted. `; +// TODO deprecate text attribute of dropdown module.exports.PARSE_DROPDOWN_HEADER_SHADOWS_TEXT = ` Header attribute should be inserted as internal _header slot and deleted. Text attribute should be ignored. `; -module.exports.PARSE_DROPDOWN_HEADER_SLOT_TAKES_PRIORITY_EXPECTED = ` - +// TODO deprecate text attribute of dropdown +module.exports.PARSE_DROPDOWN_HEADER_SHADOWS_TEXT_EXPECTED = ` + + Header attribute should be inserted as internal _header slot and deleted. Text attribute should be ignored. + +`; + +module.exports.PARSE_DROPDOWN_HEADER_SLOT_TAKES_PRIORITY = ` + slot text Header attribute should be ignored and deleted while header slot is reserved. `; -module.exports.PARSE_DROPDOWN_HEADER_SLOT_TAKES_PRIORITY = ` - +module.exports.PARSE_DROPDOWN_HEADER_SLOT_TAKES_PRIORITY_EXPECTED = ` + slot text Header attribute should be ignored and deleted while header slot is reserved. From d068c87950da095f40f7af21ca99f46a6a9f14ee Mon Sep 17 00:00:00 2001 From: Tan Yuanhong Date: Sat, 22 Feb 2020 10:46:59 +0800 Subject: [PATCH 7/7] Update doc --- docs/userGuide/components/advanced.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/userGuide/components/advanced.md b/docs/userGuide/components/advanced.md index 6a994317a4..7843509881 100644 --- a/docs/userGuide/components/advanced.md +++ b/docs/userGuide/components/advanced.md @@ -91,9 +91,9 @@ header
    `title`
    (de content | `popover-body` **Dropdown Slot Options:** -Slot name | ---- | -header | +Slot name | Default class +--- | --- +header | `dropdown-toggle` ### Inserting custom classes into components