chore: Remove all class props from all components

packages/dnb-eufemia/src/components/accordion/Accordion.tsx

@@ -147,7 +147,6 @@ export type AccordionProps = Omit<React.HTMLProps<HTMLElement>, 'ref'> &
      */
     icon_size?: IconSize
     attributes?: AccordionAttributes
-    class?: string
     className?: string
     children?: React.ReactNode
     /**
@@ -326,7 +325,6 @@ function Accordion({
             const {
               variant,
               className,
-              class: _className,
               prerender,
               prevent_rerender,
               prevent_rerender_conditional,
@@ -364,8 +362,7 @@ function Accordion({
                 variant && `dnb-accordion__variant--${variant}`,
                 prerender && 'dnb-accordion--prerender',
                 createSpacingClasses(extendedProps),
-                className,
-                _className
+                className
               ),
             } as HTMLProps<HTMLDivElement>
 

packages/dnb-eufemia/src/components/accordion/AccordionGroup.tsx

@@ -67,7 +67,6 @@ const AccordionGroup = (props: AccordionGroupProps) => {
     group, // eslint-disable-line
     onInit, // eslint-disable-line
     className,
-    class: _className,
 
     id: _id, // eslint-disable-line
     children, // eslint-disable-line
@@ -79,8 +78,7 @@ const AccordionGroup = (props: AccordionGroupProps) => {
     'dnb-accordion-group',
     isTrue(single_container) && 'dnb-accordion-group--single-container',
     createSpacingClasses(extendedProps),
-    className,
-    _className
+    className
   )
 
   const params = {

packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js

@@ -1756,7 +1756,6 @@ class AutocompleteInstance extends React.PureComponent {
       drawer_class,
       input_ref, // eslint-disable-line
       className,
-      class: _className,
       disabled,
       stretch,
       skeleton,
@@ -1819,7 +1818,6 @@ class AutocompleteInstance extends React.PureComponent {
         showStatus && 'dnb-autocomplete__form-status',
         'dnb-form-component',
         createSpacingClasses(props),
-        _className,
         className
       ),
     }

packages/dnb-eufemia/src/components/button/Button.d.ts

@@ -97,10 +97,6 @@ export type ButtonProps = {
    */
   globalStatus?: GlobalStatusConfigObject;
   id?: string;
-  /**
-   * Any extra modifying class.
-   */
-  class?: string;
   /**
    * If you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button.
    */

packages/dnb-eufemia/src/components/button/Button.js

@@ -105,7 +105,6 @@ export default class Button extends React.PureComponent {
     )
 
     const {
-      class: class_name,
       className,
       variant,
       size,
@@ -208,7 +207,6 @@ export default class Button extends React.PureComponent {
         this.context
       ),
       createSpacingClasses(props),
-      class_name,
       className,
       props.href || props.to ? '' : null, // dnb-anchor--no-underline dnb-anchor--no-hover
       Element === Anchor && 'dnb-anchor--no-style'
@@ -311,7 +309,6 @@ Button.propTypes = {
     message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   }),
   id: PropTypes.string,
-  class: PropTypes.string,
   href: PropTypes.string,
   target: PropTypes.string,
   rel: PropTypes.string,

packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts

@@ -231,7 +231,6 @@ export interface DatePickerProps
    * Use `right` to change the calendar alignment direction. Defaults to `left`.
    */
   align_picker?: DatePickerAlignPicker;
