fix(swatch,swatchgroup,table,tabs): remove autodocs tag after rebase

Author: marissahuysentruyt

components/swatch/stories/swatch.stories.js

@@ -162,7 +162,7 @@ Default.args = {};
  * The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
  */
 export const Sizing = SizingGroup.bind({});
-Sizing.tags = ["autodocs", "!dev"];
+Sizing.tags = ["!dev"];
 Sizing.parameters = {
 	chromatic: { disableSnapshot: true },
 };
@@ -171,13 +171,13 @@ Sizing.parameters = {
  * A swatch in a disabled state shows that the swatch exists, but is not available in that circumstance. Even though swatches can have a disabled state, hide unavailable swatches when possible to reduce visual clutter and ease cognitive load. Only show disabled swatches if hiding them would cause confusion to your users.
  */
 export const Disabled = DisabledGroup.bind({});
-Disabled.tags = ["autodocs", "!dev"];
+Disabled.tags = ["!dev"];
 
 /**
  * Default rounding and full rounding are usually used when a swatch is presented by itself near other components. A rounding of “none” is used in a swatch group to help minimize the Hermann grid illusion that happens at the intersections of white space in the group.
  */
 export const Rounding = RoundingGroup.bind({});
-Rounding.tags = ["autodocs", "!dev"];
+Rounding.tags = ["!dev"];
 Rounding.parameters = {
 	chromatic: { disableSnapshot: true },
 };
@@ -189,15 +189,15 @@ export const Selected = Template.bind({});
 Selected.args = {
 	isSelected: true,
 };
-Selected.tags = ["autodocs", "!dev"];
+Selected.tags = ["!dev"];
 
 /**
  * By default, swatches have a border. However, when swatches are used within a swatch group, there are additional border considerations. 
  * - When color swatches are used in a [swatch group](?path=/docs/components-swatch-group--docs), they typically have the `.spectrum-Swatch--noBorder` class.
  * - When and only when color swatches used in a [swatch group](?path=/docs/components-swatch-group--docs) have low contrast (below 3:1 contrast with the background), those swatches will have a less prominent border compared to the swatch component when used by itself. They individually use the `.spectrum-Swatch--lightBorder` class.
  */
 export const Border = BorderGroup.bind({});
-Border.tags = ["autodocs", "!dev"];
+Border.tags = ["!dev"];
 
 /** 
  * Swatches can have a square or a rectangle shape with an aspect ratio of 2:1. The square shape is the default and is used in swatch groups (e.g., a palette of colors).
@@ -206,11 +206,11 @@ export const Rectangle = Template.bind({});
 Rectangle.args = {
 	isRectangle: true,
 };
-Rectangle.tags = ["autodocs", "!dev"];
+Rectangle.tags = ["!dev"];
 
 export const Nothing = NothingGroup.bind({});
 Nothing.args = {};
-Nothing.tags = ["autodocs", "!dev"];
+Nothing.tags = ["!dev"];
 
 /**
  * When a swatch represents multiple values that are not identical, the preview shows a `gray-50` fill and a dash UI icon.
@@ -220,21 +220,21 @@ MixedValue.args = {
 	isMixedValue: true,
 	swatchColor: "var(--spectrum-gray-50)",
 };
-MixedValue.tags = ["autodocs", "!dev"];
+MixedValue.tags = ["!dev"];
 
 export const Gradient = Template.bind({});
 Gradient.args = {
 	isGradient: true,
 	gradient: "linear-gradient(to right, rgba(0, 0, 0, 88%), rgb(174, 216, 230))",
 };
-Gradient.tags = ["autodocs", "!dev"];
+Gradient.tags = ["!dev"];
 
 export const Image = Template.bind({});
 Image.args = {
 	isImage: true,
 	imageUrl: "example-ava@2x.png",
 };
-Image.tags = ["autodocs", "!dev"];
+Image.tags = ["!dev"];
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = States.bind({});

components/swatchgroup/stories/swatchgroup.stories.js

@@ -129,27 +129,27 @@ export const Compact = Template.bind({});
 Compact.args = {
 	density: "compact",
 };
-Compact.tags = ["autodocs", "!dev"];
+Compact.tags = ["!dev"];
 
 export const Spacious = Template.bind({});
 Spacious.args = {
 	density: "spacious",
 };
-Spacious.tags = ["autodocs", "!dev"];
+Spacious.tags = ["!dev"];
 
 /**
  * Only use rounded swatches if there is a single row.
  */
 export const Rounding = RoundingTemplate.bind({});
 Rounding.args = {};
-Rounding.tags = ["autodocs", "!dev"];
+Rounding.tags = ["!dev"];
 
 /**
  * Use any size swatches as necessary. The medium size is the default option. This only affects the size of each individual swatch, not the spacing between them.
  */
 export const Sizing = SizingTemplate.bind({});
 Sizing.args = {};
-Sizing.tags = ["autodocs", "!dev"];
+Sizing.tags = ["!dev"];
 
 /**
  * Swatches within a swatch group with low contrast (below 3:1 contrast with the background) have a less prominent border compared to the swatch component when used by itself.
@@ -179,7 +179,7 @@ WithLightBorder.args = {
 		{swatchColor: "rgb(254, 71, 144)",},
 	],
 };
-WithLightBorder.tags = ["autodocs", "!dev"];
+WithLightBorder.tags = ["!dev"];
 WithLightBorder.storyName = "With light border";
 
 // ********* VRT ONLY ********* //

components/table/stories/table.stories.js

@@ -183,7 +183,7 @@ Default.args = {};
  * Tables come in four different sizes: small, medium, large, and extra-large. The medium size is the default and recommended option.
  */
 export const Sizing = SizingTemplate.bind({});
-Sizing.tags = ["autodocs", "!dev"];
+Sizing.tags = ["!dev"];
 
 /**
  * The compact variant decreases the spacing used within the table.
@@ -193,7 +193,7 @@ Compact.args = {
 	...Default.args,
 	density: "compact",
 };
-Compact.tags = ["autodocs", "!dev"];
+Compact.tags = ["!dev"];
 
 /**
  * The spacious variant increases the spacing used within the table.
@@ -203,7 +203,7 @@ Spacious.args = {
 	...Default.args,
 	density: "spacious",
 };
-Spacious.tags = ["autodocs", "!dev"];
+Spacious.tags = ["!dev"];
 
 /**
  * The standard multi-select table includes a column of checkboxes used for selecting rows.
@@ -213,7 +213,7 @@ MultiSelect.storyName = "Multi-select";
 MultiSelect.args = {
 	rowItems: ExampleRowItems,
 };
-MultiSelect.tags = ["autodocs", "!dev"];
+MultiSelect.tags = ["!dev"];
 
 /**
  * Excluding the `.spectrum-Table--emphasized` class will change the style of selected rows.
@@ -224,7 +224,7 @@ NonEmphasizedMultiSelect.args = {
 	isEmphasized: false,
 	rowItems: ExampleRowItems,
 };
-NonEmphasizedMultiSelect.tags = ["autodocs", "!dev"];
+NonEmphasizedMultiSelect.tags = ["!dev"];
 
 /**
  * The quiet table has a transparent background and no borders on the left and right.
@@ -234,14 +234,14 @@ Quiet.args = {
 	...Default.args,
 	isQuiet: true,
 };
-Quiet.tags = ["autodocs", "!dev"];
+Quiet.tags = ["!dev"];
 
 export const MultiSelectQuiet = Template.bind({});
 MultiSelectQuiet.args = {
 	...MultiSelect.args,
 	isQuiet: true,
 };
-MultiSelectQuiet.tags = ["autodocs", "!dev"];
+MultiSelectQuiet.tags = ["!dev"];
 
 /**
  * The standard table can display column dividers by including the `.spectrum-Table-cell--divider` class with `.spectrum-Table-cell`. Use sparingly to group related content.
@@ -271,7 +271,7 @@ WithColumnDividers.args = {
 		},
 	],
 };
-WithColumnDividers.tags = ["autodocs", "!dev"];
+WithColumnDividers.tags = ["!dev"];
 
 /**
  * Tables can have a summary row to show totals, at either the top or the bottom of the table. This example shows both the optional summary row, and a row marked as selected.
@@ -298,7 +298,7 @@ SummaryAndSelected.args = {
 		},
 	],
 };
-SummaryAndSelected.tags = ["autodocs", "!dev"];
+SummaryAndSelected.tags = ["!dev"];
 
 /**
  * Tables can style one or more rows as section headers.
@@ -331,14 +331,14 @@ SectionHeader.args = {
 		},
 	],
 };
-SectionHeader.tags = ["autodocs", "!dev"];
+SectionHeader.tags = ["!dev"];
 
 export const SectionHeaderQuiet = Template.bind({});
 SectionHeaderQuiet.args = {
 	...SectionHeader.args,
 	isQuiet: true,
 };
-SectionHeaderQuiet.tags = ["autodocs", "!dev"];
+SectionHeaderQuiet.tags = ["!dev"];
 
 /**
  * 
@@ -379,7 +379,7 @@ Scrollable.args = {
 		},
 	],
 };
-Scrollable.tags = ["autodocs", "!dev"];
+Scrollable.tags = ["!dev"];
 
 /**
  * A table can also be made up of `div` tags if needed, instead of a `<table>`. This example uses both the div markup, and the scrollable wrapper.
@@ -391,7 +391,7 @@ DivsScrollable.args = {
 	useScroller: true,
 	rowItems: ExampleRowItems,
 };
-DivsScrollable.tags = ["autodocs", "!dev"];
+DivsScrollable.tags = ["!dev"];
 
 /**
  * In a table with collapsible rows, all child items must have columns that match the parent items. If they don’t, consider using multiple drill-in tables, [Miller columns](/docs/components-miller-columns--docs), or [breadcrumbs](/docs/components-breadcrumbs--docs) instead.
@@ -455,7 +455,7 @@ Collapsible.args = {
 		},
 	],
 };
-Collapsible.tags = ["autodocs", "!dev"];
+Collapsible.tags = ["!dev"];
 
 export const CollapsibleMultiSelect = Template.bind({});
 CollapsibleMultiSelect.storyName = "Collapsible Multi-select";
@@ -524,7 +524,7 @@ CollapsibleMultiSelect.args = {
 		},
 	],
 };
-CollapsibleMultiSelect.tags = ["autodocs", "!dev"];
+CollapsibleMultiSelect.tags = ["!dev"];
 
 /**
  * Thumbnails can be used in the table content, with some additional markup and classes for alignment.
@@ -551,7 +551,7 @@ Thumbnails.args = {
 		},
 	],
 };
-Thumbnails.tags = ["autodocs", "!dev"];
+Thumbnails.tags = ["!dev"];
 
 /**
  * The thumbnail table variant can also be combined with collapsible rows.
@@ -596,7 +596,7 @@ ThumbnailsCollapsible.args = {
 		},
 	],
 };
-ThumbnailsCollapsible.tags = ["autodocs", "!dev"];
+ThumbnailsCollapsible.tags = ["!dev"];
 
 /**
  * The table body can accept dropped content.
@@ -605,7 +605,7 @@ export const BodyDropzone = BodyTemplate.bind({});
 BodyDropzone.args = {
 	isDropTarget: true,
 };
-BodyDropzone.tags = ["autodocs", "!dev"]; 
+BodyDropzone.tags = ["!dev"]; 
 
 /**
  * In addition to the overall table, individual rows can be designated as a drop target to accept dropped content. Only one dropzone row should show at a time, but this example sets multiple at different parts of the table to test that they all display the same.
@@ -636,14 +636,14 @@ RowDropzone.args = {
 		},
 	],
 };
-RowDropzone.tags = ["autodocs", "!dev"];
+RowDropzone.tags = ["!dev"];
 
 export const RowDropzoneQuiet = Template.bind({});
 RowDropzoneQuiet.args = {
 	...RowDropzone.args,
 	isQuiet: true,
 };
-RowDropzoneQuiet.tags = ["autodocs", "!dev"];
+RowDropzoneQuiet.tags = ["!dev"];
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = Template.bind({});

components/tabs/stories/tabs.stories.js

@@ -167,15 +167,15 @@ export const Vertical = VerticalGroup.bind({});
 Vertical.args = {
 	orientation: "vertical",
 };
-Vertical.tags = ["autodocs", "!dev"];
+Vertical.tags = ["!dev"];
 
 export const VerticalRight = Template.bind({});
 VerticalRight.args = {
 	orientation: "vertical", 
 	hasRightAlignedTabs: true,
 };
 VerticalRight.storyName = "Vertical right";
-VerticalRight.tags = ["autodocs", "!dev"];
+VerticalRight.tags = ["!dev"];
 
 /**
  * When there are too many tabs to fit horizontally across the viewport, the tabs component can be displayed as a [quiet picker](/docs/components-picker--docs).
@@ -186,7 +186,7 @@ export const Overflow = OverflowGroup.bind({});
 Overflow.args = {
 	orientation: "overflow",
 };
-Overflow.tags = ["autodocs", "!dev"];
+Overflow.tags = ["!dev"];
 Overflow.parameters = {
 	docs: {
 		story: {
@@ -220,7 +220,7 @@ Sizing.args = {
 		},
 	],
 };
-Sizing.tags = ["autodocs", "!dev"];
+Sizing.tags = ["!dev"];
 
 /**
  * Quiet tabs have no visible divider across the tab items apart from the one that shows the selected tab item. These should be used as sub-level navigation or for containers.
@@ -248,7 +248,7 @@ Quiet.args = {
 		},
 	],
 };
-Quiet.tags = ["autodocs", "!dev"];
+Quiet.tags = ["!dev"];
 
 /**
  * Compact tabs should never be used without the quiet variation.
@@ -277,7 +277,7 @@ Compact.args = {
 		},
 	],
 };
-Compact.tags = ["autodocs", "!dev"];
+Compact.tags = ["!dev"];
 
 /**
  * A tab item in a disabled state shows that the tab item exists, but is not available in that circumstance.
@@ -304,7 +304,7 @@ Disabled.args = {
 		},
 	],
 };
-Disabled.tags = ["autodocs", "!dev"];
+Disabled.tags = ["!dev"];
 
 /**
  * Emphasized tabs have blue text for the selected state for visual prominence and to draw more attention to them. This is optimal for when the selection should call attention, such as the main navigation for a website.
@@ -313,7 +313,7 @@ export const Emphasized = Template.bind({});
 Emphasized.args = {
 	isEmphasized: true,
 };
-Emphasized.tags = ["autodocs", "!dev"];
+Emphasized.tags = ["!dev"];
 
 /**
  * Tab items can alternatively be anchor tags (`<a>`) instead of `div` elements to allow for navigation to on-page anchors. Do not use horizontal tabs for this adaptation.
@@ -324,7 +324,7 @@ Anchors.args = {
 	orientation: "vertical",
 	useAnchors: true,
 };
-Anchors.tags = ["autodocs", "!dev"];
+Anchors.tags = ["!dev"];
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = Default.bind({});