fix: Change system's useProps order in built-in components

So user defined styles can consistently override system styles.
ariakit · Apr 17, 2019 · e679024 · e679024
1 parent c7a8c9f
commit e679024
Show file tree

Hide file tree

Showing 58 changed files with 147 additions and 147 deletions.
diff --git a/packages/reakit-system-bootstrap/src/Box.ts b/packages/reakit-system-bootstrap/src/Box.ts
@@ -9,16 +9,16 @@ export type BootstrapBoxOptions = PaletteBoxOptions;
 
 export function useBoxProps(
   { unstable_system }: BootstrapBoxOptions,
-  { className, ...htmlProps }: BoxProps = {}
-) {
+  htmlProps: BoxProps = {}
+): BoxProps {
   const { style } = usePaletteBoxProps({ unstable_system });
 
-  const box = css`
+  const className = css`
     box-sizing: border-box;
     font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
       Roboto, "Helvetica Neue", Arial, sans-serif;
     ${style as any}
   `;
 
-  return { ...htmlProps, className: cx(box, className) };
+  return { ...htmlProps, className: cx(className, htmlProps.className) };
 }
diff --git a/packages/reakit-system-bootstrap/src/Button.ts b/packages/reakit-system-bootstrap/src/Button.ts
@@ -16,8 +16,8 @@ export function useButtonOptions({
 
 export function useButtonProps(
   { unstable_system }: BootstrapButtonOptions,
-  { className, ...htmlProps }: ButtonProps = {}
-) {
+  htmlProps: ButtonProps = {}
+): ButtonProps {
   const {
     style: { color, backgroundColor, borderColor = "transparent" }
   } = usePaletteBoxProps({ unstable_system });
@@ -29,7 +29,7 @@ export function useButtonProps(
   const hoverColor = useContrast(hoverBackgroundColor);
   const activeColor = useContrast(activeBackgroundColor);
 
-  const button = css`
+  const className = css`
     display: inline-block;
     font-weight: 400;
     text-align: center;
@@ -62,5 +62,5 @@ export function useButtonProps(
     }
   `;
 
-  return { ...htmlProps, className: cx(className, button) };
+  return { ...htmlProps, className: cx(className, htmlProps.className) };
 }
