From efeba17889b27083db0caafb15318ba5302cfa40 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Fri, 8 Nov 2024 15:28:21 +0800 Subject: [PATCH 1/2] [CCUBE-1603][MAHI]Use theme default cols for divider, allow for full column in col div and include display size for radiobutton --- src/divider/divider.tsx | 31 +++++++++++++----------- src/layout/col-div.tsx | 3 +++ src/radio-button/radio-button.styles.tsx | 20 ++++++++++++--- src/radio-button/radio-button.tsx | 2 ++ src/radio-button/types.ts | 5 +++- 5 files changed, 42 insertions(+), 19 deletions(-) diff --git a/src/divider/divider.tsx b/src/divider/divider.tsx index bf3a99774..e9ba39193 100644 --- a/src/divider/divider.tsx +++ b/src/divider/divider.tsx @@ -1,7 +1,9 @@ +import { useTheme } from "styled-components"; import { ColDiv } from "../layout/col-div"; import { V2_ColDiv } from "../v2_layout/col-div"; import { Line } from "./divider.style"; import { DividerProps } from "./types"; +import { Breakpoint } from "../theme"; export const Divider = ({ thickness = 1, @@ -16,16 +18,27 @@ export const Divider = ({ lgCols, xlCols, xxlCols, - mobileCols, - tabletCols, - desktopCols, + mobileCols = 4, + tabletCols = 8, + desktopCols = 12, ...otherProps }: DividerProps) => { + const theme = useTheme(); const isV2Layout = mobileCols !== undefined || tabletCols !== undefined || desktopCols !== undefined; + const colProps = { + xxsCols: xxsCols ?? Breakpoint["xxs-column"]({ theme }), + xsCols: xsCols ?? Breakpoint["xs-column"]({ theme }), + smCols: smCols ?? Breakpoint["sm-column"]({ theme }), + mdCols: mdCols ?? Breakpoint["md-column"]({ theme }), + lgCols: lgCols ?? Breakpoint["lg-column"]({ theme }), + xlCols: xlCols ?? Breakpoint["xl-column"]({ theme }), + xxlCols: xxlCols ?? Breakpoint["xxl-column"]({ theme }), + }; + switch (layoutType) { case "flex": return ( @@ -56,17 +69,7 @@ export const Divider = ({ ); } else { return ( - + ` display: flex; justify-content: center; align-items: center; - height: 2rem; - width: 2rem; + ${(props) => { + if (props.$displaySize === "small") { + return css` + height: 1.5rem; + width: 1.5rem; + `; + } else { + return css` + height: 2rem; + width: 2rem; + `; + } + }} position: relative; `; diff --git a/src/radio-button/radio-button.tsx b/src/radio-button/radio-button.tsx index bd3113866..e24c74bec 100644 --- a/src/radio-button/radio-button.tsx +++ b/src/radio-button/radio-button.tsx @@ -11,6 +11,7 @@ export const RadioButton = ({ className, checked, disabled, + displaySize = "default", onChange, ...otherProps }: RadioButtonProps) => { @@ -46,6 +47,7 @@ export const RadioButton = ({ $selected={checked} $disabled={disabled} className={className} + $displaySize={displaySize} data-testid="radio-button" > {} + extends React.InputHTMLAttributes { + displaySize?: RadioboxSize | undefined; +} From 2f38b4706238bd2fe756c82c149e47b882bb702d Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Mon, 11 Nov 2024 10:29:31 +0800 Subject: [PATCH 2/2] [CCUBE-1603][MAHI]Clean usage of col div to use -1 and included storybook to use 2 different sizings --- src/divider/divider.tsx | 39 +++++++------- src/layout/types.ts | 2 +- src/radio-button/radio-button.styles.tsx | 4 +- src/radio-button/types.ts | 4 +- stories/radio-button/doc-elements.tsx | 5 +- stories/radio-button/props-table.tsx | 51 ++++++++++--------- stories/radio-button/radio-button.mdx | 9 ++++ stories/radio-button/radio-button.stories.tsx | 34 +++++++++++++ 8 files changed, 95 insertions(+), 53 deletions(-) diff --git a/src/divider/divider.tsx b/src/divider/divider.tsx index e9ba39193..491ba9fe4 100644 --- a/src/divider/divider.tsx +++ b/src/divider/divider.tsx @@ -1,9 +1,7 @@ -import { useTheme } from "styled-components"; import { ColDiv } from "../layout/col-div"; import { V2_ColDiv } from "../v2_layout/col-div"; import { Line } from "./divider.style"; import { DividerProps } from "./types"; -import { Breakpoint } from "../theme"; export const Divider = ({ thickness = 1, @@ -11,34 +9,23 @@ export const Divider = ({ layoutType = "flex", color, className, - xxsCols, - xsCols, - smCols, - mdCols, - lgCols, - xlCols, - xxlCols, + xxsCols = [1, -1], + xsCols = [1, -1], + smCols = [1, -1], + mdCols = [1, -1], + lgCols = [1, -1], + xlCols = [1, -1], + xxlCols = [1, -1], mobileCols = 4, tabletCols = 8, desktopCols = 12, ...otherProps }: DividerProps) => { - const theme = useTheme(); const isV2Layout = mobileCols !== undefined || tabletCols !== undefined || desktopCols !== undefined; - const colProps = { - xxsCols: xxsCols ?? Breakpoint["xxs-column"]({ theme }), - xsCols: xsCols ?? Breakpoint["xs-column"]({ theme }), - smCols: smCols ?? Breakpoint["sm-column"]({ theme }), - mdCols: mdCols ?? Breakpoint["md-column"]({ theme }), - lgCols: lgCols ?? Breakpoint["lg-column"]({ theme }), - xlCols: xlCols ?? Breakpoint["xl-column"]({ theme }), - xxlCols: xxlCols ?? Breakpoint["xxl-column"]({ theme }), - }; - switch (layoutType) { case "flex": return ( @@ -69,7 +56,17 @@ export const Divider = ({ ); } else { return ( - + = Max extends number - ? Range | [Range>, Range>] | undefined + ? Range | [Range>, Range> | -1] | undefined : number | [number, number] | undefined; export type BreakpointSpan< diff --git a/src/radio-button/radio-button.styles.tsx b/src/radio-button/radio-button.styles.tsx index 7328c10ed..1655c253c 100644 --- a/src/radio-button/radio-button.styles.tsx +++ b/src/radio-button/radio-button.styles.tsx @@ -1,5 +1,5 @@ import styled, { css } from "styled-components"; -import { RadioButtonProps, RadioboxSize } from "./types"; +import { RadioButtonProps, RadioButtonSize } from "./types"; import { Colour, Motion } from "../theme"; import { CircleDotIcon, CircleIcon } from "@lifesg/react-icons"; @@ -10,7 +10,7 @@ import { CircleDotIcon, CircleIcon } from "@lifesg/react-icons"; interface StyleProps { $selected?: boolean; $disabled?: boolean; - $displaySize?: RadioboxSize | undefined; + $displaySize?: RadioButtonSize | undefined; } // ============================================================================= diff --git a/src/radio-button/types.ts b/src/radio-button/types.ts index c21549ae3..d7a5253d3 100644 --- a/src/radio-button/types.ts +++ b/src/radio-button/types.ts @@ -1,5 +1,5 @@ -export type RadioboxSize = "small" | "default"; +export type RadioButtonSize = "small" | "default"; export interface RadioButtonProps extends React.InputHTMLAttributes { - displaySize?: RadioboxSize | undefined; + displaySize?: RadioButtonSize | undefined; } diff --git a/stories/radio-button/doc-elements.tsx b/stories/radio-button/doc-elements.tsx index 824e64af9..ca3b5c4dc 100644 --- a/stories/radio-button/doc-elements.tsx +++ b/stories/radio-button/doc-elements.tsx @@ -1,11 +1,12 @@ import styled from "styled-components"; -import { V2_TextStyleHelper } from "src/v2_text"; +import { Font } from "../../src"; // ============================================================================= // STYLING // ============================================================================= export const Container = styled.div` display: flex; + align-items: center; flex-direction: column; `; @@ -17,6 +18,6 @@ export const OptionContainer = styled.div` `; export const Label = styled.label` - ${V2_TextStyleHelper.getTextStyle("Body", "regular")} + ${Font["body-baseline-regular"]} margin-left: 1rem; `; diff --git a/stories/radio-button/props-table.tsx b/stories/radio-button/props-table.tsx index 9befd2ad8..60d1d872d 100644 --- a/stories/radio-button/props-table.tsx +++ b/stories/radio-button/props-table.tsx @@ -1,26 +1,27 @@ -import React from "react"; -import { - DefaultCol, - DescriptionCol, - NameCol, - Table, -} from "../storybook-common/api-table"; +import { ApiTable, ApiTableSectionProps } from "../storybook-common/api-table"; -export const PropsTable = () => ( - - - checked - - The selection state of the component - - - - - disabled - - The state in which an action is allowed to be executed - - - -
-); +const DATA: ApiTableSectionProps[] = [ + { + attributes: [ + { + name: "displaySize", + description: "The display size of the component", + propTypes: [`"default"`, `"small"`], + defaultValue: `"default"`, + }, + { + name: "checked", + description: "The selected state of the component", + propTypes: ["boolean"], + }, + { + name: "disabled", + description: + "The state in which an action is allowed to be executed", + propTypes: ["boolean"], + }, + ], + }, +]; + +export const PropsTable = () => ; diff --git a/stories/radio-button/radio-button.mdx b/stories/radio-button/radio-button.mdx index 395208b34..8bd3125c0 100644 --- a/stories/radio-button/radio-button.mdx +++ b/stories/radio-button/radio-button.mdx @@ -22,6 +22,15 @@ import { RadioButton } from "@lifesg/react-design-system/radio-button"; +## Multiple sizes + +There are 2 display sizes available for `Radio Button`. + +- Default +- Small + + + ## Component API The component also inherits the [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement). diff --git a/stories/radio-button/radio-button.stories.tsx b/stories/radio-button/radio-button.stories.tsx index dff55bb36..4195d5b18 100644 --- a/stories/radio-button/radio-button.stories.tsx +++ b/stories/radio-button/radio-button.stories.tsx @@ -54,3 +54,37 @@ export const MultipleOptions: StoryObj = { ); }, }; + +export const MultipleSizes: StoryObj = { + render: () => { + const [value, setValue] = useState(""); + const handleSelection = (event) => { + setValue(event.target.value); + }; + return ( + + + + + + + + + + + ); + }, +};