fix(segment-content): usage & common API sections

Tanner Reits · Tanner Reits · commit caa10464aed4 · 2024-11-04T10:35:07.000-05:00
diff --git a/docs/api/segment-content.md b/docs/api/segment-content.md
@@ -2,6 +2,13 @@
 title: "ion-segment-content"
 ---
 
+import Props from '@ionic-internal/component-api/v8/segment-content/props.md';
+import Events from '@ionic-internal/component-api/v8/segment-content/events.md';
+import Methods from '@ionic-internal/component-api/v8/segment-content/methods.md';
+import Parts from '@ionic-internal/component-api/v8/segment-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/segment-content/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/segment-content/slots.md';
+
 <head>
   <title>ion-segment-content: Display control element for swipeable segments</title>
   <meta name="description" content="ion-segment-contents are wrapper elements used to control the display of child elements when using swipeable segments." />
@@ -13,4 +20,33 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Segment content is a wrapper element used to control the display of child elements when using swipeable segments. Segment content elements are children of a single
 [segment view](./segment-view.md) instance that is linked to a [segment](./segment.md). See our [swipeable segments](./segment.md#swipeable-segments) documentation
-for more information on how to use `ion-segment-content`s.
+for more information on how to use segment contents.
+
+## Usage
+
+Each `ion-segment-content` needs a unique `id` attribute. This will be used to link the segment content to a segment button via the button's
+[contentId property](./segment-button.md#properties).
+
+<!-- Reuse swipeable segments playground -->
+
+import Swipeable from '@site/static/usage/v8/segment/swipeable/index.md';
+
+<Swipeable />
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
diff --git a/docs/api/segment-view.md b/docs/api/segment-view.md
@@ -4,6 +4,10 @@ title: "ion-segment-view"
 
 import Props from '@ionic-internal/component-api/v8/segment-view/props.md';
 import Events from '@ionic-internal/component-api/v8/segment-view/events.md';
+import Methods from '@ionic-internal/component-api/v8/segment-view/methods.md';
+import Parts from '@ionic-internal/component-api/v8/segment-view/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/segment-view/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/segment-view/slots.md';
 
 <head>
   <title>ion-segment-view: Controller element for swipeable segments</title>
@@ -15,12 +19,22 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 Segment view is a wrapper element that links a group of [segment contents](./segment-content.md) to a [segment](./segment.md) when using swipeable segments.
-See our [swipeable segments](./segment.md#swipeable-segments) documentation for more information on how to use `ion-segment-view`s.
+See our [swipeable segments](./segment.md#swipeable-segments) documentation for more information on how to use segment views.
 
 ## Properties
-
 <Props />
 
 ## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
 
-<Events />
+## Slots
+<Slots />
diff --git a/docs/api/segment.md b/docs/api/segment.md
@@ -55,9 +55,11 @@ Each [segment button](./segment-button.md) can be associated with a [segment con
 when the segment is active. With this approach, each segment's content can be swiped or scrolled between and the segment will be updated
 to reflect the currently visible content.
 
-If no initial `value` is assigned to the `ion-segment` when using swipeable segment, the segment will default to the value of the first segment button.
+:::warning
+If no initial `value` is assigned to the `ion-segment` when using swipeable segments, the segment will default to the value of the first segment button.
 
 Segment buttons cannot be disabled when used with swipeable segments.
+:::
 
 import Swipeable from '@site/static/usage/v8/segment/swipeable/index.md';
 