-  class?: string;
   className?: string;
   /**
    * Will be called right before every new calendar view gets rendered. See the example above.

packages/dnb-eufemia/src/components/date-picker/DatePicker.js

@@ -174,7 +174,6 @@ export default class DatePicker extends React.PureComponent {
     no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     direction: PropTypes.oneOf(['auto', 'top', 'bottom']),
     align_picker: PropTypes.oneOf(['auto', 'left', 'right']),
-    class: PropTypes.string,
     className: PropTypes.string,
 
     ...spacingPropTypes,
@@ -247,7 +246,6 @@ export default class DatePicker extends React.PureComponent {
     no_animation: false,
     direction: 'auto',
     align_picker: null,
-    class: null,
     className: null,
 
     on_days_render: null,
@@ -540,7 +538,6 @@ export default class DatePicker extends React.PureComponent {
       direction: _direction, // eslint-disable-line
       id: _id, // eslint-disable-line
       className,
-      class: _className,
       show_submit_button, // eslint-disable-line
       show_cancel_button, // eslint-disable-line
       show_reset_button, // eslint-disable-line
@@ -596,7 +593,6 @@ export default class DatePicker extends React.PureComponent {
         'dnb-form-component',
         size && `dnb-date-picker--${size}`,
         createSpacingClasses(props),
-        _className,
         className
       ),
     }

packages/dnb-eufemia/src/components/dropdown/Dropdown.js

@@ -458,7 +458,6 @@ class DropdownInstance extends React.PureComponent {
       max_height,
       default_value,
       className,
-      class: _className,
       disabled,
       stretch,
       skeleton,
@@ -524,7 +523,6 @@ class DropdownInstance extends React.PureComponent {
         showStatus && 'dnb-dropdown__form-status',
         'dnb-form-component',
         createSpacingClasses(props),
-        _className,
         className
       ),
     }

packages/dnb-eufemia/src/components/form-row/FormRow.d.ts

@@ -32,7 +32,6 @@ export interface FormRowProps
   responsive?: boolean;
   disabled?: boolean;
   skeleton?: SkeletonShow;
-  class?: string;
   skipContentWrapperIfNested?: boolean;
   className?: string;
   children?: FormRowChildren;

packages/dnb-eufemia/src/components/form-row/FormRow.js

@@ -52,7 +52,6 @@ export const formRowPropTypes = {
   responsive: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  class: PropTypes.string,
 
   skipContentWrapperIfNested: PropTypes.bool,
 
@@ -86,7 +85,6 @@ export const formRowDefaultProps = {
   responsive: null,
   disabled: null,
   skeleton: null,
-  class: null,
 
   skipContentWrapperIfNested: false,
   className: null,
@@ -162,7 +160,6 @@ export default class FormRow extends React.PureComponent {
       skeleton,
       wrap,
       className,
-      class: _className,
       skipContentWrapperIfNested,
 
       id: _id, // eslint-disable-line
@@ -200,8 +197,7 @@ export default class FormRow extends React.PureComponent {
         centered && 'dnb-form-row--centered',
         isNested && 'dnb-form-row--nested',
         createSpacingClasses(props),
-        className,
-        _className
+        className
       ),
       ...attributes,
     }

packages/dnb-eufemia/src/components/form-set/FormSet.d.ts

@@ -35,7 +35,6 @@ export interface FormSetProps
   section_spacing?: SectionSpacing;
   globalStatus?: GlobalStatusConfigObject;
   responsive?: boolean;
-  class?: string;
   skipContentWrapperIfNested?: boolean;
   className?: string;
   children?: FormSetChildren;

packages/dnb-eufemia/src/components/form-set/FormSet.js

@@ -81,7 +81,6 @@ export default class FormSet extends React.PureComponent {
       prevent_submit, // eslint-disable-line
       id, // eslint-disable-line
       className,
-      class: _className,
 
       ...rest
     } = props
@@ -108,8 +107,7 @@ export default class FormSet extends React.PureComponent {
       className: classnames(
         'dnb-form-set',
         createSpacingClasses(this.props),
-        className,
-        _className
+        className
       ),
       ...attributes,
     }

packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts

@@ -68,7 +68,6 @@ export interface FormStatusProps
   text_id?: string;
   width_selector?: string;
   width_element?: Record<string, unknown>;
-  class?: string;
   /**
    * NB: Animation is disabled as of now. <del>use `true` to omit the animation on content visibility. Defaults to `false`.</del>
    */

packages/dnb-eufemia/src/components/form-status/FormStatus.js

