fix(swatch,swatchgroup,table,tabs): disabled Chromatic snapshot

for new stories, disabled the snapshot since the default group should
encompass all stories

Author: marissahuysentruyt

components/swatch/stories/swatch.stories.js

@@ -171,6 +171,9 @@ Sizing.parameters = {
  */
 export const Disabled = DisabledGroup.bind({});
 Disabled.tags = ["!dev"];
+Disabled.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * 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.
@@ -189,6 +192,9 @@ Selected.args = {
 	isSelected: true,
 };
 Selected.tags = ["!dev"];
+Selected.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * By default, swatches have a border. However, when swatches are used within a swatch group, there are additional border considerations. 
@@ -197,6 +203,9 @@ Selected.tags = ["!dev"];
  */
 export const Border = BorderGroup.bind({});
 Border.tags = ["!dev"];
+Border.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /** 
  * 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,10 +215,16 @@ Rectangle.args = {
 	isRectangle: true,
 };
 Rectangle.tags = ["!dev"];
+Rectangle.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 export const Nothing = NothingGroup.bind({});
 Nothing.args = {};
 Nothing.tags = ["!dev"];
+Nothing.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * When a swatch represents multiple values that are not identical, the preview shows a `gray-50` fill and a dash UI icon.
@@ -219,20 +234,29 @@ MixedValue.args = {
 	isMixedValue: true,
 };
 MixedValue.tags = ["!dev"];
+MixedValue.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 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 = ["!dev"];
+Gradient.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 export const Image = Template.bind({});
 Image.args = {
 	isImage: true,
 	imageUrl: "example-ava@2x.png",
 };
 Image.tags = ["!dev"];
+Image.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = SwatchGroup.bind({});

components/swatchgroup/stories/swatchgroup.stories.js

@@ -131,26 +131,38 @@ Compact.args = {
 	density: "compact",
 };
 Compact.tags = ["!dev"];
+Compact.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 export const Spacious = Template.bind({});
 Spacious.args = {
 	density: "spacious",
 };
 Spacious.tags = ["!dev"];
+Spacious.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * Only use rounded swatches if there is a single row.
  */
 export const Rounding = RoundingTemplate.bind({});
 Rounding.args = {};
 Rounding.tags = ["!dev"];
+Rounding.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * 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 = ["!dev"];
+Sizing.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * In this example, the lower contrast swatches properly utilize the `.spectrum-Swatch--lightBorder` class.
@@ -180,6 +192,9 @@ WithLightBorder.args = {
 };
 WithLightBorder.tags = ["!dev"];
 WithLightBorder.storyName = "With light border";
+WithLightBorder.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = SwatchgroupGroup.bind({});

components/table/stories/table.stories.js

@@ -185,6 +185,9 @@ Default.args = {};
  */
 export const Sizing = SizingTemplate.bind({});
 Sizing.tags = ["!dev"];
+Sizing.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * The compact variant decreases the spacing used within the table.
@@ -195,6 +198,9 @@ Compact.args = {
 	density: "compact",
 };
 Compact.tags = ["!dev"];
+Compact.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * The spacious variant increases the spacing used within the table.
@@ -205,6 +211,9 @@ Spacious.args = {
 	density: "spacious",
 };
 Spacious.tags = ["!dev"];
+Spacious.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * The standard multi-select table includes a column of checkboxes used for selecting rows.
@@ -215,6 +224,9 @@ MultiSelect.args = {
 	rowItems: ExampleRowItems,
 };
 MultiSelect.tags = ["!dev"];
+MultiSelect.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * Excluding the `.spectrum-Table--emphasized` class will change the style of selected rows.
@@ -226,6 +238,9 @@ NonEmphasizedMultiSelect.args = {
 	rowItems: ExampleRowItems,
 };
 NonEmphasizedMultiSelect.tags = ["!dev"];
+NonEmphasizedMultiSelect.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * The quiet table has a transparent background and no borders on the left and right.
@@ -236,6 +251,9 @@ Quiet.args = {
 	isQuiet: true,
 };
 Quiet.tags = ["!dev"];
+Quiet.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 export const QuietMultiSelect = Template.bind({});
 QuietMultiSelect.args = {
@@ -244,6 +262,9 @@ QuietMultiSelect.args = {
 };
 QuietMultiSelect.tags = ["!dev"];
 QuietMultiSelect.storyName = "Quiet multi-select";
+QuietMultiSelect.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * 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,6 +292,9 @@ WithColumnDividers.args = {
 };
 WithColumnDividers.tags = ["!dev"];
 WithColumnDividers.storyName = "With column dividers";
+WithColumnDividers.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * 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.
@@ -299,6 +323,9 @@ SummaryAndSelected.args = {
 };
 SummaryAndSelected.tags = ["!dev"];
 SummaryAndSelected.storyName = "Summary and selected";
+SummaryAndSelected.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * Tables can style one or more rows as section headers.
@@ -333,6 +360,9 @@ SectionHeader.args = {
 };
 SectionHeader.tags = ["!dev"];
 SectionHeader.storyName = "Section header";
+SectionHeader.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 export const SectionHeaderQuiet = Template.bind({});
 SectionHeaderQuiet.args = {
@@ -341,6 +371,9 @@ SectionHeaderQuiet.args = {
 };
 SectionHeaderQuiet.tags = ["!dev"];
 SectionHeaderQuiet.storyName = "Section header, quiet";
+SectionHeaderQuiet.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * 
@@ -382,6 +415,9 @@ Scrollable.args = {
 	],
 };
 Scrollable.tags = ["!dev"];
+Scrollable.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * 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.
@@ -394,6 +430,9 @@ DivsScrollable.args = {
 	rowItems: ExampleRowItems,
 };
 DivsScrollable.tags = ["!dev"];
+DivsScrollable.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * 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.
@@ -458,6 +497,9 @@ Collapsible.args = {
 	],
 };
 Collapsible.tags = ["!dev"];
+Collapsible.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 export const CollapsibleMultiSelect = Template.bind({});
 CollapsibleMultiSelect.storyName = "Collapsible multi-select";
@@ -527,6 +569,9 @@ CollapsibleMultiSelect.args = {
 	],
 };
 CollapsibleMultiSelect.tags = ["!dev"];
