fix: update header to icon minimum spacing

Contain icon within header and use flexbox.

Author: Yosevu Kilonzo

components/inlinealert/index.css

@@ -21,7 +21,7 @@ governing permissions and limitations under the License.
   /* Spacing*/
   --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-400);
   --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-spacing-400);
-  --spectrum-inlinealert-spacing-header-content-button-spacing: var(--spectrum-spacing-300);
+  --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-spacing-300);
 
   /* Color */
   --spectrum-inlinealert-background-color: var(--spectrum-gray-50);
@@ -35,8 +35,7 @@ governing permissions and limitations under the License.
   display: inline-block;
   box-sizing: border-box;
   min-inline-size: var(--mod-inlinealert-min-inline-size, var(--spectrum-inlinealert-min-inline-size));
-  margin-block: 8px;
-  margin-inline: 0;
+
   padding-block: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text));
   padding-inline: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text));
 
@@ -45,40 +44,36 @@ governing permissions and limitations under the License.
   border-radius: var(--mod-inlinealert-border-radius, var(--spectrum-inlinealert-border-radius));
 
   background-color: var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color));
-  /* default color set to body color, header element overwrites this */
   color: var(--mod-inlinealert-header-and-content-color, var(--spectrum-inlinealert-header-and-content-color));
   border-color: var(--mod-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color));
 }
 
 .spectrum-InLineAlert-icon {
-  position: absolute;
-  display: block;
-  inset-block-start: var(--spectrum-inlinealert-icon-size);
-  inset-inline-end: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size));
+  inline-size: var(--spectrum-inlinealert-icon-size);
+  block-size: var(--spectrum-inlinealert-icon-size);
 }
 
 .spectrum-InLineAlert-header {
-  display: inline-block;
-  block-size: auto;
-  min-block-size: var(--mod-inlinealert-header-min-block-size, var(--spectrum-inlinealert-header-min-block-size));
-  margin: 0;
-  padding: 0;
-
-  /* Header and Icon spacing */
-  padding-inline-end: var(--mod-inlinealert-spacing-header-to-icon, var(--spectrum-inlinealert-spacing-header-to-icon));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* Minimum space between header and icon */
+  gap: var(--mod-inlinealert-spacing-header-to-icon, var(--spectrum-inlinealert-spacing-header-to-icon));
 
   font-size: 14px;
   font-weight: 700;
   font-style: normal;
   line-height: 14px;
   text-transform: none;
 
+  min-block-size: var(--mod-inlinealert-header-min-block-size, var(--spectrum-inlinealert-header-min-block-size));
+
   color: var(--mod-inlinealert-header-and-content-color, var(--spectrum-inlinealert-header-and-content-color));
 }
 
 .spectrum-InLineAlert-content {
   display: block;
-  margin: var(--mod-inlinealert-spacing-header-content-button-spacing, var(--spectrum-inlinealert-spacing-header-content-button-spacing)) 0 0 0;
+  margin: var(--mod-inlinealert-spacing-header-content-button, var(--spectrum-inlinealert-spacing-header-content-button)) 0 0 0;
   padding: 0;
 
   font-size: 14px;
@@ -88,11 +83,9 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-InLineAlert-footer {
-  display: block;
-
-  text-align: end;
-
-  padding-block-start: 0.5rem;
+  display: flex;
+  justify-content: flex-end;
+  margin-block-start: var(--mod-inlinealert-spacing-header-content-butto, var(--spectrum-inlinealert-spacing-header-content-button));
 
   &:empty {
     display: none;
@@ -130,5 +123,3 @@ governing permissions and limitations under the License.
     color: var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative));
   }
 }
-
-

components/inlinealert/metadata/inlinealert.yml

@@ -12,40 +12,48 @@ examples:
     name: Informative
     markup: |
       <div class="spectrum-InLineAlert spectrum-InLineAlert--info">
-        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
-          <use xlink:href="#spectrum-icon-18-Info" />
-        </svg>
-        <div class="spectrum-InLineAlert-header">Information in-line alert header</div>
+        <div class="spectrum-InLineAlert-header">
+          Information in-line alert header
+          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-icon-18-Info" />
+          </svg>
+        </div>
         <div class="spectrum-InLineAlert-content">This is an alert.</div>
       </div>
   - id: inlinealert-positive
     name: Positive
     markup: |
       <div class="spectrum-InLineAlert spectrum-InLineAlert--positive">
-        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
-          <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
-        </svg>
-        <div class="spectrum-InLineAlert-header">Positive in-line alert header</div>
+        <div class="spectrum-InLineAlert-header">
+          Positive in-line alert header
+          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
+          </svg>
+        </div>
         <div class="spectrum-InLineAlert-content">This is an alert.</div>
       </div>
   - id: inlinealert-notice
     name: Notice
     markup: |
       <div class="spectrum-InLineAlert spectrum-InLineAlert--notice">
-        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
-          <use xlink:href="#spectrum-icon-18-Alert" />
-        </svg>
-        <div class="spectrum-InLineAlert-header">Notice in-line alert - Oh no</div>
+        <div class="spectrum-InLineAlert-header">
+          Notice in-line alert - Oh no
+          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-icon-18-Alert" />
+          </svg>
+        </div>
         <div class="spectrum-InLineAlert-content">This is an alert.</div>
       </div>
   - id: inlinealert-negative
     name: Negative
     markup: |
       <div class="spectrum-InLineAlert spectrum-InLineAlert--negative">
-        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
-          <use xlink:href="#spectrum-icon-18-Alert" />
-        </svg>
-        <div class="spectrum-InLineAlert-header">negative in-line alert header</div>
+        <div class="spectrum-InLineAlert-header">
+          Negative in-line alert header
+          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-icon-18-Alert" />
+          </svg>
+        </div>
         <div class="spectrum-InLineAlert-content">This is an alert.</div>
       </div>
   - id: inlinealert-closable
@@ -54,10 +62,11 @@ examples:
     description: An in-line alert with a close button in the footer. Combine this strategy with any variant.
     markup: |
       <div class="spectrum-InLineAlert spectrum-InLineAlert--negative">
-        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
-          <use xlink:href="#spectrum-icon-18-Alert" />
-        </svg>
-        <div class="spectrum-InLineAlert-header">Incorrect Payment Information - Error</div>
+        <div class="spectrum-InLineAlert-header">Incorrect Payment Information - Error
+          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-icon-18-Alert" />
+          </svg>
+        </div>
         <div class="spectrum-InLineAlert-content">This is an alert.</div>
         <div class="spectrum-InLineAlert-footer">
           <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary"><span class="spectrum-Button-label">Ok</span></button>