chore(docs): december update (VIV-000) (#2077)

chore: docs december update
Vonage · Jan 9, 2025 · a118ef7 · a118ef7
1 parent 068218f
commit a118ef7
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 39 deletions.
diff --git a/apps/docs/content/guides/styles.md b/apps/docs/content/guides/styles.md
@@ -28,20 +28,18 @@ Which stylesheets you should load will depend on your project's needs.
 - [Spezia Font Kit](#spezia-font-kit)
 - [Vivid 2.x Compatibility](#vivid-2x-compatibility)
 
-## Loading Styles
+<vwc-note headline="Loading Styles" connotation="information" icon="info-line">
 
-How to load styles will depend on your project's setup. You can find more guidance in the Getting Started guides.
+How to load styles will depend on your project's setup. You can find more guidance in the [Getting Started guides](/getting-started/web-components/#importing-the-styles-and-fonts).
 
-## List of Stylesheets
+</vwc-note>
 
-### Design Tokens
+## Design Tokens Stylesheet
 
 <vwc-tabs gutters="none">
 <vwc-tab id="light" label="Light Theme"></vwc-tab>
 <vwc-tab-panel>
 
-**Stylesheet:**
-
 ```js
 '@vonage/vivid/styles/tokens/theme-light.css';
 ```
@@ -50,8 +48,6 @@ How to load styles will depend on your project's setup. You can find more guidan
 <vwc-tab id="dark" label="Dark Theme"></vwc-tab>
 <vwc-tab-panel>
 
-**Stylesheet:**
-
 ```js
 '@vonage/vivid/styles/tokens/theme-dark.css';
 ```
@@ -63,23 +59,19 @@ This stylesheet contains all the **design tokens** used by Vivid components. It
 
 The tokens will be scoped to the `vvd-root` class selector.
 
-### Core Theme
-
-**Stylesheet:**
+## Core Theme Stylesheet
 
 ```js
 '@vonage/vivid/styles/core/theme.css';
 ```
 
 The core theme styles will apply the appropriate `color`, `background-color` and `color-scheme` for the chosen theme to the `vvd-root` class selector.
 
-#### Scrollbar
+### Scrollbar
 
 Vivid component has a custom scrollbar. It can be added to the entire app/page by adding the class `vvd-scrollbar` to `:root.`
 
-### Core Typography
-
-**Stylesheet:**
+## Core Typography Stylesheet
 
 ```js
 '@vonage/vivid/styles/core/typography.css';
@@ -93,19 +85,15 @@ Additionally, if the `vvd-root` class is applied to the `<html>` element, it wil
 
 The styles are scoped to the `vvd-root` class selector.
 
-### Core All
-
-**Stylesheet:**
+## Core All Stylesheet
 
 ```js
 '@vonage/vivid/styles/core/all.css';
 ```
 
 This stylesheet contains both the [core theme](#core-theme) and [core typography](#core-typography) stylesheets.
 
-### Spezia Font Kit
-
-**Stylesheet:**
+### Spezia Font Kit Stylesheet
 
 ```js
 '@vonage/styles/fonts/spezia-variable.css';
@@ -136,9 +124,7 @@ To avoid FOIT (Flash Of Invisible Text), you can also preload the fonts in your
 </head>
 ```
 
-### Vivid 2.x Compatibility
-
-**Stylesheet:**
+## Vivid 2.x Compatibility Stylesheet
 
 ```js
 '@vonage/vivid/styles/tokens/vivid-2-compat.css';

diff --git a/apps/docs/content/whats-new/monthly-updates/december-2024.md b/apps/docs/content/whats-new/monthly-updates/december-2024.md
@@ -0,0 +1,18 @@
+---
+title: December 2024
+month: 2024-12
+---
+
+# December 2024 - Monthly Update
+
+## Scrollbar Styles
+
+We have updated our scrollbars styles, in our components and globally (by adding a [class to the root element](/guides/styles/#scrollbar)), so that they are more visually appealling and consistent across browsers.
+
+## File Picker: Custom Internal Error Messages
+
+We have introduced props to override the internal error messages that are generated by file picker. For example when a [selected file size is too big](components/file-picker/#max-file-size) or when a user selects more than the [maximum number of files](/components/file-picker/#max-files).
+
+## Tabs: Adds Tab Layout Attribute
+
+- The [`tabs-layout` attribute](/components/tabs/#tabs-layout) controls the tabs layout. When set to stretch, the tabs will stretch to fill the available space.
diff --git a/libs/components/src/lib/tabs/VARIATIONS.md b/libs/components/src/lib/tabs/VARIATIONS.md
@@ -182,6 +182,21 @@ Use the `gutters` attribute on the **Tabs** component to control the spacing ins
 </vwc-tabs>
 ```
 
+## Tabs Layout
+
+The `tabs-layout` attribute on the **Tabs** component controls the tabs layout. When set to `stretch`, the tabs will stretch to fill the available space. It will have no effect when the tabs are in a vertical orientation.
+
+```html preview full
+<vwc-tabs tabs-layout="stretch">
+	<vwc-tab label="Tab one"></vwc-tab>
+	<vwc-tab label="Tab two"></vwc-tab>
+	<vwc-tab label="Tab three"></vwc-tab>
+	<vwc-tab-panel>Tab Panel one</vwc-tab-panel>
+	<vwc-tab-panel>Tab Panel two</vwc-tab-panel>
+	<vwc-tab-panel>Tab Panel three</vwc-tab-panel>
+</vwc-tabs>
+```
+
 ## Scrollable Panel
 
 Use the `scrollable-panel` attribute combined with setting a `block-size` style to the **Tabs** component to make the content scrollable.
@@ -249,18 +264,3 @@ Use the `scrollable-panel` attribute combined with setting a `block-size` style
 	}
 </style>
 ```
-
-## Tabs Layout
-
-The `tabs-layout` attribute on the **Tabs** component controls the tabs layout. When set to `stretch`, the tabs will stretch to fill the available space. It will have no effect when the tabs are in a vertical orientation.
-
-```html preview full
-<vwc-tabs tabs-layout="stretch">
-	<vwc-tab label="Tab one"></vwc-tab>
-	<vwc-tab label="Tab two"></vwc-tab>
-	<vwc-tab label="Tab three"></vwc-tab>
-	<vwc-tab-panel>Tab Panel one</vwc-tab-panel>
-	<vwc-tab-panel>Tab Panel two</vwc-tab-panel>
-	<vwc-tab-panel>Tab Panel three</vwc-tab-panel>
-</vwc-tabs>
-```