fix: accordion spacing and icon size (#1936)

packages/components/src/components/collapsible/__snapshots__/collapsible.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`TextField should match snapshot 1`] = `
     <div class="collapsible" part="base">
       <h2 aria-level="2" class="collapsible__heading" part="heading">
         <button aria-controls="collapsable-panel-0" aria-expanded="false" class="collapsible__button" id="collapsable-heading-0" part="button">
-          <scale-icon-navigation-right class="collapsible__icon" decorative="" part="icon" size="20"></scale-icon-navigation-right>
+          <scale-icon-navigation-right class="collapsible__icon" decorative="" part="icon" size="24"></scale-icon-navigation-right>
           <span class="collapsible__button-text" part="button-text">
             <slot name="heading"></slot>
           </span>

packages/components/src/components/collapsible/collapsible.css

@@ -26,12 +26,9 @@
   --focus-outline: var(--telekom-line-weight-highlight) solid
     var(--telekom-color-functional-focus-standard);
 
-  /* icon */
-  --spacing-top-icon: var(--telekom-spacing-unit-x1);
-
   /* content */
   --spacing-right-content: var(--telekom-spacing-unit-x12);
-  --spacing-left-content: var(--telekom-spacing-unit-x8);
+  --spacing-left-content: 34px;
   --spacing-top-content: var(--telekom-spacing-unit-x4);
   --spacing-bottom-content: var(--telekom-spacing-unit-x6);
 }
@@ -63,7 +60,7 @@
   width: 100%;
   display: flex;
   text-align: left;
-  align-items: flex-start;
+  align-items: center;
   padding-top: 0;
   border-color: transparent;
   border-style: solid;
@@ -104,7 +101,6 @@
 
 .collapsible__icon {
   flex-shrink: 0;
-  margin-top: var(--spacing-top-icon);
 }
 
 .collapsible__icon-right {

packages/components/src/components/collapsible/collapsible.tsx

@@ -25,7 +25,7 @@ export interface CollapsibleEventDetail {
   expanded: boolean;
 }
 
-const DEFAULT_ICON_SIZE = 20;
+const DEFAULT_ICON_SIZE = 24;
 
 let i = 0;
 

packages/storybook-vue/stories/components/accordion/Accordion.stories.mdx

@@ -122,12 +122,9 @@ export const Template = (args, { argTypes }) => ({
   --background-button-hover: var(--telekom-color-ui-state-fill-hovered);
   --border-color-button-focus: var(--telekom-color-functional-focus);
 
-  /* icon */
-  --spacing-top-icon: calc(var(--telekom-spacing-unit-x1) + 1px);
-
   /* content */
   --spacing-right-content: var(--telekom-spacing-unit-x12);
-  --spacing-left-content: var(--telekom-spacing-unit-x8);
+  --spacing-left-content: 34px;
   --spacing-top-content: var(--telekom-spacing-unit-x4);
   --spacing-bottom-content: var(--telekom-spacing-unit-x6);
 }