hidden{bp}Up media query misses 1px math about styled-bootstrap-grid

[ls-sam-leatherdale]

Hi @PetroPavlenko, thanks, that is a better implementation, I didn't focus too closely on the types in my solution. 👍

[ls-sam-leatherdale]

Yep, same issue here with the Down props, it's all off by one. I want this component to only be visible at lg and above.

<Col lg={6} hiddenLgDown>

If I set to hiddenMdDown, it hides it at md, but md - lg is visible.
If I set to hiddenLgDown, then it hides it between md - lg, but also hides it at lg.

The fix would break backwards compatibility so you might need to add new properties instead of changing the new ones, something like hiddenBelowMd or hiddenAboveLg.

[ls-sam-leatherdale]

@julijatrescenko In the meantime, try this styled Col component I used, it will still use your breakpoints:

export type ColProps = {
  /**
   * Hide only > the specified breakpoint, instead of >=.
   */
  hiddenAbove?: string;
  /**
   * Hide only < the specified breakpoint, instead of <=.
   */
  hiddenBelow?: string;
};

const Col = styled(OriginalCol)`
  @media (max-width: ${(props: ColProps) =>
      props.hiddenBelow && `${getBreakpoint(props, props.hiddenBelow) - 1}px`}) {
    display: none;
  }
  @media (min-width: ${(props: ColProps) =>
      props.hiddenAbove && `${getBreakpoint(props, props.hiddenAbove) + 1}px`}) {
    display: none;
  }
`;

export { Col };
const getBreakpoints = (props): { [key: string]: number } => ({
  ...((props.theme &&
    props.theme.styledBootstrapGrid &&
    props.theme.styledBootstrapGrid.breakpoints) ||
    {}),
});
function getBreakpoint(props, bp: string): number {
  return getBreakpoints(props)[bp];
}

You can use it like:

<Col xl={3} hiddenBelow="xl" />

[PetroPavlenko]

I think you can use slightly better typed

import styled from "styled-components";
import { Col as OriginalCol, Breakpoints } from "styled-bootstrap-grid";

type BreakpointsKeys = keyof typeof MediaLabels

const getBreakpoint = (props: any, bp: BreakpointsKeys): number =>
  props?.theme?.styledBootstrapGrid?.breakpoints[bp] || 0;

export const RespCol = styled(OriginalCol)<{ hiddenAbove?: BreakpointsKeys}>`
  ${props => props.hiddenAbove && `
    @media (min-width: ${`${getBreakpoint(props, props.hiddenAbove) + 1}px`}) {
      display: none;
    }
  `}
`;

[PetroPavlenko]

Hi @dragma Looks like in 3.1 doesn't contain PR #57 that help with this. So I cannot pull it from npm. Can you bump version with fix ?