@@ -64,7 +64,6 @@ export default class FormStatus extends React.PureComponent {
     text_id: PropTypes.string,
     width_selector: PropTypes.string,
     width_element: PropTypes.object,
-    class: PropTypes.string,
     no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     stretch: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -96,7 +95,6 @@ export default class FormStatus extends React.PureComponent {
     text_id: null,
     width_selector: null,
     width_element: null,
-    class: null,
     no_animation: null,
     skeleton: null,
     stretch: null,
@@ -350,7 +348,6 @@ export default class FormStatus extends React.PureComponent {
       className,
       stretch,
       shellSpace,
-      class: _className,
       text_id,
 
       show, // eslint-disable-line
@@ -391,8 +388,7 @@ export default class FormStatus extends React.PureComponent {
         stretch && 'dnb-form-status--stretch',
         hasStringContent ? 'dnb-form-status--has-content' : null,
         createSpacingClasses(props),
-        className,
-        _className
+        className
       ),
       id: !String(id).startsWith('null') ? this.state.id : null,
       title,

packages/dnb-eufemia/src/components/global-status/GlobalStatus.d.ts

@@ -94,7 +94,6 @@ export interface GlobalStatusProps
    */
   status_anchor_text?: React.ReactNode;
   skeleton?: SkeletonShow;
-  class?: string;
   className?: string;
   /**
    * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.

packages/dnb-eufemia/src/components/global-status/GlobalStatus.js

@@ -85,7 +85,6 @@ export default class GlobalStatus extends React.PureComponent {
 
     ...spacingPropTypes,
 
-    class: PropTypes.string,
     className: PropTypes.string,
     children: PropTypes.oneOfType([
       PropTypes.string,
@@ -121,7 +120,6 @@ export default class GlobalStatus extends React.PureComponent {
     delay: null,
     status_anchor_text: null,
     skeleton: null,
-    class: null,
 
     className: null,
     children: null,
@@ -574,7 +572,6 @@ export default class GlobalStatus extends React.PureComponent {
       no_animation,
       hide_close_button,
       close_text,
-      class: _className,
       status_anchor_text,
       skeleton,
 
@@ -601,8 +598,7 @@ export default class GlobalStatus extends React.PureComponent {
         'dnb-no-focus',
         createSkeletonClass('font', skeleton, this.context),
         createSpacingClasses(props),
-        className,
-        _className
+        className
       ),
       'aria-live': isActive ? 'assertive' : 'off',
       onKeyDown: this.onKeyDownHandler,

packages/dnb-eufemia/src/components/help-button/HelpButtonInstance.tsx

@@ -28,21 +28,13 @@ export default function HelpButtonInstance(localProps: ButtonProps) {
     context.HelpButton
   )
 
-  const {
-    size,
-    icon,
-    on_click,
-    className,
-    class: _className,
-    ...rest
-  } = props
+  const { size, icon, on_click, className, ...rest } = props
 
   const params = {
     className: classnames(
       'dnb-help-button',
       createSpacingClasses(props),
-      className,
-      _className
+      className
     ),
     size,
     icon,

packages/dnb-eufemia/src/components/icon/Icon.js

@@ -313,7 +313,6 @@ export const prepareIcon = (props, context) => {
     alt,
     title,
     skeleton,
-    class: _className,
     className,
     ...attributes
   } = props
@@ -365,7 +364,6 @@ export const prepareIcon = (props, context) => {
     sizeAsString ? `dnb-icon--${sizeAsString}` : 'dnb-icon--default',
     createSkeletonClass(null, skeleton, context),
     createSpacingClasses(props),
-    _className,
     className
   )
 

packages/dnb-eufemia/src/components/input-masked/InputMasked.d.ts

@@ -150,7 +150,6 @@ export interface InputMaskedProps
   stretch?: boolean;
   disabled?: boolean;
   skeleton?: SkeletonShow;
-  class?: string;
   input_class?: string;
   input_attributes?: InputInputAttributes;
   input_element?: InputInputElement;

packages/dnb-eufemia/src/components/input/Input.d.ts

@@ -120,7 +120,6 @@ export interface InputProps
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
   skeleton?: SkeletonShow;
-  class?: string;
   /**
    * In case we have to set a custom input class.
    */

packages/dnb-eufemia/src/components/input/Input.js

@@ -90,7 +90,6 @@ export const inputPropTypes = {
   stretch: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  class: PropTypes.string,
   input_class: PropTypes.string,
   input_attributes: PropTypes.oneOfType([
     PropTypes.string,
@@ -166,7 +165,6 @@ export default class Input extends React.PureComponent {
     disabled: null,
     skeleton: null,
     input_class: null,
-    class: null,
     input_attributes: null,
     input_element: null,
     inner_ref: null,
@@ -378,7 +376,6 @@ export default class Input extends React.PureComponent {
       icon,
       icon_position,
       icon_size,
-      class: _className,
       className,
 
       id: _id, //eslint-disable-line
@@ -429,7 +426,6 @@ export default class Input extends React.PureComponent {
         isTrue(keep_placeholder) && 'dnb-input--keep-placeholder',
         'dnb-form-component',
         createSpacingClasses(props),
-        _className,
         className
       ),
       'data-input-state': inputState,