Skip to content

Commit

Permalink
Share docs between compound component of the same parent (#3434)
Browse files Browse the repository at this point in the history 
* 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 <[email protected]>
  • Loading branch information
@ethanshar @Inbal-Tish
ethanshar and Inbal-Tish authored Dec 4, 2024
1 parent 848d8cf commit b29302e
Show file tree
Hide file tree
Showing 4 changed files with 184 additions and 12 deletions.
4 changes: 1 addition & 3 deletions docuilib/src/components/ComponentPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
};

Expand Down
6 changes: 5 additions & 1 deletion scripts/docs/buildDocsCommon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
9 changes: 2 additions & 7 deletions src/components/tabController/apis/tabBar.api.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,9 +105,7 @@
"description": "The component test id"
}
],
"snippet": [
"<TabController.TabBar activeBackgroundColor={Colors.blue30$1}/>"
],
"snippet": ["<TabController.TabBar activeBackgroundColor={Colors.blue30$1}/>"],
"docs": {
"hero": {
"title": "TabController.TabBar",
Expand Down Expand Up @@ -159,10 +157,7 @@
},
{
"type": "table",
"columns": [
"Property",
"Component"
],
"columns": ["Property", "Component"],
"items": [
{
"title": "Counter Badge",
Expand Down
177 changes: 176 additions & 1 deletion src/components/tabController/apis/tabController.api.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,5 +36,180 @@
" <TabController.TabPage index={2} lazy>{renderThirdPage()}</TabController.TabPage>",
" </View>",
"</TabController>"
]
],
"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"
}
]
}
]
}
]
}
}

0 comments on commit b29302e

Please sign in to comment.