+CollapsibleMultiSelect.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * Thumbnails can be used in the table content, with some additional markup and classes for alignment.
@@ -554,6 +599,9 @@ Thumbnails.args = {
 	],
 };
 Thumbnails.tags = ["!dev"];
+Thumbnails.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * The thumbnail table variant can also be combined with collapsible rows.
@@ -600,6 +648,9 @@ ThumbnailsCollapsible.args = {
 };
 ThumbnailsCollapsible.tags = ["!dev"];
 ThumbnailsCollapsible.storyName = "Thumbnails, collapsible";
+ThumbnailsCollapsible.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * The table body can accept dropped content.
@@ -610,6 +661,9 @@ DropzoneBody.args = {
 };
 DropzoneBody.tags = ["!dev"];
 DropzoneBody.storyName = "Dropzone, body";
+DropzoneBody.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 /**
  * 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.
@@ -642,6 +696,9 @@ DropzoneRow.args = {
 };
 DropzoneRow.tags = ["!dev"];
 DropzoneRow.storyName = "Dropzone, row";
+DropzoneRow.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 export const DropzoneRowQuiet = Template.bind({});
 DropzoneRowQuiet.args = {
@@ -650,6 +707,9 @@ DropzoneRowQuiet.args = {
 };
 DropzoneRowQuiet.tags = ["!dev"];
 DropzoneRowQuiet.storyName = "Dropzone, row, quiet";
+DropzoneRowQuiet.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = TableGroup.bind({});