feat(base html components): renamed the internally used base styled h…

…tml elements, and exported them This helps remove ambiguity as "Button" (the html element) no longer needs to be aliased on import `import { Button as ButtonElement } from '../htmlElements.ts';` and it's all in all less confusing. fix #388
Headstorm · May 13, 2022 · d80004b · d80004b
1 parent 9f713a6
commit d80004b
Show file tree

Hide file tree

Showing 17 changed files with 125 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -88,7 +88,7 @@ In this hello world example, you can see the Card component has preset styling f
 ```
 // /foundry-react-ui/src/components/Card/Card.tsx
 
-export const CardContainer = styled(Div)`
+export const CardContainer = styled(StyledBaseDiv)`
   ${({ elevation }: { elevation: number }) => {
     const { grayXlight, background, shadow } = useColors();
     return `
@@ -106,7 +106,7 @@ export const CardContainer = styled(Div)`
 
 ...
 
-export const Body = styled(Div)`
+export const Body = styled(StyledBaseDiv)`
   ${() => {
     const { grayMedium } = useColors();
     return `
@@ -235,8 +235,8 @@ const MyContainer = styled.div`styles`;
 
 // do this
 import styled from 'styled-components';
-import { Div } from 'path/to/htmlElements';
-const MyContainer = styled(Div)`styles here`;
+import { StyledBaseDiv } from 'path/to/htmlElements';
+const MyContainer = styled(StyledBaseDiv)`styles here`;
 ```
 
 ### Passing Refs to Children Elements

diff --git a/src/components/Appendix/Appendix.stories.tsx b/src/components/Appendix/Appendix.stories.tsx
@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import { Story, Meta } from '@storybook/react';
 
-import { Div } from '../../htmlElements';
+import { StyledBaseDiv } from '../../htmlElements';
 
-const DocContainer = styled(Div)`
+const DocContainer = styled(StyledBaseDiv)`
   justify-self: flex-start;
   padding: 2rem;
   max-width: 60rem;

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -9,7 +9,7 @@ import { useAnalytics, useTheme } from '../../context';
 import variants from '../../enums/variants';
 import Skeleton from '../Skeleton/Skeleton';
 import Progress from '../Progress/Progress';
-import { Div, Button as ButtonElement } from '../../htmlElements';
+import { StyledBaseDiv, StyledBaseButton } from '../../htmlElements';
 import {
   getFontColorFromVariant,
   getBackgroundColorFromVariant,
@@ -140,7 +140,7 @@ export const ButtonContainer: string & StyledComponentBase<any, {}, ButtonContai
   }}
 `;
 
