[KLAR-8864] Date picker reflects color mode change (#560)

Author: ievavizg

nordcloud-gnui-8.0.0.tgz

@@ -4,9 +4,9 @@ import { space, SpaceProps } from "styled-system";
 import theme from "../../theme";
 import { LengthUnitSuffix, Unit } from "./types";
 
-type StyledContainerProps = {
+type StyledContainerProps = SpaceProps & {
   width?: string;
-} & SpaceProps;
+};
 
 const StyledContainer = styled.div<StyledContainerProps>`
   box-sizing: border-box;
@@ -29,12 +29,12 @@ export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
   )
 );
 
-type FlexProps = {
+type FlexProps = SpaceProps & {
   alignItems?: string;
   justifyContent?: string;
   flexDirection?: string;
   margin?: string;
-} & SpaceProps;
+};
 
 /**
  * @deprecated Please use FlexContainer
@@ -53,49 +53,50 @@ export const Flex = styled(Container)<FlexProps>`
 `;
 
 // New implementation of FlexContainer to replace Flex in the future.
-type FlexContainerProps = {
+type FlexContainerProps = SpaceProps & {
   alignItems?:
-    | "stretch"
-    | "flex-start"
-    | "flex-end"
-    | "center"
     | "baseline"
+    | "center"
+    | "end"
     | "first baseline"
+    | "flex-end"
+    | "flex-start"
     | "last baseline"
-    | "start"
-    | "end"
+    | "self-end"
     | "self-start"
-    | "self-end";
+    | "start"
+    | "stretch";
   alignContent?:
-    | "stretch"
-    | "flex-start"
-    | "flex-end"
-    | "center"
     | "baseline"
+    | "center"
+    | "end"
     | "first baseline"
+    | "flex-end"
+    | "flex-start"
     | "last baseline"
-    | "start"
-    | "end"
+    | "self-end"
     | "self-start"
-    | "self-end";
+    | "start"
+    | "stretch";
   justifyContent?:
-    | "flex-start"
-    | "flex-end"
     | "center"
-    | "space-between"
-    | "space-around"
-    | "space-evenly"
-    | "start"
     | "end"
+    | "flex-end"
+    | "flex-start"
     | "left"
-    | "right";
+    | "right"
+    | "space-around"
+    | "space-between"
+    | "space-evenly"
+    | "start";
   grow?: number;
-  wrap?: "nowrap" | "wrap" | "wrap-reverse";
-  direction?: "row" | "row-reverse" | "column" | "column-reverse";
+  wrap?: "nowrap" | "wrap-reverse" | "wrap";
+  direction?: "column-reverse" | "column" | "row-reverse" | "row";
   gap?: Unit<LengthUnitSuffix> | "0" | 0;
   columnGap?: Unit<LengthUnitSuffix> | "0" | 0;
   rowGap?: Unit<LengthUnitSuffix> | "0" | 0;
-} & SpaceProps;
+  popup?: boolean;
+};
 
 function getFlexCss(props: FlexContainerProps) {
   return css`

src/components/container/Container.tsx

@@ -231,3 +231,14 @@ Placeholder text inside input element
     </>
   </Story>
 </Canvas>
+
+### date
+
+<Canvas>
+  <Story name="date">
+    <>
+      <Label name="Date" htmlFor="date-id" required />
+      <Input type="date" value={""} placeholder="MM/DD/YYYY" />
+    </>
+  </Story>
+</Canvas>

src/components/input/Input.stories.mdx

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { space, SpaceProps } from "styled-system";
 import theme from "../../theme";
-import { Flex } from "../container";
+import { FlexContainer } from "../container";
 import { StyledInputGroupProps, StyledInputProps, Status } from "./types";
 
 export const setStatusColor = (status: Status) => {
@@ -17,7 +17,9 @@ export const setStatusColor = (status: Status) => {
 };
 
 /* eslint-disable sonarjs/no-identical-functions */
-export const InputGroup = styled(Flex)<StyledInputGroupProps & SpaceProps>`
+export const InputGroup = styled(FlexContainer)<
+  SpaceProps & StyledInputGroupProps
+>`
   position: relative;
   align-items: center;
   border: 1px solid ${theme.color.border.input};
@@ -78,6 +80,7 @@ export const StyledInput = styled.input<StyledInputProps>`
   margin: 0;
   transition: ${theme.transition};
   color: ${theme.color.text.text01};
+  color-scheme: ${theme.color.scheme};
 
   &::placeholder {
     color: ${theme.color.text.text03};

src/components/input/styles.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { SVGIconProps } from "../svgicon";
 
-export type Status = "success" | "danger";
+export type Status = "danger" | "success";
 
 export type StyledInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   small?: boolean;

src/components/input/types.ts

@@ -1,4 +1,5 @@
 export const color = {
+  scheme: "var(--color-scheme)",
   background: {
     body: "var(--background-body)",
     ui01: "var(--background-ui01)",

src/theme/config.ts

@@ -1,6 +1,7 @@
 import { palette } from "./palette";
 
 const DARK_COLORS = [
+  ["--color-scheme", "dark"],
   ["--background-body", palette.darkGrey.darkGrey500],
   ["--background-overlay", palette.black],
   ["--background-ui01", palette.darkGrey.darkGrey300],

src/theme/dark.ts

@@ -1,6 +1,7 @@
 import { palette } from "./palette";
 
 const LIGHT_COLORS = [
+  ["--color-scheme", "light"],
   ["--background-body", palette.grey.grey300],
   ["--background-overlay", palette.black],
   ["--background-ui01", palette.white],