Apply suggestions from code review

Co-authored-by: Brandy Smith <[email protected]>

Author: OS-martacarlos

core/src/components/divider/divider.scss

@@ -5,8 +5,8 @@
   /**
    * @prop --margin-top: Top margin of the divider
    * @prop --margin-bottom: Bottom margin of the divider
-   * @prop --padding-end: Right margin of the divider
-   * @prop --padding-start: Left padding of the divider
+   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the divider
+   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the divider
    */
   --margin-top: 0px;
   --margin-bottom: 0px;
@@ -18,8 +18,16 @@
   width: 100%;
 
   /* stylelint-disable */
-  padding-right: var(--padding-end);
-  padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  @include ltr() {
+    padding-right: var(--padding-end);
+    padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  }
+
+  @include rtl() {
+    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+    padding-left: var(--padding-end);
+  }
+  /* stylelint-enable */  
 }
 
 :host hr {
@@ -31,7 +39,7 @@
   margin-bottom: var(--margin-bottom);
 
   border: none;
-  border-top: #{globals.$ion-border-size-025} solid #{globals.$ion-border-default};
+  border-top: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-border-default;
 }
 
 // Divider Spacing

core/src/components/divider/divider.tsx

@@ -14,41 +14,33 @@ import { Component, Prop, Host, h } from '@stencil/core';
 export class Divider implements ComponentInterface {
   /**
    * Set to `"xxsmall"` for the smallest spacing.
-   * Set to "xsmall" for a very small spacing.
-   * Set to `"small"` for a small spacing.
-   * Set to "medium" for a medium spacing.
-   * Set to "large" for a large spacing.
+   * Set to "xsmall" for very small spacing.
+   * Set to `"small"` for small spacing.
+   * Set to "medium" for medium spacing.
+   * Set to "large" for large spacing.
    * Set to `"xlarge"` for the largest spacing.
    *
-   * Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+   * Defaults to `"xxsmall"`.
    */
-  @Prop({ reflect: true }) spacing?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+  @Prop({ reflect: true }) spacing?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' = 'xxsmall';
 
   /**
    * If `true`, the divider will have horizontal margins
    * By default, it's `false`
    */
   @Prop() inset?: boolean = false;
 
-  private getSpacing(): string | undefined {
-    const { spacing } = this;
-
-    if (spacing === undefined) {
-      return 'xxsmall';
-    }
-
-    return spacing;
-  }
 
   render() {
+    const { inset, spacing } = this;
     const theme = getIonTheme(this);
-    const spacing = this.getSpacing();
+    
     return (
       <Host
         class={{
           [theme]: true,
-          [`divider-space-${spacing}`]: spacing !== undefined,
-          [`divider-inset`]: this.inset || false,
+          [`divider-spacing-${spacing}`]: spacing !== undefined,
+          [`divider-inset`]: inset,
         }}
       >
         <hr />

core/src/components/divider/test/basic/index.html

@@ -26,7 +26,7 @@
         <div>
           <h3>Default</h3>
           Top
-          <ion-divider ion-divider></ion-divider>
+          <ion-divider></ion-divider>
           Bottom
         </div>
         <div>