chore(tabs): docs page (VIV-2108) #2038
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #2038 +/- ##
===========================================
Coverage 100.00% 100.00%
===========================================
Files 123 367 +244
Lines 1562 8475 +6913
Branches 108 1260 +1152
===========================================
+ Hits 1562 8475 +6913
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
|
|
||
| ```html preview full | ||
| <vwc-tabs> | ||
| <vwc-tab shape="rounded" label="Rounded"></vwc-tab> |
There was a problem hiding this comment.
I'm not so sure about having them together in the same tabs wrapper. Its a bad practice that we do not want them to use. Having said that- it is useless to have 2 sets of tabs.
Maybe we can use a drop down that changes the shape?
Or a code sample with no preview and an image to illustrate the difference.
There was a problem hiding this comment.
I've added a note after the example to say how they shouldn't be used together.
|
|
||
| ## Gutters | ||
|
|
||
| Use the `gutters` attribute on the **Tabs** component to control the spacing inside the Tab Panels. Below it is set to `none`. |
There was a problem hiding this comment.
gutters can have either none or small (that are the default). I think that this is not clear enough here
|
|
||
| ```js | ||
| <script type="module">import '@vonage/vivid/tabs';</script> |
There was a problem hiding this comment.
theres an unneeded space here:
There was a problem hiding this comment.
Doesn't seem to be much we can do about this. Happens in other places too.
| | -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | | ||
| | **activeid** | `string` | Match with an `id` set on a Tab to mark it as active on initial load | | ||
| | **connotation** | `accent` (default), `cta` | Sets the connotation color of the active tab | | ||
| | **gutters** | `none` (default), `small` | Sets the spacing inside the Tab Panels | |
There was a problem hiding this comment.
| | **gutters** | `none` (default), `small` | Sets the spacing inside the Tab Panels | | |
| | **gutters** | `none`, `small` (default) | Sets the spacing inside the Tab Panels | |
| | Name | Type | Description | | ||
| | ----------------- | ---------------------------- | ------------------------------------ | | ||
| | **disabled** | `boolean` | Sets the disabled state | | ||
| | **icon-trailing** | `boolean` | Places the icon after the label text | |
No description provided.