- No frame

- Added a bunch of todos to be picked up
reearth · Aug 31, 2023 · 548ed4f · 548ed4f
1 parent 9668e21
commit 548ed4f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 30 deletions.
diff --git a/web/src/beta/components/Slider/index.stories.tsx b/web/src/beta/components/Slider/index.stories.tsx
@@ -27,8 +27,8 @@ export const Default: Story = (args: Props) => {
         <Slider {...args} onChange={handleChange} />
       </div>
       <div>
-        <Text size="footnote">With frame</Text>
-        <Slider {...args} onChange={handleChange} frame />
+        <Text size="footnote">Double Max</Text>
+        <Slider {...args} max={2 * args.max} onChange={handleChange} />
       </div>
       <div>
         <Text size="footnote">Disabled</Text>
@@ -43,7 +43,6 @@ Default.args = {
   min: 0,
   max: 100,
   step: 1,
-  frame: false,
 };
 
 const Wrapper = styled.div`

diff --git a/web/src/beta/components/Slider/index.tsx b/web/src/beta/components/Slider/index.tsx
@@ -1,39 +1,22 @@
 import RCSlider from "rc-slider";
 import React, { ComponentProps } from "react";
 
-import { styled, css } from "@reearth/services/theme";
+import { styled } from "@reearth/services/theme";
 
 import "rc-slider/assets/index.css";
 
 export type Props = {
   min: number;
   max: number;
-  frame?: boolean;
 } & Omit<ComponentProps<typeof RCSlider>, "defaultValue">;
 
-const Slider: React.FC<Props> = ({ frame = false, ...props }) => (
-  <Wrapper frame={frame}>
-    <StyledSlider {...props} />
-  </Wrapper>
-);
-
-const Wrapper = styled.div<{ frame: boolean }>`
-  display: flex;
-  align-items: center;
-  border: ${({ frame, theme }) => (frame ? `solid 1px ${theme.outline.main}` : "none")};
-  border-radius: 3px;
-  background: ${({ frame, theme }) => (frame ? theme.bg[1] : "transparent")};
-  width: 100%;
-  flex: 1;
-  box-sizing: border-box;
-  ${({ frame }) =>
-    frame &&
-    css`
-      padding: 6px 12px;
-      margin-right: 5px;
-    `};
-`;
+// TODO: Show value on hover as well as on drag
+const Slider: React.FC<Props> = ({ ...props }) => <StyledSlider {...props} />;
 
+// TODO: Update colors as per design
+// TODO: Add shadow background in the empty bar
+// TODO: Update height as per design
+// TODO: Fixed disabled state with opacity changes
 const StyledSlider = styled(RCSlider)`
   .rc-slider-handle {
     background-color: ${({ theme }) => theme.bg[2]};

diff --git a/web/src/beta/components/fields/SliderField/index.stories.tsx b/web/src/beta/components/fields/SliderField/index.stories.tsx
@@ -27,11 +27,10 @@ export const Default: Story = (args: Props) => {
       <div>
         <SliderField
           {...args}
-          name="With Frame"
+          name="Inverse of above"
           value={args.max - (args?.value || 0)}
-          description={"Invesere of above but controls are also opposite"}
+          description={undefined}
           onChange={handleChange}
-          frame
         />
       </div>
       <div>