diff --git a/packages/reakit-system-bootstrap/src/Dialog.ts b/packages/reakit-system-bootstrap/src/Dialog.ts
@@ -24,8 +24,8 @@ export function useDialogOptions({
 
 export function useDialogProps(
   { unstable_system }: BootstrapDialogOptions,
-  { className, ...htmlProps }: DialogProps = {}
-) {
+  htmlProps: DialogProps = {}
+): DialogProps {
   const {
     style: { color, backgroundColor }
   } = usePaletteBoxProps({ unstable_system });
@@ -35,7 +35,7 @@ export function useDialogProps(
   const borderColor = useFade(foreground, 0.75);
   const boxShadowColor = useFade(primaryColor || color || foreground, 0.5);
 
-  const dialog = css`
+  const className = css`
     position: fixed;
     top: 28px;
     left: 50%;
@@ -52,19 +52,19 @@ export function useDialogProps(
     }
   `;
 
-  return { ...htmlProps, className: cx(className, dialog) };
+  return { ...htmlProps, className: cx(className, htmlProps.className) };
 }
 
 export type BootstrapDialogBackdropOptions = BootstrapBoxOptions &
   DialogBackdropOptions;
 
 export function useDialogBackdropProps(
   _: BootstrapDialogBackdropOptions,
-  { className, ...htmlProps }: DialogBackdropProps = {}
-) {
-  const dialogBackdrop = css`
+  htmlProps: DialogBackdropProps = {}
+): DialogBackdropProps {
+  const className = css`
     background-color: rgba(0, 0, 0, 0.5);
   `;
 
-  return { ...htmlProps, className: cx(className, dialogBackdrop) };
+  return { ...htmlProps, className: cx(className, htmlProps.className) };
 }
diff --git a/packages/reakit-system-bootstrap/src/Form.ts b/packages/reakit-system-bootstrap/src/Form.ts
@@ -29,15 +29,15 @@ export type BootstrapFormOptions = BootstrapBoxOptions & unstable_FormOptions;
 
 export function useFormProps(
   _: BootstrapFormOptions,
-  { className, ...htmlProps }: unstable_FormProps = {}
-) {
-  const form = css`
+  htmlProps: unstable_FormProps = {}
+): unstable_FormProps {
+  const className = css`
     > *:not(:first-child) {
       margin-top: 1rem;
     }
   `;
 
-  return { ...htmlProps, className: cx(className, form) };
+  return { ...htmlProps, className: cx(className, htmlProps.className) };
 }
 
 export type BootstrapFormInputOptions = BootstrapBoxOptions &
@@ -63,8 +63,8 @@ export function useFormInputOptions({
 
 export function useFormInputProps(
   { unstable_system }: BootstrapFormInputOptions,
-  { className, ...htmlProps }: unstable_FormInputProps = {}
-) {
+  htmlProps: unstable_FormInputProps = {}
+): unstable_FormInputProps {
   const {
     style: { backgroundColor, borderColor: originalBorderColor }
   } = usePaletteBoxProps({ unstable_system });
@@ -75,7 +75,7 @@ export function useFormInputProps(
   const borderColor = useFade(foreground, 0.75);
   const focusBorderColor = useLighten(primary, 0.4);
 
-  const formInput = css`
+  const className = css`
     display: block;
     width: 100%;
     border-radius: 0.2rem;
@@ -90,7 +90,7 @@ export function useFormInputProps(
     }
   `;
 
-  return { ...htmlProps, className: cx(className, formInput) };
+  return { ...htmlProps, className: cx(className, htmlProps.className) };
 }
 
 export type BootstrapFormMessageOptions = BootstrapBoxOptions &
@@ -112,24 +112,24 @@ export function useFormMessageOptions({
 
 export function useFormMessageProps(
   _: BootstrapFormMessageOptions,
-  { className, ...htmlProps }: unstable_FormMessageProps = {}
-) {
-  const formMessage = css`
+  htmlProps: unstable_FormMessageProps = {}
+): unstable_FormMessageProps {
+  const className = css`
     font-size: 0.8em;
     margin-top: 0.5rem !important;
   `;
 
-  return { ...htmlProps, className: cx(className, formMessage) };
+  return { ...htmlProps, className: cx(className, htmlProps.className) };
 }
 
 export type BootstrapFormLabelOptions = BootstrapBoxOptions &
   unstable_FormLabelOptions<any, any>;
 
 export function useFormLabelProps(
   _: BootstrapFormLabelOptions,
-  { className, ...htmlProps }: unstable_FormLabelProps = {}
-) {
-  const formLabel = css`
+  htmlProps: unstable_FormLabelProps = {}
+): unstable_FormLabelProps {
+  const className = css`
     display: block;
     margin: 0 0 0.5rem 0 !important;
 
@@ -140,7 +140,7 @@ export function useFormLabelProps(
     }
   `;
 
-  return { ...htmlProps, className: cx(className, formLabel) };
+  return { ...htmlProps, className: cx(className, htmlProps.className) };
 }
 
 export type BootstrapFormGroupOptions = BootstrapBoxOptions &
@@ -166,8 +166,8 @@ export function useFormGroupOptions({
 
 export function useFormGroupProps(
   { unstable_system }: BootstrapFormGroupOptions,
-  { className, ...htmlProps }: unstable_FormGroupProps = {}
-) {
+  htmlProps: unstable_FormGroupProps = {}
+): unstable_FormGroupProps {
   const {
     style: { backgroundColor, borderColor: originalBorderColor }
   } = usePaletteBoxProps({ unstable_system });
@@ -176,7 +176,7 @@ export function useFormGroupProps(
   const color = useLighten(foreground, 0.3);
   const borderColor = useFade(foreground, 0.75);
 
-  const formGroup = css`
+  const className = css`
     display: block;
     color: ${color};
     border: 1px solid ${originalBorderColor || borderColor};
@@ -187,7 +187,7 @@ export function useFormGroupProps(
     }
   `;
 
-  return { ...htmlProps, className: cx(className, formGroup) };
+  return { ...htmlProps, className: cx(className, htmlProps.className) };
 }
 
 export type BootstrapFormRemoveButtonOptions = BootstrapBoxOptions &

diff --git a/packages/reakit-system-bootstrap/src/Group.ts b/packages/reakit-system-bootstrap/src/Group.ts
@@ -6,9 +6,9 @@ export type BootstrapGroupOptions = BootstrapBoxOptions & GroupOptions;
 
 export function useGroupProps(
   _: BootstrapGroupOptions,
-  { className, ...htmlProps }: GroupProps = {}
-) {
-  const group = css`
+  htmlProps: GroupProps = {}
+): GroupProps {
+  const className = css`
     display: flex;
 
     & > :not(:first-child) {
@@ -32,5 +32,5 @@ export function useGroupProps(
     }
   `;
 
-  return { ...htmlProps, className: cx(className, group) };
+  return { ...htmlProps, className: cx(className, htmlProps.className) };
 }
diff --git a/packages/reakit-system-bootstrap/src/Hidden.ts b/packages/reakit-system-bootstrap/src/Hidden.ts
@@ -7,7 +7,7 @@ export type BootstrapHiddenOptions = BootstrapBoxOptions & HiddenOptions;
 export function useHiddenProps(
   options: BootstrapHiddenOptions,
   htmlProps: HiddenProps = {}
-) {
+): HiddenProps {
   return mergeProps(
     {
       style: options.visible ? {} : { display: "none" }

diff --git a/packages/reakit-system-bootstrap/src/Menu.tsx b/packages/reakit-system-bootstrap/src/Menu.tsx
@@ -25,11 +25,11 @@ export type BootstrapStaticMenuOptions = BootstrapBoxOptions &
 
 export function useStaticMenuProps(
   options: BootstrapStaticMenuOptions,
-  { className, ...htmlProps }: StaticMenuProps = {}
-) {
+  htmlProps: StaticMenuProps = {}
+): StaticMenuProps {
   const isHorizontal = options.orientation === "horizontal";
 
-  const staticMenu = css`
+  const className = css`
     display: flex;
     flex-direction: ${isHorizontal ? "row" : "column"};
     white-space: nowrap;
@@ -44,22 +44,22 @@ export function useStaticMenuProps(
     }
   `;
 
-  return { ...htmlProps, className: cx(className, staticMenu) };
+  return { ...htmlProps, className: cx(className, htmlProps.className) };
 }
 
 export type BootstrapMenuItemOptions = BootstrapBoxOptions & MenuItemOptions;
 
 export function useMenuItemProps(
   { unstable_system, ...options }: BootstrapMenuItemOptions,
-  { className, ...htmlProps }: MenuItemProps = {}
-) {
+  htmlProps: MenuItemProps = {}
+): MenuItemProps {
   const foreground = usePalette("foreground") || "black";
   const primary = usePalette("primary") || "blue";
   const primaryContrast = useContrast(primary);
   const darkPrimary = useDarken(primary, 0.2);
   const isHorizontal = options.orientation === "horizontal";
 
-  const menuItem = css`
+  const className = css`
     &&& {
       line-height: 1.5;
       padding: 0 ${isHorizontal ? "0.5em" : "1.5em"};
@@ -86,7 +86,7 @@ export function useMenuItemProps(
     }
   `;
 
-  return { ...htmlProps, className: cx(className, menuItem) };
+  return { ...htmlProps, className: cx(className, htmlProps.className) };
 }
 
 export type BootstrapMenuOptions = BootstrapBoxOptions & MenuOptions;
@@ -103,9 +103,9 @@ export function useMenuOptions({
 
 export function useMenuProps(
   _: BootstrapMenuOptions,
-  { className, ...htmlProps }: MenuProps = {}
-) {
-  const menu = css`
+  htmlProps: MenuProps = {}
+): MenuProps {
+  const className = css`
     display: flex;
     border-radius: 0;
 
@@ -114,16 +114,16 @@ export function useMenuProps(
     }
   `;
 
-  return { ...htmlProps, className: cx(className, menu) };
+  return { ...htmlProps, className: cx(className, htmlProps.className) };
 }
 
 export type BootstrapMenuDisclosureOptions = BootstrapBoxOptions &
   MenuDisclosureOptions;
 
 export function useMenuDisclosureProps(
   options: BootstrapMenuDisclosureOptions,
-  { className, children, ...htmlProps }: MenuDisclosureProps = {}
-) {
+  { children, ...htmlProps }: MenuDisclosureProps = {}
+): MenuDisclosureProps {
   const dir = options.placement
     ? (options.placement.split("-")[0] as "top" | "bottom" | "right" | "left")
     : undefined;
@@ -153,7 +153,7 @@ export function useMenuDisclosureProps(
       }[dir]
     : null;
 
-  const menuDisclosure = css`
+  const className = css`
     position: relative;
 
     [role="menu"] > & {
@@ -201,7 +201,7 @@ export function useMenuDisclosureProps(
           {svg}
         </>
       ),
-    className: cx(className, menuDisclosure)
+    className: cx(className, htmlProps.className)
   };
 }
 
@@ -210,9 +210,9 @@ export type BootstrapMenuItemCheckboxOptions = BootstrapBoxOptions &
 
 export function useMenuItemCheckboxProps(
   _: BootstrapMenuItemCheckboxOptions,
-  { className, ...htmlProps }: MenuItemCheckboxProps = {}
-) {
-  const menuItemCheckbox = css`
+  htmlProps: MenuItemCheckboxProps = {}
+): MenuItemCheckboxProps {
+  const className = css`
     position: relative;
     outline: 0;
 
@@ -228,17 +228,17 @@ export function useMenuItemCheckboxProps(
     }
   `;
 
-  return { ...htmlProps, className: cx(className, menuItemCheckbox) };
+  return { ...htmlProps, className: cx(className, htmlProps.className) };
 }
 
 export type BootstrapMenuItemRadioOptions = BootstrapBoxOptions &
   MenuItemRadioOptions;
 
 export function useMenuItemRadioProps(
   _: BootstrapMenuItemRadioOptions,
-  { className, ...htmlProps }: MenuItemRadioProps = {}
-) {
-  const menuItemRadio = css`
+  htmlProps: MenuItemRadioProps = {}
+): MenuItemRadioProps {
+  const className = css`
     position: relative;
     outline: 0;
 
@@ -255,5 +255,5 @@ export function useMenuItemRadioProps(
     }
   `;
 
-  return { ...htmlProps, className: cx(className, menuItemRadio) };
+  return { ...htmlProps, className: cx(className, htmlProps.className) };
 }