fix(styles): form input correct margins [ci visual] (#4272)

packages/styles/src/input-group.scss

@@ -116,6 +116,10 @@ $fd-input-border-radius: var(--sapField_BorderCornerRadius);
     }
   }
 
+  &--compact {
+    margin: 0.1875rem 0;
+  }
+
   .#{$fd-namespace}-textarea {
     resize: vertical;
   }

packages/styles/src/select.scss

@@ -89,6 +89,7 @@ $fd-select-padding-x-compact: 0.5rem;
   @include fd-reset();
 
   text-shadow: var(--fdSelect_Text_Shadow);
+  margin: 0.25rem 0;
 
   &__control {
     @include fd-input-field-base(
@@ -112,15 +113,14 @@ $fd-select-padding-x-compact: 0.5rem;
       pointer-events: none;
     }
 
-    @include fd-expanded() {
-      margin-bottom: 0;
-    }
-
     padding: 0;
+    margin: 0;
     cursor: pointer;
 
     .#{$block}__button {
       @include fd-set-margin-left(0.25rem);
+
+      height: 100%;
     }
 
     @include fd-readonly() {
@@ -166,6 +166,7 @@ $fd-select-padding-x-compact: 0.5rem;
   }
 
   &--compact {
+    margin: 0.1875rem 0;
     .#{$block}__control {
       height: $fd-form-input-height--compact;
       min-height: $fd-form-input-height--compact;

packages/styles/stories/Components/Forms/input-group/input-group.stories.js

@@ -24,7 +24,7 @@ export const Sizes = () => `
 <br />
 <div class="fd-form-item">
     <label class="fd-form-label" for="aqwsde112">Compact Size </label>
-    <div class="fd-input-group">
+    <div class="fd-input-group fd-input-group--compact">
         <span class="fd-input-group__addon fd-input-group__addon--compact">$</span>
         <input class="fd-input fd-input--compact fd-input-group__input" type="text" placeholder="Placeholder" id="aqwsde112" name="" value="1234568910 ">
     </div>
@@ -152,7 +152,7 @@ export const InputWithActions = () => `
 <br />
 <div class="fd-form-item">
     <label class="fd-form-label" for="aqwsde122">Compact Input with icon action</label>
-    <div class="fd-input-group">
+    <div class="fd-input-group fd-input-group--compact">
         <input class="fd-input fd-input--compact fd-input-group__input" type="text" placeholder="Placeholder" id="aqwsde122" name="" value="1000000">
         <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact">
             <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact" aria-label="Navigation">
@@ -213,7 +213,7 @@ export const States = () => `
 <br />
 <div class="fd-form-item">
     <label class="fd-form-label" for="aqwsde127">Information compact</label>
-    <div class="fd-input-group is-information">
+    <div class="fd-input-group is-information fd-input-group--compact">
         <input class="fd-input fd-input--compact fd-input-group__input" type="text" placeholder="Placeholder" id="aqwsde127" name="" value="1000000">
         <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact">
             <button class="fd-input-group__button fd-button fd-button--transparent fd-button--compact">
@@ -226,7 +226,7 @@ export const States = () => `
 <br />
 <div class="fd-form-item">
     <label class="fd-form-label" for="aqwsde127">Error compact</label>
-    <div class="fd-input-group is-error">
+    <div class="fd-input-group is-error fd-input-group--compact">
         <input class="fd-input fd-input--compact fd-input-group__input" type="text" placeholder="Placeholder" id="aqwsde127" name="" value="1000000">
         <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact">
             <button class="fd-input-group__button fd-button fd-button--transparent fd-button--compact">
@@ -239,7 +239,7 @@ export const States = () => `
 <br />
 <div class="fd-form-item">
     <label class="fd-form-label" for="aqwsde127">Warning(Alert) compact</label>
-    <div class="fd-input-group is-warning">
+    <div class="fd-input-group is-warning fd-input-group--compact">
         <input class="fd-input fd-input--compact fd-input-group__input" type="text" placeholder="Placeholder" id="aqwsde127" name="" value="1000000">
         <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact">
             <button class="fd-input-group__button fd-button fd-button--transparent fd-button--compact">
@@ -252,7 +252,7 @@ export const States = () => `
 <br />
 <div class="fd-form-item">
     <label class="fd-form-label" for="aqwsde127">Success compact</label>
-    <div class="fd-input-group is-success">
+    <div class="fd-input-group is-success fd-input-group--compact">
         <input class="fd-input fd-input--compact fd-input-group__input" type="text" placeholder="Placeholder" id="aqwsde127" name="" value="1000000">
         <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact">
             <button class="fd-input-group__button fd-button fd-button--transparent fd-button--compact">
@@ -298,7 +298,7 @@ export const States = () => `
 <br />
 <div class="fd-form-item">
     <label class="fd-form-label" for="aqwsde132">Disabled Information</label>
-    <div class="fd-input-group is-information is-disabled">
+    <div class="fd-input-group is-information is-disabled fd-input-group--compact">
         <input class="fd-input fd-input--compact fd-input-group__input" disabled type="text" id="aqwsde132" name="" value="1000000">
         <span class="fd-input-group__addon fd-input-group__addon--compact fd-input-group__addon--button">
             <button class="fd-input-group__button fd-button fd-button--transparent fd-button--compact" disabled>
@@ -310,7 +310,7 @@ export const States = () => `
 <br />
 <div class="fd-form-item">
     <label class="fd-form-label" for="aqwsde132">Read-Only</label>
-    <div class="fd-input-group is-readonly">
+    <div class="fd-input-group is-readonly fd-input-group--compact">
         <input class="fd-input fd-input--compact fd-input-group__input" readonly type="text" id="aqwsde132" name="" value="1000000">
         <span class="fd-input-group__addon fd-input-group__addon--compact fd-input-group__addon--button">
             <button class="fd-input-group__button fd-button fd-button--transparent fd-button--compact">
@@ -481,21 +481,21 @@ TestOne.parameters = {
 };
 
 export const TestTwo = () => `
-<div class="fd-input-group  ">
+<div class="fd-input-group fd-input-group--compact">
    <input aria-label="test" class="input-group-input-playground input-group-input-playground--compact fd-input-group__input" placeholder="" value="19387309" />
    <span class="fd-input-group__addon fd-input-group__addon--compact">
    km/h
    </span>
 </div>
 <br />
-<div class="fd-input-group  ">
+<div class="fd-input-group fd-input-group--compact">
    <span class="fd-input-group__addon  fd-input-group__addon--compact">
    $
    </span>
    <input aria-label="test" class="input-group-input-playground input-group-input-playground--compact fd-input-group__input" placeholder="" value="19387309" />
 </div>
 <br />
-<div class="fd-input-group  ">
+<div class="fd-input-group fd-input-group--compact">
    <span class="fd-input-group__addon  fd-input-group__addon--compact">
    $
    </span>

packages/styles/stories/Components/select/select.stories.js

@@ -35,7 +35,7 @@ export default {
 export const Cozy = () => `<div style="height: 250px">
     <label class="fd-form-label" id="cozySelectLabel">Choose an option</label><br />
     <div class="fd-popover">
-        <div class="fd-popover__control">
+        <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
             <div class="fd-select">
                 <button
                     aria-expanded="true"
@@ -112,7 +112,7 @@ Select displays a predefined option and a button that triggers a dropdown menu t
 export const Compact = () => `<div style="height: 200px">
     <label class="fd-form-label" id="compactSelectLabel">Choose an option</label><br />
     <div class="fd-popover">
-        <div class="fd-popover__control">
+        <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
             <div class="fd-select fd-select--compact">
                 <button
                     id="compactSelectCombobox"
@@ -243,7 +243,7 @@ export const SemanticStates = () => `<div style="height: 200px">
                 Choose an option
             </label><br>
             <div class="fd-popover">
-                <div class="fd-popover__control">
+                <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
                     <div class="fd-select">
                         <button
                             aria-labelledby="a4546C40 a4546C40Value"
@@ -307,7 +307,7 @@ export const SemanticStates = () => `<div style="height: 200px">
             </label>
             <br>
             <div class="fd-popover">
-                <div class="fd-popover__control">
+                <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
                     <div class="fd-select">
                         <button
                             aria-labelledby="b4546C40 b4546C40Value"
@@ -371,7 +371,7 @@ export const SemanticStates = () => `<div style="height: 200px">
             </label>
             <br />
             <div class="fd-popover">
-                <div class="fd-popover__control">
+                <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
                     <div class="fd-select">
                         <button
                             aria-labelledby="b45336C4 b45336C4Value"
@@ -435,7 +435,7 @@ export const SemanticStates = () => `<div style="height: 200px">
             </label>
             <br />
             <div class="fd-popover">
-                <div class="fd-popover__control">
+                <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
                     <div class="fd-select">
                         <button
                             aria-labelledby="h45336C4 h45336C4Value"
@@ -525,7 +525,7 @@ export const AsFormItem = () => `<div style="height:310px">
     <div class="fd-form-item">
     <label class="fd-form-label" id="formSelectLabel">Choose an option</label>
         <div class="fd-popover">
-            <div class="fd-popover__control">
+            <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
                 <div class="fd-select">
                     <button
                         aria-labelledby="formSelectLabel formSelectValue"
@@ -607,7 +607,7 @@ export const TwoColumn = () => `<div style="height: 200px">
     <div class="fd-col fd-col--6">
     <label class="fd-form-label" id="twoColumn1Label">Choose an option</label><br />
       <div class="fd-popover">
-        <div class="fd-popover__control">
+        <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
           <div class="fd-select">
             <button
                 aria-labelledby="twoColumn1Label twoColumn1Value"
@@ -658,7 +658,7 @@ export const TwoColumn = () => `<div style="height: 200px">
     <div class="fd-col fd-col--6">
     <label class="fd-form-label" id="twoColumn2Label">Choose an option</label><br />
       <div class="fd-popover">
-        <div class="fd-popover__control">
+        <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
           <div class="fd-select fd-select--compact">
             <button
                 aria-labelledby="twoColumn2Label twoColumn2Value"
@@ -725,7 +725,7 @@ Select can be displayed with two columns in the dropdown list view. The column w
 export const TwoColumnsAndIcons = () => `<div style="height: 200px">
     <label class="fd-form-label" id="twoColumnsAndIconsLabel">Choose an option</label><br />
     <div class="fd-popover">
-    <div class="fd-popover__control">
+    <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
         <div class="fd-select">
             <button
                 class="fd-select__control"
@@ -794,7 +794,7 @@ Not only can select be displayed with two columns, but also with icons. To displ
 export const ItemGrouping = () => `<div style="height: 450px">
 <label class="fd-form-label" id="itemGroupingLabel">Choose an option</label><br />
     <div class="fd-popover">
-    <div class="fd-popover__control">
+    <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
         <div class="fd-select">
             <button
                 aria-labelledby="itemGroupingLabel itemGroupingValue"
@@ -877,7 +877,7 @@ Select can be displayed with headers that group the list items in the dropdown m
 export const TextWrapping = () => `<div style="height: 300px">
     <label class="fd-form-label" id="textWrappingLabel">Choose an option</label><br />
     <div class="fd-popover">
-    <div class="fd-popover__control">
+    <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
         <div class="fd-select">
             <button
                 aria-labelledby="textWrappingLabel textWrappingValue"
@@ -947,7 +947,7 @@ The select component wraps text by default, and there is virtually no limit to t
 export const NoWrapping = () => `<div style="height: 200px">
     <label class="fd-form-label" id="noWrappingLabel">Choose an option</label><br />
     <div class="fd-popover">
-    <div class="fd-popover__control">
+    <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
         <div class="fd-select fd-select--compact">
             <button
                 aria-labelledby="noWrappingLabel noWrappingValue"
@@ -1015,7 +1015,7 @@ Although select wraps text by default, it is possible to prevent wrapping. To ac
 export const MatchSelectPopoverBodySize = () => `<div style="height: 250px">
     <label class="fd-form-label" id="matchSelectPopoverBodySizeLabel">Choose an option</label><br />
     <div class="fd-popover">
-    <div class="fd-popover__control">
+    <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
         <div class="fd-select">
             <button
                 aria-labelledby="matchSelectPopoverBodySizeLabel matchSelectPopoverBodySizeValue"
@@ -1084,7 +1084,7 @@ Select can be displayed as a popover, using all of its specifications. The defau
 export const LargerSelect = () => `<div style="height: 250px">
     <label class="fd-form-label" id="largeSelectPopoverSizeLabel">Choose an option</label><br />
     <div class="fd-popover">
-    <div class="fd-popover__control">
+    <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
         <div class="fd-select">
             <button
                 aria-labelledby="largeSelectPopoverSizeLabel"
@@ -1188,7 +1188,7 @@ Select can be disabled to communicate to the user that the control cannot be sel
 
 export const Readonly = () => `<label class="fd-form-label" id="readonlyLabel">Chosen option</label><br />
 <div class="fd-popover">
-    <div class="fd-popover__control">
+    <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
         <div class="fd-select">
             <span
                 class="fd-select__control is-readonly"
@@ -1226,7 +1226,7 @@ export const Blank = () => `<div style="height: 250px">
             </label>
             <br>
             <div class="fd-popover">
-                <div class="fd-popover__control">
+                <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
                     <div class="fd-select">
                         <button
                             id="acqw4q3r3d"
@@ -1280,7 +1280,7 @@ export const Blank = () => `<div style="height: 250px">
             </label>
             <br>
             <div class="fd-popover">
-                <div class="fd-popover__control">
+                <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
                     <div class="fd-select fd-select--compact">
                         <button
                             id="oj89qyeuawbd"

packages/styles/stories/Patterns/combobox-input/combobox-input.stories.js

@@ -110,7 +110,7 @@ export const CozyAndCompact = () => `<div style="display:flex;justify-content:sp
                     toggleElAttrs('nda8sd7abd', ['aria-expanded']);
                     toggleElAttrs('emi2qudh', ['aria-expanded']);
                 ">
-                <div class="fd-input-group fd-input-group--control">
+                <div class="fd-input-group fd-input-group--control fd-input-group--compact">
                     <input type="text" class="fd-input fd-input--compact fd-input-group__input" id="compactCombobox" placeholder="Select Fruit">
                     <span class="fd-input-group__addon fd-input-group__addon--compact fd-input-group__addon--button">
                         <button
@@ -483,7 +483,7 @@ export const Semantic = () => `<div style="height:200px">
                 toggleElAttrs('mfa98agh4ih3', ['aria-expanded']);
                 toggleElAttrs('mpzjf2q09ugd', ['aria-expanded']);
             ">
-            <div class="fd-input-group fd-input-group--control is-success">
+            <div class="fd-input-group fd-input-group--control fd-input-group--compact is-success">
                 <input type="text" class="fd-input fd-input--compact fd-input-group__input" id="semanticCombobox" placeholder="Select Fruit">
                 <span class="fd-input-group__addon fd-input-group__addon--compact fd-input-group__addon--button">
                     <button id="mpzjf2q09ugd" aria-label="show/hide fruit options"

packages/styles/stories/Patterns/datepicker/datepicker.stories.js

@@ -15,18 +15,18 @@ export default {
         description: `The date picker provides responsive behavior that allows for simple operation on all devices. It is smaller in compact mode and provides a touch-friendly size in cozy mode.
 
 The date picker lets users select a localized date using touch, mouse, or keyboard input.
-      
+
 It consists of two parts:
-      
+
 - **Input Field**: The user can enter a date directly or select it using the date picker
-      
+
 - **Date Picker**: The user can see a day view, month view, year view, or year ranges.
-      
+
 
 ##Usage
 
 Use the **DatePicker** if:
-      
+
 -    The user needs to enter a single date or a date range.
 -    The user needs to navigate directly from one month or year to another.
       `,
@@ -242,7 +242,7 @@ export const DefaultAndCompactSizes = () => `<div style="display:flex;justify-co
   <div class="fd-popover">
     <div class="fd-popover__control is-expanded">
       <label class="fd-form-label" for="compactDatepicker">Compact</label>
-      <div class="fd-input-group">
+      <div class="fd-input-group fd-input-group--compact">
         <input id="compactDatepicker" type="text" value="" placeholder="Pick a date"
           class="fd-input fd-input--compact fd-input-group__input"
           onfocus="
@@ -446,8 +446,8 @@ DefaultAndCompactSizes.parameters = {
     docs: {
         iframeHeight: 500,
         description: {
-            story: `The date-picker component is a composition of the \`input-group\`, \`popover\` and \`calendar\` components. 
-          It can be displayed in compact mode by adding the \`fd-input--compact\`, \`fd-button--compact\`, \`fd-calendar--compact\` 
+            story: `The date-picker component is a composition of the \`input-group\`, \`popover\` and \`calendar\` components.
+          It can be displayed in compact mode by adding the \`fd-input--compact\`, \`fd-button--compact\`, \`fd-calendar--compact\`
           to the building blocks of the component.`