From b29302e0052b77feaa7ad6a45eccca06ca21144b Mon Sep 17 00:00:00 2001 From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com> Date: Wed, 4 Dec 2024 15:48:25 +0200 Subject: [PATCH] Share docs between compound component of the same parent (#3434) * Share docs between compound component of the same parent * fix: remove TODO comment for hero image alignment and add null check for parent component docs * update TabController and TabBar documentation * refactor: remove unused getParentComponent function and related logic * refactor: remove commented-out code for hero name in ComponentPage * Update docuilib/src/components/ComponentPage.tsx remove comment --------- Co-authored-by: Inbal Tish <33805983+Inbal-Tish@users.noreply.github.com> --- docuilib/src/components/ComponentPage.tsx | 4 +- scripts/docs/buildDocsCommon.js | 6 +- .../tabController/apis/tabBar.api.json | 9 +- .../tabController/apis/tabController.api.json | 177 +++++++++++++++++- 4 files changed, 184 insertions(+), 12 deletions(-) diff --git a/docuilib/src/components/ComponentPage.tsx b/docuilib/src/components/ComponentPage.tsx index e2076dfb0f..b422c263f7 100644 --- a/docuilib/src/components/ComponentPage.tsx +++ b/docuilib/src/components/ComponentPage.tsx @@ -73,12 +73,10 @@ export default function ComponentPage({component}) { const hero = component.docs?.hero; if (hero) { - // TODO: align hero's image to page title - // const name = component.category === 'incubator' ? `Incubator.${component.name}` : component.name; const section = { - // title: name, layout: 'horizontal', ...hero, + title: component.name, type: 'hero' }; diff --git a/scripts/docs/buildDocsCommon.js b/scripts/docs/buildDocsCommon.js index c38ebc07fd..2fefc04288 100644 --- a/scripts/docs/buildDocsCommon.js +++ b/scripts/docs/buildDocsCommon.js @@ -49,9 +49,13 @@ function resetDocsDir() { fs.mkdirSync(COMPONENTS_DOCS_DIR, {recursive: true}); } +function isCompoundComponent(componentName) { + return componentName.includes('.'); +} + function processComponents(components) { /** Break into compound components (TabController.TabPage) and parent components (TabController) */ - const compoundComponents = components.filter(c => c.name.includes('.')); + const compoundComponents = components.filter(c => isCompoundComponent(c.name)); const parentComponents = _.flow(components => _.map(components, c => c.name.split('.')[0]), _.uniq)(compoundComponents); diff --git a/src/components/tabController/apis/tabBar.api.json b/src/components/tabController/apis/tabBar.api.json index df2d98a9b7..812b65e47b 100644 --- a/src/components/tabController/apis/tabBar.api.json +++ b/src/components/tabController/apis/tabBar.api.json @@ -105,9 +105,7 @@ "description": "The component test id" } ], - "snippet": [ - "" - ], + "snippet": [""], "docs": { "hero": { "title": "TabController.TabBar", @@ -159,10 +157,7 @@ }, { "type": "table", - "columns": [ - "Property", - "Component" - ], + "columns": ["Property", "Component"], "items": [ { "title": "Counter Badge", diff --git a/src/components/tabController/apis/tabController.api.json b/src/components/tabController/apis/tabController.api.json index be75d17c75..17f0c9f8cd 100644 --- a/src/components/tabController/apis/tabController.api.json +++ b/src/components/tabController/apis/tabController.api.json @@ -36,5 +36,180 @@ " {renderThirdPage()}", " ", "" - ] + ], + "docs": { + "hero": { + "title": "TabController", + "description": "Tabs organize and navigate between related content groups at the same hierarchy level, helping users easily find different information types.\n\nA Tab Bar can start with 2 tabs and accommodate more, with horizontal scrolling if the tabs exceed the screen width.", + "type": "hero", + "layout": "horizontal", + "content": [ + { + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_preview.png" + } + ] + }, + "tabs": [ + { + "title": "Overview", + "sections": [ + { + "type": "list", + "items": [ + { + "title": "Tabs Layout", + "description": "Fixed tabs usually have 2-3 tabs that fit on the screen without scrolling.\nWhen the total size of the tabs exceeds the screen width (usually more than 3 tabs), a horizontal scroll is implemented.\n\nWhen scrolling through tabs, add an overlay to indicate more tabs are available off-screen. The overlay should disappear once the first or last tab is reached. It should be the top layer, covering all tab elements, including the indicator and badge.", + "content": [ + { + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_behaviour.png" + } + ] + } + ], + "title": "Behaviour", + "description": "TabBar behavior and style are identical in both iOS and Android. ", + "layout": "horizontal" + }, + { + "type": "list", + "items": [ + { + "title": "", + "description": "**Inactive Tab**\nText: BodySmall $textDefault\nBackground: $backgroundElevated \n\n**Active Tab**\nText: BodySmallBold $textPrimary\nBackground: $backgroundElevated\nIndicator: $outlinePrimary \n\n**Shadow**\nsh10\n\n**Dark Skin**\nText: BodySmall, System White\nBackground: System Grey10\nDivider: System Grey20", + "content": [ + { + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_styling.png" + } + ] + } + ], + "layout": "horizontal", + "title": "Styling" + }, + { + "type": "table", + "columns": ["Property", "Component"], + "items": [ + { + "title": "Counter Badge", + "description": "A Counter Badge can be added to indicate the amount of activity within the tab.", + "content": [ + { + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_accessories_badge.png" + } + ] + }, + { + "title": "Pimple Badge ", + "description": "A Pimple Badge can be added to a tab to draw the user's attention to activity within it.", + "content": [ + { + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_accessories_pimple.png" + } + ] + }, + { + "title": "Action Icon", + "description": "Admins can add and edit tabs using an action button that can be added after the last tab.", + "content": [ + { + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_accessories_action.png" + } + ] + } + ], + "title": "Accessories" + }, + { + "type": "list", + "items": [ + { + "title": "Indicator", + "description": "Indicator width: cell width minus S5 padding.\nIndicator height: 2px\nIndicator coloring: $outlinePrimary", + "content": [ + { + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_spec1.png" + } + ] + }, + { + "title": "Badge Component", + "content": [ + { + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_spec2.png" + } + ] + } + ], + "title": "Spec", + "layout": "horizontal" + }, + { + "type": "list", + "items": [ + { + "title": "TabBar width", + "description": "The TabBar width is full width but the tabs container is aligned with the content.", + "content": [ + { + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_tablet1.png" + } + ] + }, + { + "title": "Scrollable TabBar", + "description": "If the sum of elements is larger than screen width (usually when there’s more than 6 tabs), indicator gets the label Width.\n\nTab cell minimum width: 70px\nLabel minimum padding: S7 (28px)", + "content": [ + { + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_tablet2.png" + } + ] + }, + { + "title": "Fixed TabBar", + "description": "Up to 6 tabs can typically fit within the screen width without scrolling.\nThe indicator gets the cell width with 20px padding", + "content": [ + { + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_tablet3.png" + } + ] + } + ], + "layout": "vertical", + "title": "Tablet" + } + ] + }, + { + "title": "UX Guidelines", + "sections": [ + { + "type": "list", + "items": [ + { + "title": "Tab Content", + "description": "Tab text is stretched to fill the tab without line breaks or ellipses.", + "content": [ + { + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_UX_dosdonts.png" + } + ] + } + ], + "title": "Do’s & Don'ts" + }, + { + "type": "section", + "title": "Optical Spacing", + "description": "To create visual alignment across tabs with different content, create an optical space of 28pt from the TabBar to the content. Actual component spacing is rounded to the nearest spacing preset. For example, the screen heading is placed at 28pt distance from the TabBar, but the actual text container is placed at 20px distance (S5).", + "content": [ + { + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_UX_opticalSpacing.png" + } + ] + } + ] + } + ] + } }