-const IconContainer = styled(Div)`
+const IconContainer = styled(StyledBaseDiv)`
   vertical-align: middle;
 `;
 
@@ -213,7 +213,7 @@ const Button = ({
 
   // get everything we expose + anything consumer wants to send to container
   const mergedContainerProps = {
-    as: ButtonElement,
+    a: StyledBaseButton,
     id,
     isLoading,
     onClick: (e: any) => handleEventWithAnalytics('Button', onClick, 'onClick', e, containerProps),

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { darken } from 'polished';
 
 import timings from '../../enums/timings';
-import { Div } from '../../htmlElements';
+import { StyledBaseDiv } from '../../htmlElements';
 import { SubcomponentPropsType, StyledSubcomponentType } from '../commonTypes';
 import { useAnalytics, useTheme } from '../../context';
 import { getShadowStyle } from '../../utils/styles';
@@ -20,7 +20,7 @@ export type CardContainerProps = {
   isDefaultOnClick: boolean;
 };
 
-export const CardContainer = styled(Div)`
+export const CardContainer = styled(StyledBaseDiv)`
   ${({ elevation, feedbackType, isDefaultOnClick }: CardContainerProps) => {
     const { colors } = useTheme();
 
@@ -55,7 +55,7 @@ export const CardContainer = styled(Div)`
   }}
 `;
 
-export const Header = styled(Div)`
+export const Header = styled(StyledBaseDiv)`
   ${({ hasBody, hasFooter }) => {
     const { colors } = useTheme();
 
@@ -72,7 +72,7 @@ export const NoPaddingHeader = styled(Header)`
   padding: 0;
 `;
 
-export const Body = styled(Div)`
+export const Body = styled(StyledBaseDiv)`
   ${() => {
     const { colors } = useTheme();
 
@@ -83,7 +83,7 @@ export const Body = styled(Div)`
   }}
 `;
 
-export const Footer = styled(Div)`
+export const Footer = styled(StyledBaseDiv)`
   ${() => {
     const { colors } = useTheme();
 

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -6,7 +6,7 @@ import { mdiCheck, mdiCheckboxBlank, mdiClose, mdiMinus } from '@mdi/js';
 import { darken } from 'polished';
 import { useCheckbox } from 'react-aria';
 import { useToggleState } from '@react-stately/toggle';
-import { Div, Input as InputElement, Label as LabelElement } from '../../htmlElements';
+import { StyledBaseDiv, StyledBaseInput, StyledBaseLabel } from '../../htmlElements';
 import { SubcomponentPropsType, StyledSubcomponentType } from '../commonTypes';
 import { useAnalytics, useTheme } from '../../context';
 import variants from '../../enums/variants';
@@ -16,7 +16,7 @@ import { mergeRefs } from '../../utils/refs';
 
 // Hide checkbox visually but remain accessible to screen readers.
 // Source: https://polished.js.org/docs/#hidevisually
-export const Input = styled(InputElement).attrs({ type: 'checkbox' })`
+export const Input = styled(StyledBaseInput).attrs({ type: 'checkbox' })`
   border: 0;
   clip: rect(0 0 0 0);
   clippath: inset(50%);
@@ -29,7 +29,7 @@ export const Input = styled(InputElement).attrs({ type: 'checkbox' })`
   width: 1px;
 `;
 
-export const Label = styled(LabelElement)`
+export const Label = styled(StyledBaseLabel)`
   ${({ disabled }) => {
     return `
       display: flex;
@@ -43,7 +43,7 @@ export const Label = styled(LabelElement)`
   }}
 `;
 
