fixup! Handle outline styling using box-shadow in a central place

sumup-oss · Jun 3, 2021 · ae2f4b3 · ae2f4b3
1 parent 7083652
commit ae2f4b3
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 6 deletions.
diff --git a/.changeset/hot-cheetahs-press.md b/.changeset/hot-cheetahs-press.md
@@ -1,5 +1,5 @@
 ---
-'@sumup/circuit-ui': minor
+'@sumup/circuit-ui': major
 ---
 
 - Add `size` prop to `Selector`

diff --git a/packages/circuit-ui/components/Selector/Selector.docs.mdx b/packages/circuit-ui/components/Selector/Selector.docs.mdx
@@ -37,7 +37,7 @@ Selector component supports 3 different sizes:
 
 - **mega**, the default size
 - **kilo**, used when there are sizing constraints
-- **flexible**, used for more complex content within selector which may define it's own margins. **flexible** just adds a minimal equal margin on all sides.
+- **flexible**, used for more complex content within selector which may define its own margins. **flexible** just adds a minimal equal margin on all sides.
 
 <Story id="forms-selector--sizes" />
 

diff --git a/packages/circuit-ui/components/Selector/Selector.tsx b/packages/circuit-ui/components/Selector/Selector.tsx
@@ -80,8 +80,6 @@ type LabelElProps = { hasFocus: boolean } & Pick<
   'disabled' | 'noMargin' | 'size' | 'checked'
 >;
 
-const LABEL_BORDER_RADIUS = '8px';
-
 const outlineStyles = ({
   theme,
   checked,
@@ -118,7 +116,7 @@ const baseStyles = ({ theme, checked }: StyleProps & LabelElProps) => css`
   position: relative;
   margin-bottom: ${theme.spacings.mega};
   border: none;
-  border-radius: ${LABEL_BORDER_RADIUS};
+  border-radius: ${theme.borderRadius.tera};
   transition: box-shadow 0.1s ease-in-out;
   ${textMega({ theme })};
 

diff --git a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx
@@ -57,7 +57,7 @@ export interface SelectorGroupProps {
    */
   multiple?: boolean;
   /**
-   * Whether to layout Selectors in a row or a column. Default: 'vertical'.
+   * Whether to layout Selectors in a row or a column. Default: 'horizontal'.
    */
   orientation?: 'vertical' | 'horizontal';
   /**