chore(Storybook): Hide controls for className and style attributes (#2288)

Co-authored-by: Aram <[email protected]>

Author: VincentSmedinga

storybook/config/preview.tsx

@@ -18,6 +18,12 @@ export const argTypes = {
   children: {
     table: { disable: true },
   },
+  className: {
+    table: { disable: true },
+  },
+  style: {
+    table: { disable: true },
+  },
 }
 
 // Wrap in Page, set language to Dutch for Canvas and Stories

storybook/src/components/Card/Card.stories.tsx

@@ -19,11 +19,6 @@ const meta = {
   args: {
     style: { maxWidth: '24rem' },
   },
-  argTypes: {
-    style: {
-      table: { disable: true },
-    },
-  },
 } satisfies Meta<typeof Card>
 
 export default meta

storybook/src/components/Column/Column.stories.tsx

@@ -38,9 +38,6 @@ const meta = {
       },
       options: [undefined, ...crossAlignOptionsForColumn],
     },
-    className: {
-      table: { disable: true },
-    },
     gap: {
       control: {
         labels: { undefined: 'medium' },

storybook/src/components/Grid/Grid.stories.tsx

@@ -16,12 +16,7 @@ const meta = {
   args: {
     paddingVertical: 'x-large',
   },
-  argTypes: {
-    className: {
-      table: { disable: true },
-    },
-    ...gridGapAndPaddingArgTypes,
-  },
+  argTypes: gridGapAndPaddingArgTypes,
   parameters: {
     layout: 'fullscreen',
   },

storybook/src/components/OrderedList/OrderedList.stories.tsx

@@ -144,11 +144,6 @@ export const WithoutMarkers: Story = {
     markers: false,
     style: { maxInlineSize: '32rem' },
   },
-  argTypes: {
-    style: {
-      table: { disable: true },
-    },
-  },
 }
 
 export const InverseColor: Story = {

storybook/src/components/Page/Page.stories.tsx

@@ -16,9 +16,6 @@ const meta = {
     lang: 'nl', // Mimic what we do in preview.tsx, where the decorator doesn’t render a Page for stories of Page.
   },
   argTypes: {
-    className: {
-      table: { disable: true },
-    },
     lang: {
       table: { disable: true }, // It’s best practice to set this attribute on the `html` element, so let’s not highlight it here.
     },

storybook/src/components/Row/Row.stories.tsx

@@ -39,9 +39,6 @@ const meta = {
       },
       options: [undefined, ...crossAlignOptions],
     },
-    className: {
-      table: { disable: true },
-    },
     gap: {
       control: {
         labels: { undefined: 'medium' },

storybook/src/components/SkipLink/SkipLink.stories.tsx

@@ -23,9 +23,6 @@ const meta = {
     href: {
       description: 'The url for the link. References an anchor on the current page.',
     },
-    style: {
-      table: { disable: true },
-    },
   },
 } satisfies Meta<typeof SkipLink>
 

storybook/src/components/UnorderedList/UnorderedList.stories.tsx

@@ -106,11 +106,6 @@ export const WithoutMarkers: Story = {
     markers: false,
     style: { maxInlineSize: '32rem' },
   },
-  argTypes: {
-    style: {
-      table: { disable: true },
-    },
-  },
 }
 
 export const InverseColor: Story = {