-export const Box = styled(Div)`
+export const Box = styled(StyledBaseDiv)`
   ${({ variant, checked, checkboxType }) => {
     const { colors } = useTheme();
     let color = colors.grayLight;

diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { useSeparator } from 'react-aria';
-import { Div, HR } from '../../htmlElements';
+import { StyledBaseDiv, StyledBaseHR } from '../../htmlElements';
 import { SubcomponentPropsType, StyledSubcomponentType } from '../commonTypes';
 import { useTheme } from '../../context';
 
-export const DefaultDivider = styled(HR)`
+export const DefaultDivider = styled(StyledBaseHR)`
   ${({ width = '90%', height = '1px' }: { width: string; height: string }) => {
     const { colors } = useTheme();
     return `
@@ -18,7 +18,7 @@ export const DefaultDivider = styled(HR)`
   }}
 `;
 
-export const DefaultDividerContainer = styled(Div)`
+export const DefaultDividerContainer = styled(StyledBaseDiv)`
   display: flex;
   justify-content: center;
   margin-top: 10px;

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -10,7 +10,7 @@ import { useAnalytics, useTheme } from '../../context';
 import Button from '../Button/Button';
 import variants from '../../enums/variants';
 import timings from '../../enums/timings';
-import { Div, Span, Input } from '../../htmlElements';
+import { StyledBaseDiv, StyledBaseSpan, StyledBaseInput } from '../../htmlElements';
 import Tag, { TagProps } from '../Tag/Tag';
 import { getFontColorFromVariant, getBackgroundColorFromVariant } from '../../utils/color';
 import { SubcomponentPropsType, StyledSubcomponentType } from '../commonTypes';
@@ -33,7 +33,7 @@ type UsefulDropdownState = {
   isHidden?: boolean;
 };
 
-const Container = styled(Div)`
+const Container = styled(StyledBaseDiv)`
   ${({ elevation, isOpen }) => {
     const { colors } = useTheme();
     return `
@@ -75,23 +75,23 @@ export const ValueContainer = styled(Button.Container)`
 `;
 
 // TODO: Don't use explicit height here - this div is ending up larger than the icon otherwise
-export const CloseIconContainer = styled(Div)`
+export const CloseIconContainer = styled(StyledBaseDiv)`
   height: 1.125em;
   z-index: 1;
 `;
 
-export const ArrowIconContainer = styled(Div)`
+export const ArrowIconContainer = styled(StyledBaseDiv)`
   height: 1.125em;
   z-index: 1;
   pointer-events: none;
 `;
 
-const ValueItem = styled(Div)`
+const ValueItem = styled(StyledBaseDiv)`
   width: 100%;
   text-align: left;
 `;
 
-const OptionsContainer = styled(Div)`
+const OptionsContainer = styled(StyledBaseDiv)`
   ${({
     color,
     variant,
@@ -136,7 +136,7 @@ const HiddenOptionsContainer = styled(OptionsContainer)`
   }}
 `;
 
-const OptionItem = styled(Div)`
+const OptionItem = styled(StyledBaseDiv)`
   ${({ selected, color, variant }: UsefulDropdownState) => {
     const { colors } = useTheme();
     const unselectedBgColor = getBackgroundColorFromVariant(variant, color);
@@ -170,7 +170,7 @@ const OptionItem = styled(Div)`
   }}
 `;
 
-const CheckContainer = styled(Div)`
+const CheckContainer = styled(StyledBaseDiv)`
   ${({ color }: UsefulDropdownState) => {
     const { colors } = useTheme();
     const backgroundColor = getLuminance(color) > 0.5 ? shade(0.125, color) : tint(0.5, color);
@@ -185,7 +185,7 @@ const CheckContainer = styled(Div)`
   }}
 `;
 
-const PlaceholderContainer = styled(Div)`
+const PlaceholderContainer = styled(StyledBaseDiv)`
   position: absolute;
   opacity: 0.8;
 `;
@@ -215,9 +215,9 @@ const ValueItemTagContainer = styled(Tag.Container)`
   `}
 `;
 
-const StyledSearchContainer = styled(Div)``;
+const StyledSearchContainer = styled(StyledBaseDiv)``;
 
-const StyledSearchInput = styled(Input)`
+const StyledSearchInput = styled(StyledBaseInput)`
   all: inherit;
 `;
 
@@ -949,7 +949,7 @@ const Dropdown = ({
                       {optionsHash[option.id].isSelected && <Icon path={mdiCheck} size="1em" />}
                     </StyledCheckContainer>
                   )}
-                  <Span>{option.optionValue}</Span>
+                  <StyledBaseSpan>{option.optionValue}</StyledBaseSpan>
                 </StyledOptionItem>
               )}
             />
@@ -981,7 +981,7 @@ const Dropdown = ({
                       {optionsHash[option.id].isSelected && <Icon path={mdiCheck} size="1em" />}
                     </StyledCheckContainer>
                   )}
-                  <Span>{option.optionValue}</Span>
+                  <StyledBaseSpan>{option.optionValue}</StyledBaseSpan>
                 </StyledOptionItem>
               ))}
             </InternalOptionsContainer>

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
@@ -3,11 +3,11 @@ import styled from 'styled-components';
 import Icon from '@mdi/react';
 import { mdiCheckBold, mdiAsterisk } from '@mdi/js';
 import { useLabel } from 'react-aria';
