diff --git a/en/components/badge.md b/en/components/badge.md
index 319abcc34..ee15af22f 100644
--- a/en/components/badge.md
+++ b/en/components/badge.md
@@ -118,6 +118,20 @@ We can change the badge shape through the `shape` attribute setting its value to
If everything's done right, you should see the demo sample shown above in your browser.
+### Badge Size
+
+The size of the badge can be controlled using the `--size` variable. It will make sure that the badge sizes proportionally in both directions. Keep in mind, however, that badges containing text values use the `caption` typography style for its font-size and line-height. For that reason, when setting the `--size` of a badge containing text to values below 16px, you will also need to modify its typography.
+
+Example:
+```scss
+igx-badge {
+ --size: 12px;
+
+ font-size: calc(var(--size) / 2);
+ line-height: normal;
+}
+```
+
### Badge Icon
In addition to material icons, the `igx-badge` component also supports usage of [Material Icons Extended](../components/material-icons-extended.md) and any other custom icon set. To add an icon from the material icons extended set inside your badge component, first you have to register it:
diff --git a/en/components/carousel.md b/en/components/carousel.md
index b416e814b..1168bb471 100644
--- a/en/components/carousel.md
+++ b/en/components/carousel.md
@@ -121,19 +121,7 @@ export class HomeComponent {
By default, the Carousel in Angular has its **[`loop`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#loop)** input property set to `true` ( *looping occurs when the first slide comes after the last by navigating using the Next action, or when the last slide comes after the first by using the Previous action* ). The looping behavior can be disabled by setting the value of the `loop` input to `false`.
-To keep track of each slide index, the carousel has indicators that are positioned at the `bottom` of the carousel by default. In order to change this behavior, we have to use the [indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) property and assign it to `top`. Indicators can be disabled by adding an empty template.
-
-The carousel template may look like this:
-
-```html
-
-
- ...
-
-
-
-
-```
+To keep track of each slide index, the carousel has indicators that are positioned at the `bottom` of the carousel by default. In order to change this behavior, we have to use the [indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) property and assign it to `top`. Indicators can be disabled by setting the `indicators` input property to `false`.
### Custom indicators
@@ -279,12 +267,13 @@ The carousel [animations](carousel.md#angular-carousel-animations) are fully sup
### Keyboard navigation
-* To navigate to the **next**/**previous** slide, you have to use, respectfully:
- * `Arrow Right` key for the next slide
- * `Arrow Left` key for the previous slide
-* To navigate to the **end**/**start** slide you have to use, respectfully:
- * `End` key for the end slide
- * `Home` key for the start slide
+* Navigation buttons
+ * `Space`/`Enter` key - navigates to the next/previous slide.
+* Indicators
+ * `Arrow Left` key - navigates to the previous (next in Right-to-Left mode) slide.
+ * `Arrow Right` key - navigates to the next (previous in Right-to-Left mode) slide.
+ * `Home` key - navigates to the first (last in Right-to-Left mode) slide.
+ * `End` key - navigates to the last (first in Right-to-Left mode) slide.
### Automatic transitioning
@@ -312,14 +301,10 @@ Our carousel will look like this in the template:
```html
...
-
-
-
-
-
-
-
-
+
+
+
+
...
diff --git a/en/components/combo.md b/en/components/combo.md
index 251b821a5..4a10851ae 100644
--- a/en/components/combo.md
+++ b/en/components/combo.md
@@ -231,7 +231,7 @@ By default, the combo control provides multiple selection. The snippet below dem
```typescript
public singleSelection(event: IComboSelectionChangeEventArgs) {
if (event.added.length) {
- event.newSelection = event.added;
+ event.newValue = event.added;
}
}
```
diff --git a/en/components/snackbar.md b/en/components/snackbar.md
index 387ceba8a..d97a77aa8 100644
--- a/en/components/snackbar.md
+++ b/en/components/snackbar.md
@@ -254,29 +254,28 @@ public restore() {
iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-4" >
-### Overlay Settings
-The [`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) uses [Overlay Settings]({environment:angularApiUrl}/interfaces/overlaysettings.html) to control the position of its container. The default settings can be changed by defining Custom OverlaySettings and passing them to the snackbar `open()` method:
+### Positioning
+Use [`positionSettings`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#positionSettings) property to configure where the snackbar appears. By default, it is displayed at the bottom of the page. In the sample below, we set notification to appear at the top position.
-```typescript
-public customSettings: OverlaySettings = {
- positionStrategy: new GlobalPositionStrategy(
- {
- horizontalDirection: HorizontalAlignment.Left,
- verticalDirection: VerticalAlignment.Top
- }),
- modal: true,
- closeOnOutsideClick: true,
-};
-
-snackbar.open(customSettings);
+```html
+
+
+Notification displayed
```
-Users can also provide a specific outlet where the snackbar will be placed in the DOM when it is visible:
-
-```html
-
-
+```typescript
+// sample.component.ts
+import { VerticalAlignment, HorizontalAlignment } from 'igniteui-angular';
+// import { VerticalAlignment, HorizontalAlignment } from '@infragistics/igniteui-angular'; for licensed package
+...
+public open(snackbar) {
+ snackbar.positionSettings.verticalDirection = VerticalAlignment.Top;
+ snackbar.positionSettings.horizontalDirection = HorizontalAlignment.Right;
+ snackbar.open();
+}
+...
```
+
## Styling
To get started with styling the snackbar, we need to import the index file, where all the theme functions and component mixins live:
diff --git a/en/components/toast.md b/en/components/toast.md
index a1fb181e6..6b3c94eda 100644
--- a/en/components/toast.md
+++ b/en/components/toast.md
@@ -110,9 +110,6 @@ public showMessage() {
}
```
-> [!WARNING]
-> The igx-toast component `show` and `hide` methods have been deprecated. `open` and `close` should be used instead.
-
## Examples
### Hide/Auto Hide
@@ -178,30 +175,6 @@ public open(toast) {
iframe-src="{environment:demosBaseUrl}/notifications/toast-sample-5" >
-### Overlay Settings
-The [`IgxToastComponent`]({environment:angularApiUrl}/classes/igxtoastcomponent.html) uses [Overlay Settings]({environment:angularApiUrl}/interfaces/overlaysettings.html) to control the position of its container. The default settings can be changed by defining Custom OverlaySettings and passing them to the toast `open()` method:
-
-```typescript
-public customSettings: OverlaySettings = {
- positionStrategy: new GlobalPositionStrategy(
- {
- horizontalDirection: HorizontalAlignment.Left,
- verticalDirection: VerticalAlignment.Top
- }),
- modal: true,
- closeOnOutsideClick: true,
-};
-
-toast.open(customSettings);
-```
-
-Users can also provide a specific outlet where the toast will be placed in the DOM when it is visible:
-
-```html
-
-
-```
-
## Styling
@@ -215,7 +188,7 @@ To get started with styling the toast, we need to import the index file, where a
// @import '~igniteui-angular/lib/core/styles/themes/index';
```
-Following the simplest approach, we create a new theme that extends the [`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) and accepts the `$shadow`, `$background`, `$text-color` and the `$border-radius` parameters.
+Following the simplest approach, we create a new theme that extends the [`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) and accepts the `$background`, `$text-color` and `$border-radius` parameters.
```scss
$custom-toast-theme: toast-theme(
diff --git a/jp/components/carousel.md b/jp/components/carousel.md
index 028a55d18..4e08f374b 100644
--- a/jp/components/carousel.md
+++ b/jp/components/carousel.md
@@ -122,19 +122,7 @@ export class HomeComponent {
デフォルトでは、Angular のカルーセルの **[`loop`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#loop)** 入力プロパティは `true` に設定されています (ループは、Next 動作でナビゲートするときに最初のスライドが最後のスライドの後に来るか、Previous 動作を使用して最後のスライドが最初のスライドの後に来るときに起こります)。ループ動作を無効にするには、`loop` 入力の値を `false` に設定します。
-各スライド インデックスを追跡するために、カルーセルには、デフォルトでカルーセルの `bottom` に配置されるインジケーターがあります。この動作を変更するには、[indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) プロパティを使用して、`top` に割り当てる必要があります。空のテンプレートを追加すると、インジケーターを無効にできます。
-
-カルーセル テンプレートは以下のようになります。
-
-```html
-