feat(odyssey-react): update Select/NativeSelect padding

okta · May 5, 2022 · 2a68c70 · 2a68c70
1 parent fb33562
commit 2a68c70
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 25 deletions.
diff --git a/packages/odyssey-react/src/components/NativeSelect/NativeSelect.module.scss b/packages/odyssey-react/src/components/NativeSelect/NativeSelect.module.scss
@@ -16,10 +16,11 @@
   max-width: var(--MaxWidth);
   margin-block: var(--MarginBlock);
   margin-inline: var(--MarginInline);
-  padding-block: var(--PaddingBlock);
-  padding-inline-start: var(--PaddingInline);
+  padding-block: calc(var(--PaddingBlock) - var(--BorderWidth));
+  padding-inline-start: calc(var(--PaddingInline) - var(--BorderWidth));
   padding-inline-end: calc(
-    var(--PaddingInline) + var(--IndicatorSize) + var(--PaddingInline)
+    var(--PaddingInline) + var(--IndicatorSize) + var(--PaddingInline) -
+      var(--BorderWidth)
   );
   border-width: var(--BorderWidth);
   border-style: var(--BorderStyle);

diff --git a/packages/odyssey-react/src/components/NativeSelect/NativeSelect.theme.ts b/packages/odyssey-react/src/components/NativeSelect/NativeSelect.theme.ts
@@ -18,25 +18,30 @@ export const theme: ThemeReducer = (theme) => ({
   BorderRadius: theme.BorderRadiusBase,
   BorderStyle: theme.BorderStyleBase,
   BorderWidth: theme.BorderWidthBase,
+  FontFamily: theme.FontFamilyBase,
+  FontSize: theme.FontSizeBody,
+  LineHeight: theme.FontLineHeightUi,
+  MarginBlock: 0,
+  MarginInline: 0,
+  MaxWidth: theme.FontLineLengthMax,
+  PaddingBlock: theme.SpaceScale2,
+  PaddingInline: theme.SpaceScale2,
+  TextColor: theme.ColorTextBody,
+
   DisabledBackgroundColor: theme.ColorBackgroundDisabled,
   DisabledBorderColor: theme.ColorBorderDisabled,
   DisabledTextColor: theme.ColorTextBody,
+
   FocusOutlineColor: theme.FocusOutlineColorPrimary,
   FocusOutlineOffset: theme.FocusOutlineOffsetTight,
   FocusOutlineStyle: theme.FocusOutlineStyle,
   FocusOutlineWidth: theme.FocusOutlineWidthTight,
-  FontFamily: theme.FontFamilyBase,
-  FontSize: theme.FontSizeBody,
+
   HoverFocusBorderColor: theme.ColorPrimaryBase,
+
   IndicatorInsetInlineEnd: theme.SpaceScale1,
   IndicatorSize: "1.1487rem",
+
   InvalidBorderColor: theme.ColorBorderDangerBase,
   InvalidFocusOutlineColor: theme.FocusOutlineColorDanger,
-  LineHeight: theme.FontLineHeightUi,
-  MarginBlock: 0,
-  MarginInline: 0,
-  MaxWidth: theme.FontLineLengthMax,
-  PaddingBlock: theme.SpaceScale1,
-  PaddingInline: theme.SpaceScale1,
-  TextColor: theme.ColorTextBody,
 });
diff --git a/packages/odyssey-react/src/components/Select/Select.module.scss b/packages/odyssey-react/src/components/Select/Select.module.scss
@@ -23,7 +23,7 @@
   margin-block: var(--MarginBlock);
   margin-inline: var(--MarginInline);
   padding-block: calc(var(--PaddingBlock) - var(--BorderWidth));
-  padding-inline: var(--PaddingInline);
+  padding-inline: calc(var(--PaddingInline) - var(--BorderWidth));
   transition-property: border-color, background-color;
   transition-duration: var(--TransitionDuration);
   transition-timing-function: var(--TransitionTimingFunction);

diff --git a/packages/odyssey-react/src/components/Select/Select.theme.ts b/packages/odyssey-react/src/components/Select/Select.theme.ts
@@ -18,9 +18,23 @@ export const theme: ThemeReducer = (theme) => ({
   BorderRadius: theme.BorderRadiusBase,
   BorderStyle: theme.BorderStyleBase,
   BorderWidth: theme.BorderWidthBase,
+  FontFamily: theme.FontFamilyBase,
+  FontSize: theme.FontSizeBody,
+  LineHeight: theme.FontLineHeightUi,
+  MarginBlock: 0,
+  MarginInline: 0,
+  MaxWidth: theme.FontLineLengthMax,
+  PaddingBlock: theme.SpaceScale2,
+  PaddingInline: theme.SpaceScale2,
+  PlaceholderTextColor: theme.ColorTextSub,
+  TextColor: theme.ColorTextBody,
+  TransitionDuration: theme.TransitionDurationBase,
+  TransitionTimingFunction: theme.TransitionTimingBase,
+
   ButtonBackgroundColor: theme.ColorPaletteBlue400,
   ButtonHoverFocusBackgroundColor: theme.ColorPrimaryBase,
   ButtonIndicatorColor: theme.ColorPaletteNeutralWhite,
+
   DisabledBackgroundColor: theme.ColorBackgroundDisabled,
   DisabledBorderColor: theme.ColorBorderDisabled,
   DisabledBorderStyle: theme.BorderStyleBase,
@@ -30,24 +44,16 @@ export const theme: ThemeReducer = (theme) => ({
   DisabledReadonlyBorderColor: theme.ColorBorderDisabled,
   DisabledReadonlyHoverBorderColor: theme.ColorBorderDisabled,
   DisabledTextColor: theme.ColorTextSub,
+
   DismissSize: theme.SpaceScale1,
+
   FocusOutlineColor: theme.FocusOutlineColorPrimary,
   FocusOutlineOffset: theme.FocusOutlineOffsetTight,
   FocusOutlineStyle: theme.FocusOutlineStyle,
   FocusOutlineWidth: theme.FocusOutlineWidthTight,
-  FontFamily: theme.FontFamilyBase,
-  FontSize: theme.FontSizeBody,
+
   HoverFocusBorderColor: theme.ColorBorderPrimaryBase,
+
   InvalidBorderColor: theme.ColorBorderDangerBase,
   InvalidFocusOutlineColor: theme.FocusOutlineColorDanger,
-  LineHeight: theme.FontLineHeightUi,
-  MarginBlock: 0,
-  MarginInline: 0,
-  MaxWidth: theme.FontLineLengthMax,
-  PaddingBlock: theme.SpaceScale1,
-  PaddingInline: theme.SpaceScale2,
-  PlaceholderTextColor: theme.ColorTextSub,
-  TextColor: theme.ColorTextBody,
-  TransitionDuration: theme.TransitionDurationBase,
-  TransitionTimingFunction: theme.TransitionTimingBase,
 });