-import { Div, Label as LabelElement, Span } from '../../htmlElements';
+import { StyledBaseDiv, StyledBaseLabel, StyledBaseSpan } from '../../htmlElements';
 import { SubcomponentPropsType, StyledSubcomponentType } from '../commonTypes';
 import { useTheme } from '../../context';
 
-export const DefaultStyledLabel = styled(LabelElement)`
+export const DefaultStyledLabel = styled(StyledBaseLabel)`
   ${({ color }: { color: string }) => {
     const { colors } = useTheme();
     const labelColor = color || colors.grayLight;
@@ -20,11 +20,11 @@ export const DefaultStyledLabel = styled(LabelElement)`
   }}
 `;
 
-export const DefaultStyledTextContainer = styled(Div)``;
+export const DefaultStyledTextContainer = styled(StyledBaseDiv)``;
 
-export const DefaultStyledLabelContainer = styled(Div)``;
+export const DefaultStyledLabelContainer = styled(StyledBaseDiv)``;
 
-const DefaultStyledIconContainer = styled(Span)`
+const DefaultStyledIconContainer = styled(StyledBaseSpan)`
   display: inline-flex;
   margin-left: 0.25em;
 `;

diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
@@ -1,5 +1,5 @@
 import styled, { keyframes, css } from 'styled-components';
-import { Div } from '../../htmlElements';
+import { StyledBaseDiv } from '../../htmlElements';
 
 /* Keyframes for the loading bar gradient */
 export const movingGradient = keyframes`
@@ -14,7 +14,7 @@ export const animation = css`
 
 /* Styled div that represents the scroll bar
    Note: The border-radius 9999px is used to create a pill shape */
-const Progress = styled(Div)`
+const Progress = styled(StyledBaseDiv)`
   ${() => css`
     background: linear-gradient(
         45deg,

diff --git a/src/components/RangeSlider/RangeSlider.tsx b/src/components/RangeSlider/RangeSlider.tsx
@@ -21,7 +21,7 @@ import {
   DomainLabelProps,
 } from './types';
 import { useAnalytics, useTheme } from '../../context';
-import { Div } from '../../htmlElements';
+import { StyledBaseDiv } from '../../htmlElements';
 
 export const Container = styled.div`
   ${({ showDomainLabels, hasHandleLabels, disabled, beingDragged = false }: ContainerProps) => `
@@ -162,7 +162,7 @@ export const DomainLabel = styled.div`
   }}
 `;
 
-export const Marker = styled(Div)`
+export const Marker = styled(StyledBaseDiv)`
   ${({ sliderPosition = 0 }) => {
     const { colors } = useTheme();
     return `
@@ -177,7 +177,7 @@ export const Marker = styled(Div)`
     `;
   }}
 `;
-export const MarkerLabel = styled(Div)`
+export const MarkerLabel = styled(StyledBaseDiv)`
   ${({ color }) => {
     const { colors } = useTheme();
     return `

diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx
@@ -4,7 +4,7 @@ import styled, { keyframes, css } from 'styled-components';
 
 import { useTheme } from '../../context';
 import { SubcomponentPropsType, StyledSubcomponentType } from '../commonTypes';
-import { Div } from '../../htmlElements';
+import { StyledBaseDiv } from '../../htmlElements';
 
 export const movingGradient = keyframes`
   0% { background-position: 0vw bottom; }
@@ -15,7 +15,7 @@ export const animation = css`
   ${movingGradient} 2s linear infinite;
 `;
 
-const SkeletonShimmer = styled(Div)`
+const SkeletonShimmer = styled(StyledBaseDiv)`
   ${({ isLoading, color }) => {
     const rgb = parseToRgb(color);
 
@@ -48,7 +48,7 @@ const SkeletonShimmer = styled(Div)`
   }}
 `;
 
-const SkeletonContainer = styled(Div)`
+const SkeletonContainer = styled(StyledBaseDiv)`
   ${({ isLoading }: { isLoading: boolean }) => `
   display: block;