update Banner, Field & ScrollBox

ensdomains · Jan 16, 2023 · 3f43407 · 3f43407
1 parent 9726997
commit 3f43407
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 11 deletions.
diff --git a/components/src/components/atoms/Banner/Banner.tsx b/components/src/components/atoms/Banner/Banner.tsx
@@ -13,7 +13,7 @@ type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
 
 type BaseProps = {
   /** The message inside the banner */
-  message: string
+  message: React.ReactNode
   /** The title for the banner */
   title?: string
   as?: 'a'

diff --git a/components/src/components/atoms/Field/Field.tsx b/components/src/components/atoms/Field/Field.tsx
@@ -47,8 +47,9 @@ type Props = FieldBaseProps & {
 
 const Label = styled(Typography)<{ $disabled?: boolean; $readOnly?: boolean }>(
   ({ $disabled, $readOnly }) => css`
-    display: flex;
-    flex: 1;
+    display: inline-block;
+    flex: 66%;
+    overflow: hidden;
     cursor: pointer;
 
     ${$readOnly &&
@@ -64,11 +65,18 @@ const Label = styled(Typography)<{ $disabled?: boolean; $readOnly?: boolean }>(
   `,
 )
 
+const SecondaryLabel = styled(Typography)(
+  () => css`
+    flex: 33%;
+  `,
+)
+
 const LabelContentContainer = styled.div<{ $inline?: boolean }>(
   ({ theme, $inline }) => css`
     display: flex;
     align-items: center;
     padding: 0 ${$inline ? '0' : theme.space['2']};
+    overflow: hidden;
   `,
 )
 
@@ -108,6 +116,7 @@ const LabelContent = ({
         $readOnly={readOnly}
         asProp="label"
         color="greyPrimary"
+        ellipsis
         fontVariant="bodyBold"
         {...ids.label}
       >
@@ -120,9 +129,9 @@ const LabelContent = ({
         )}
       </Label>
       {labelSecondary && (
-        <Typography color="greyPrimary" fontVariant="extraSmall">
+        <SecondaryLabel color="greyPrimary" ellipsis fontVariant="extraSmall">
           {labelSecondary}
-        </Typography>
+        </SecondaryLabel>
       )}
     </LabelContentContainer>
   )
@@ -133,6 +142,8 @@ const LabelContent = ({
 const Description = styled(Typography)<{ $inline?: boolean }>(
   ({ theme, $inline }) => css`
     padding: 0 ${$inline ? '0' : theme.space['2']};
+    width: 100%;
+    overflow: hidden;
   `,
 )
 
@@ -176,6 +187,7 @@ const DecorativeContent = ({
         {...ids.description}
         color={disabled ? 'greyPrimary' : 'textPrimary'}
         colorScheme={disabled ? 'secondary' : 'primary'}
+        ellipsis
         fontVariant="small"
       >
         {description}
@@ -192,12 +204,14 @@ interface ContainerProps {
 
 const Container = styled.div<ContainerProps>(
   ({ theme, $inline, $width, $reverse }) => css`
+    position: relative;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: 'normal';
     gap: ${theme.space['2']};
     width: ${theme.space[$width]};
+    overflow: hidden;
 
     ${$inline &&
     css`
@@ -213,6 +227,7 @@ const ContainerInner = styled.div(
     flex-direction: column;
     gap: ${theme.space[1]};
     flex: 1;
+    overflow: hidden;
   `,
 )
 

diff --git a/components/src/components/atoms/ScrollBox/ScrollBox.tsx b/components/src/components/atoms/ScrollBox/ScrollBox.tsx
@@ -6,7 +6,7 @@ const StyledScrollBox = styled.div<{ $showTop: boolean; $showBottom: boolean }>(
     overflow: auto;
     position: relative;
 
-    border-color: hsla(${theme.colors.raw.greySurface} / 1);
+    border-color: ${theme.colors.greyLight};
     transition: border-color 0.15s ease-in-out;
 
     /* stylelint-disable-next-line selector-pseudo-element-no-unknown */
@@ -15,24 +15,41 @@ const StyledScrollBox = styled.div<{ $showTop: boolean; $showBottom: boolean }>(
     }
 
     &::-webkit-scrollbar {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar:vertical {
       width: ${theme.space['1.5']};
       background-color: transparent;
     }
 
-    &::-webkit-scrollbar-thumb {
+    &::-webkit-scrollbar:horizontal {
+      height: ${theme.space['1.5']};
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb:vertical {
       border: none;
       border-radius: ${theme.radii.full};
       border-right-style: inset;
       border-right-width: calc(100vw + 100vh);
       border-color: inherit;
     }
 
+    &::-webkit-scrollbar-thumb:horizontal {
+      border: none;
+      border-radius: ${theme.radii.full};
+      border-bottom-style: inset;
+      border-bottom-width: calc(100vw + 100vh);
+      border-color: inherit;
+    }
+
     &::-webkit-scrollbar-button {
       display: none;
     }
 
     &:hover {
-      border-color: hsla(${theme.colors.raw.greyLight} / 1);
+      border-color: ${theme.colors.greyBright};
     }
 
     &::before,

diff --git a/docs/src/reference/mdx/atoms/Field.docs.mdx b/docs/src/reference/mdx/atoms/Field.docs.mdx
@@ -8,9 +8,23 @@ import { Field } from '@ensdomains/thorin'
 ```
 
 ```tsx live=true expand=true
-<Field description="Description" label="Label" labelSecondary="Secondary">
-  <div style={{ backgroundColor: 'black', height: 20 }} />
-</Field>
+<DeleteMe>
+  <Field
+    description="Descriptionasdfasdfasdfasdfasdfasd"
+    label="Labelasdfasdfasdfasdfasdf"
+    labelSecondary="Secondaryasdfasdfasdfas"
+  >
+    <div style={{ backgroundColor: 'black', height: 20 }} />
+  </Field>
+  <Field
+    description="Descriptionasdfasdfasdfasdfasdf"
+    inline
+    label="Labelasdfasdfasdfasdfasdfasd"
+    labelSecondary="Secondaryasdfasdfasdfasdfasfdasd"
+  >
+    <div style={{ backgroundColor: 'black', width: 20, height: 20 }} />
+  </Field>
+</DeleteMe>
 ```
 
 ## Props