From 1cdd63fc1a3f328b6187a9b4454b858a68a04a98 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Sun, 16 Oct 2022 12:03:59 +0300 Subject: [PATCH 1/8] typography section wip --- .../sections/layout/shared/lock.tsx | 5 +- .../sections/typography/typography.tsx | 194 +++++++++++++++++- .../src/components/icon-button.tsx | 8 +- 3 files changed, 192 insertions(+), 15 deletions(-) diff --git a/apps/designer/app/designer/features/style-panel/sections/layout/shared/lock.tsx b/apps/designer/app/designer/features/style-panel/sections/layout/shared/lock.tsx index f1754c79cc..f61b2619bc 100644 --- a/apps/designer/app/designer/features/style-panel/sections/layout/shared/lock.tsx +++ b/apps/designer/app/designer/features/style-panel/sections/layout/shared/lock.tsx @@ -43,7 +43,10 @@ export const Lock = ({ justifyContent: "center", }} > - setIsPaired((value) => !value)}> + setIsPaired((value) => !value)} + css={{ width: "100%" }} + > {isPaired ? : } diff --git a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx index a71078d2ec..5eb073cde3 100644 --- a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx +++ b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx @@ -1,19 +1,193 @@ import type { RenderCategoryProps } from "../../style-sections"; -import { ShowMore } from "../../shared/show-more"; -import { renderProperty } from "../../style-sections"; +import { Grid, IconButton } from "@webstudio-is/design-system"; +import { PropertyName } from "../../shared/property-name"; +import { + ColorControl, + FontFamilyControl, + SelectControl, + TextControl, +} from "../../controls"; +import { CrossSmallIcon, EllipsesIcon } from "@webstudio-is/icons"; +import { ToggleGroupControl } from "../../controls/toggle/toggle-control"; export const TypographySection = ({ - styleConfigsByCategory, - moreStyleConfigsByCategory, + setProperty, + currentStyle, + sectionStyle, }: RenderCategoryProps) => { + const setTextAlign = setProperty("textAlign"); + const setTextDecorationLine = setProperty("textDecorationLine"); + const setTextTransform = setProperty("textTransform"); + const setFontStyle = setProperty("fontStyle"); + return ( <> - {styleConfigsByCategory.map((entry) => renderProperty(entry))} - - renderProperty(entry) - )} - /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + setTextAlign(value)} + value={String(currentStyle.alignSelf?.value)} + items={[ + { + child: , + label: "align: left", + value: "left", + }, + { + child: , + label: "align: center", + value: "center", + }, + { + child: , + label: "align: right", + value: "right", + }, + { + child: , + label: "align: justify", + value: "justify", + }, + ]} + /> + setTextDecorationLine(value)} + value={String(currentStyle.textDecorationLine?.value)} + items={[ + { + child: , + label: "None", + value: "none", + }, + { + child: , + label: "Underline", + value: "underline", + }, + { + child: , + label: "Line through", + value: "line-through", + }, + ]} + /> + + + setTextTransform(value)} + value={String(currentStyle.textTransform?.value)} + items={[ + { + child: , + label: "None", + value: "none", + }, + { + child: , + label: "Uppercase", + value: "uppercase", + }, + { + child: , + label: "Capitalize", + value: "capitalize", + }, + { + child: , + label: "Lowercase", + value: "lowercase", + }, + ]} + /> + setFontStyle(value)} + value={String(currentStyle.fontStyle?.value)} + items={[ + { + child: , + label: "None", + value: "normal", + }, + { + child: , + label: "Italic", + value: "italic", + }, + ]} + /> + + + + + ); }; diff --git a/packages/design-system/src/components/icon-button.tsx b/packages/design-system/src/components/icon-button.tsx index a2286a99d4..3134cde043 100644 --- a/packages/design-system/src/components/icon-button.tsx +++ b/packages/design-system/src/components/icon-button.tsx @@ -42,22 +42,22 @@ export const IconButton = styled("button", { "1": { borderRadius: 2, height: "$5", - width: "min($5, 100%)", + width: "$5", }, "2": { borderRadius: "$1", height: "$6", - width: "min($6, 100%)", + width: "$6", }, "3": { borderRadius: "$1", height: "$7", - width: "min($7, 100%)", + width: "$7", }, "4": { borderRadius: "$2", height: "$8", - width: "min($8, 100%)", + width: "$8", }, }, state: { From 49c8135aef7b2675d373f3f63d9e7c02adb65191 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Sun, 16 Oct 2022 16:18:45 +0300 Subject: [PATCH 2/8] advanced typography popover --- .../sections/typography/typography.tsx | 111 ++++++++++++++++-- .../design-system/src/components/popover.tsx | 2 +- 2 files changed, 105 insertions(+), 8 deletions(-) diff --git a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx index 5eb073cde3..2b035420fa 100644 --- a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx +++ b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx @@ -1,5 +1,5 @@ import type { RenderCategoryProps } from "../../style-sections"; -import { Grid, IconButton } from "@webstudio-is/design-system"; +import { FloatingPopover, Grid, IconButton } from "@webstudio-is/design-system"; import { PropertyName } from "../../shared/property-name"; import { ColorControl, @@ -15,10 +15,23 @@ export const TypographySection = ({ currentStyle, sectionStyle, }: RenderCategoryProps) => { + const getTextAlign = (value: string) => { + switch (value) { + case "left": + return "start"; + case "right": + return "end"; + default: + return value; + } + }; const setTextAlign = setProperty("textAlign"); const setTextDecorationLine = setProperty("textDecorationLine"); const setTextTransform = setProperty("textTransform"); const setFontStyle = setProperty("fontStyle"); + const setDirection = setProperty("direction"); + const setTextOverflow = setProperty("textOverflow"); + const setHyphens = setProperty("hyphens"); return ( <> @@ -85,12 +98,12 @@ export const TypographySection = ({ setTextAlign(value)} - value={String(currentStyle.alignSelf?.value)} + value={String(getTextAlign(String(currentStyle.textAlign?.value)))} items={[ { child: , label: "align: left", - value: "left", + value: "start", }, { child: , @@ -100,7 +113,7 @@ export const TypographySection = ({ { child: , label: "align: right", - value: "right", + value: "end", }, { child: , @@ -183,9 +196,93 @@ export const TypographySection = ({ }, ]} /> - - - + + + + + + + + setDirection(value)} + value={String(currentStyle.direction?.value)} + items={[ + { + child: , + label: "Left to Right", + value: "ltr", + }, + { + child: , + label: "Right to Left", + value: "rtl", + }, + ]} + /> + + + + setHyphens(value)} + value={String(currentStyle.hyphens?.value)} + items={[ + { + child: , + label: "None", + value: "manual", + }, + { + child: , + label: "Auto", + value: "auto", + }, + ]} + /> + + + + setTextOverflow(value)} + value={String(currentStyle.textOverflow?.value)} + items={[ + { + child: , + label: "None", + value: "clip", + }, + { + child: , + label: "Ellipsis", + value: "ellipsis", + }, + ]} + /> + + + } + > + + + + diff --git a/packages/design-system/src/components/popover.tsx b/packages/design-system/src/components/popover.tsx index fa1a5a017b..4acc56bba2 100644 --- a/packages/design-system/src/components/popover.tsx +++ b/packages/design-system/src/components/popover.tsx @@ -133,7 +133,7 @@ export const FloatingPopover = ({ sideOffset={sideOffset} side="right" hideArrow - css={{ backgroundColor: "$loContrast" }} + css={{ backgroundColor: "$loContrast", minWidth: 240 }} > {content} From bd3c0499347430adc306e41c91bf0e3659efa6c7 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Sat, 12 Nov 2022 22:54:14 +0300 Subject: [PATCH 3/8] merge main --- .../style-panel/sections/typography/typography.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx index 2b035420fa..834ad082ec 100644 --- a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx +++ b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx @@ -1,5 +1,5 @@ import type { RenderCategoryProps } from "../../style-sections"; -import { FloatingPopover, Grid, IconButton } from "@webstudio-is/design-system"; +import { Grid, IconButton } from "@webstudio-is/design-system"; import { PropertyName } from "../../shared/property-name"; import { ColorControl, @@ -9,6 +9,7 @@ import { } from "../../controls"; import { CrossSmallIcon, EllipsesIcon } from "@webstudio-is/icons"; import { ToggleGroupControl } from "../../controls/toggle/toggle-control"; +import { ValuePickerPopover } from "../../shared/value-picker-popover"; export const TypographySection = ({ setProperty, @@ -196,7 +197,7 @@ export const TypographySection = ({ }, ]} /> - @@ -282,7 +283,7 @@ export const TypographySection = ({ - + From c3fb36024ae1e2439cd23360090f9088d74bb8df Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Sun, 13 Nov 2022 13:26:08 +0300 Subject: [PATCH 4/8] Update lock.tsx weirdest specificity bug, this was somehow causing an all: unset rule in button styles to come after the styles, why? no idea. --- .../features/style-panel/sections/layout/shared/lock.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/apps/designer/app/designer/features/style-panel/sections/layout/shared/lock.tsx b/apps/designer/app/designer/features/style-panel/sections/layout/shared/lock.tsx index 4db3ccd0a1..d8f8f0821b 100644 --- a/apps/designer/app/designer/features/style-panel/sections/layout/shared/lock.tsx +++ b/apps/designer/app/designer/features/style-panel/sections/layout/shared/lock.tsx @@ -43,10 +43,7 @@ export const Lock = ({ justifyContent: "center", }} > - setIsPaired((value) => !value)} - css={{ width: "100%" }} - > + setIsPaired((value) => !value)}> {isPaired ? : } From 826cd363fea3c09fad652759657fc90f26852ff5 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Sun, 13 Nov 2022 16:01:02 +0300 Subject: [PATCH 5/8] fix spacing --- .../sections/typography/typography.tsx | 35 ++++++++++++------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx index 834ad082ec..72d416b82a 100644 --- a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx +++ b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx @@ -1,9 +1,10 @@ import type { RenderCategoryProps } from "../../style-sections"; -import { Grid, IconButton } from "@webstudio-is/design-system"; +import { Flex, Grid, IconButton } from "@webstudio-is/design-system"; import { PropertyName } from "../../shared/property-name"; import { ColorControl, FontFamilyControl, + FontWeightControl, SelectControl, TextControl, } from "../../controls"; @@ -35,8 +36,12 @@ export const TypographySection = ({ const setHyphens = setProperty("hyphens"); return ( - <> - + + - + - + - + - + - + @@ -200,7 +209,7 @@ export const TypographySection = ({ + - + ); }; From 09a90d6858d5e828d8ff63fb1b05f448a1639c5c Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Sun, 13 Nov 2022 22:46:40 +0300 Subject: [PATCH 6/8] add typography icons, fix breakpoint detection for typography props --- .../sections/typography/typography.tsx | 123 ++++++++---------- packages/icons/src/external-link.tsx | 27 ++++ packages/icons/src/index.ts | 14 ++ packages/icons/src/legacy.ts | 1 - packages/icons/src/text-align-center.tsx | 32 +++++ packages/icons/src/text-align-justify.tsx | 32 +++++ packages/icons/src/text-align-left.tsx | 32 +++++ packages/icons/src/text-align-right.tsx | 32 +++++ packages/icons/src/text-capitalize.tsx | 24 ++++ packages/icons/src/text-direction-ltr.tsx | 26 ++++ packages/icons/src/text-direction-rtl.tsx | 26 ++++ packages/icons/src/text-hyphen.tsx | 26 ++++ packages/icons/src/text-italic.tsx | 27 ++++ packages/icons/src/text-lowercase.tsx | 24 ++++ packages/icons/src/text-strikethrough.tsx | 32 +++++ packages/icons/src/text-truncate.tsx | 36 +++++ packages/icons/src/text-underline.tsx | 26 ++++ packages/icons/src/text-uppercase.tsx | 27 ++++ 18 files changed, 500 insertions(+), 67 deletions(-) create mode 100644 packages/icons/src/external-link.tsx create mode 100644 packages/icons/src/text-align-center.tsx create mode 100644 packages/icons/src/text-align-justify.tsx create mode 100644 packages/icons/src/text-align-left.tsx create mode 100644 packages/icons/src/text-align-right.tsx create mode 100644 packages/icons/src/text-capitalize.tsx create mode 100644 packages/icons/src/text-direction-ltr.tsx create mode 100644 packages/icons/src/text-direction-rtl.tsx create mode 100644 packages/icons/src/text-hyphen.tsx create mode 100644 packages/icons/src/text-italic.tsx create mode 100644 packages/icons/src/text-lowercase.tsx create mode 100644 packages/icons/src/text-strikethrough.tsx create mode 100644 packages/icons/src/text-truncate.tsx create mode 100644 packages/icons/src/text-underline.tsx create mode 100644 packages/icons/src/text-uppercase.tsx diff --git a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx index 72d416b82a..02bfb7e202 100644 --- a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx +++ b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx @@ -1,5 +1,5 @@ import type { RenderCategoryProps } from "../../style-sections"; -import { Flex, Grid, IconButton } from "@webstudio-is/design-system"; +import { Flex, Grid, IconButton, Tooltip } from "@webstudio-is/design-system"; import { PropertyName } from "../../shared/property-name"; import { ColorControl, @@ -8,7 +8,24 @@ import { SelectControl, TextControl, } from "../../controls"; -import { CrossSmallIcon, EllipsesIcon } from "@webstudio-is/icons"; +import { + CrossSmallIcon, + EllipsesIcon, + TextDirectionLTRIcon, + TextDirectionRTLIcon, + TextAlignCenterIcon, + TextAlignJustifyIcon, + TextAlignLeftIcon, + TextAlignRightIcon, + TextCapitalizeIcon, + TextHyphenIcon, + TextItalicIcon, + TextLowercaseIcon, + TextStrikethroughIcon, + TextTruncateIcon, + TextUnderlineIcon, + TextUppercaseIcon, +} from "@webstudio-is/icons"; import { ToggleGroupControl } from "../../controls/toggle/toggle-control"; import { ValuePickerPopover } from "../../shared/value-picker-popover"; @@ -43,24 +60,15 @@ export const TypographySection = ({ }} > - + - + - + @@ -72,24 +80,15 @@ export const TypographySection = ({ }} > - + - + - + @@ -106,34 +105,34 @@ export const TypographySection = ({ }} > setTextAlign(value)} value={String(getTextAlign(String(currentStyle.textAlign?.value)))} items={[ { - child: , + child: , label: "align: left", value: "start", }, { - child: , + child: , label: "align: center", value: "center", }, { - child: , + child: , label: "align: right", value: "end", }, { - child: , + child: , label: "align: justify", value: "justify", }, ]} /> setTextDecorationLine(value)} value={String(currentStyle.textDecorationLine?.value)} items={[ @@ -143,12 +142,12 @@ export const TypographySection = ({ value: "none", }, { - child: , + child: , label: "Underline", value: "underline", }, { - child: , + child: , label: "Line through", value: "line-through", }, @@ -163,7 +162,7 @@ export const TypographySection = ({ }} > setTextTransform(value)} value={String(currentStyle.textTransform?.value)} items={[ @@ -173,24 +172,24 @@ export const TypographySection = ({ value: "none", }, { - child: , + child: , label: "Uppercase", value: "uppercase", }, { - child: , + child: , label: "Capitalize", value: "capitalize", }, { - child: , + child: , label: "Lowercase", value: "lowercase", }, ]} /> setFontStyle(value)} value={String(currentStyle.fontStyle?.value)} items={[ @@ -200,7 +199,7 @@ export const TypographySection = ({ value: "normal", }, { - child: , + child: , label: "Italic", value: "italic", }, @@ -211,29 +210,23 @@ export const TypographySection = ({ content={ - + - + setDirection(value)} value={String(currentStyle.direction?.value)} items={[ { - child: , + child: , label: "Left to Right", value: "ltr", }, { - child: , + child: , label: "Right to Left", value: "rtl", }, @@ -241,12 +234,9 @@ export const TypographySection = ({ /> - + setHyphens(value)} value={String(currentStyle.hyphens?.value)} items={[ @@ -256,7 +246,7 @@ export const TypographySection = ({ value: "manual", }, { - child: , + child: , label: "Auto", value: "auto", }, @@ -264,12 +254,9 @@ export const TypographySection = ({ /> - + setTextOverflow(value)} value={String(currentStyle.textOverflow?.value)} items={[ @@ -279,7 +266,7 @@ export const TypographySection = ({ value: "clip", }, { - child: , + child: , label: "Ellipsis", value: "ellipsis", }, @@ -289,9 +276,13 @@ export const TypographySection = ({ } > - - - + + + + + + + diff --git a/packages/icons/src/external-link.tsx b/packages/icons/src/external-link.tsx new file mode 100644 index 0000000000..19eb805c01 --- /dev/null +++ b/packages/icons/src/external-link.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const ExternalLinkIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + ); + } +); + +ExternalLinkIcon.displayName = "ExternalLinkIcon"; diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts index 71cfed5e37..94842ae9ef 100644 --- a/packages/icons/src/index.ts +++ b/packages/icons/src/index.ts @@ -77,3 +77,17 @@ export * from "./order-last"; export * from "./cross-small"; export * from "./cross-large"; export * from "./ellipses"; +export * from "./text-align-center"; +export * from "./text-align-justify"; +export * from "./text-align-left"; +export * from "./text-align-right"; +export * from "./text-capitalize"; +export * from "./text-hyphen"; +export * from "./text-italic"; +export * from "./text-lowercase"; +export * from "./text-strikethrough"; +export * from "./text-truncate"; +export * from "./text-underline"; +export * from "./text-uppercase"; +export * from "./text-direction-ltr"; +export * from "./text-direction-rtl"; diff --git a/packages/icons/src/legacy.ts b/packages/icons/src/legacy.ts index b885b1d51a..1cae8ef769 100644 --- a/packages/icons/src/legacy.ts +++ b/packages/icons/src/legacy.ts @@ -21,7 +21,6 @@ export { CommitIcon, InputIcon, ButtonIcon, - TextAlignLeftIcon, HeadingIcon, TextIcon, SquareIcon, diff --git a/packages/icons/src/text-align-center.tsx b/packages/icons/src/text-align-center.tsx new file mode 100644 index 0000000000..f76f304647 --- /dev/null +++ b/packages/icons/src/text-align-center.tsx @@ -0,0 +1,32 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const TextAlignCenterIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + ); + } +); +TextAlignCenterIcon.displayName = "TextAlignCenterIcon"; diff --git a/packages/icons/src/text-align-justify.tsx b/packages/icons/src/text-align-justify.tsx new file mode 100644 index 0000000000..bc26e8b8e0 --- /dev/null +++ b/packages/icons/src/text-align-justify.tsx @@ -0,0 +1,32 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const TextAlignJustifyIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + ); + } +); +TextAlignJustifyIcon.displayName = "TextAlignJustifyIcon"; diff --git a/packages/icons/src/text-align-left.tsx b/packages/icons/src/text-align-left.tsx new file mode 100644 index 0000000000..32f740dddf --- /dev/null +++ b/packages/icons/src/text-align-left.tsx @@ -0,0 +1,32 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const TextAlignLeftIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + ); + } +); +TextAlignLeftIcon.displayName = "TextAlignLeftIcon"; diff --git a/packages/icons/src/text-align-right.tsx b/packages/icons/src/text-align-right.tsx new file mode 100644 index 0000000000..9a9484701a --- /dev/null +++ b/packages/icons/src/text-align-right.tsx @@ -0,0 +1,32 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const TextAlignRightIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + ); + } +); +TextAlignRightIcon.displayName = "TextAlignRightIcon"; diff --git a/packages/icons/src/text-capitalize.tsx b/packages/icons/src/text-capitalize.tsx new file mode 100644 index 0000000000..604d0d6b76 --- /dev/null +++ b/packages/icons/src/text-capitalize.tsx @@ -0,0 +1,24 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const TextCapitalizeIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + ); + } +); +TextCapitalizeIcon.displayName = "TextCapitalizeIcon"; diff --git a/packages/icons/src/text-direction-ltr.tsx b/packages/icons/src/text-direction-ltr.tsx new file mode 100644 index 0000000000..1b05b79a72 --- /dev/null +++ b/packages/icons/src/text-direction-ltr.tsx @@ -0,0 +1,26 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const TextDirectionLTRIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + ); + } +); +TextDirectionLTRIcon.displayName = "TextDirectionLTRIcon"; diff --git a/packages/icons/src/text-direction-rtl.tsx b/packages/icons/src/text-direction-rtl.tsx new file mode 100644 index 0000000000..771f7de58f --- /dev/null +++ b/packages/icons/src/text-direction-rtl.tsx @@ -0,0 +1,26 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const TextDirectionRTLIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + ); + } +); +TextDirectionRTLIcon.displayName = "TextDirectionRTLIcon"; diff --git a/packages/icons/src/text-hyphen.tsx b/packages/icons/src/text-hyphen.tsx new file mode 100644 index 0000000000..408a7c91bd --- /dev/null +++ b/packages/icons/src/text-hyphen.tsx @@ -0,0 +1,26 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const TextHyphenIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + ); + } +); +TextHyphenIcon.displayName = "TextHyphenIcon"; diff --git a/packages/icons/src/text-italic.tsx b/packages/icons/src/text-italic.tsx new file mode 100644 index 0000000000..e7d7427b41 --- /dev/null +++ b/packages/icons/src/text-italic.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const TextItalicIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + ); + } +); +TextItalicIcon.displayName = "TextItalicIcon"; diff --git a/packages/icons/src/text-lowercase.tsx b/packages/icons/src/text-lowercase.tsx new file mode 100644 index 0000000000..ce08efd7db --- /dev/null +++ b/packages/icons/src/text-lowercase.tsx @@ -0,0 +1,24 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const TextLowercaseIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + ); + } +); +TextLowercaseIcon.displayName = "TextLowercaseIcon"; diff --git a/packages/icons/src/text-strikethrough.tsx b/packages/icons/src/text-strikethrough.tsx new file mode 100644 index 0000000000..f78957bfed --- /dev/null +++ b/packages/icons/src/text-strikethrough.tsx @@ -0,0 +1,32 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const TextStrikethroughIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + ); + } +); +TextStrikethroughIcon.displayName = "TextStrikethroughIcon"; diff --git a/packages/icons/src/text-truncate.tsx b/packages/icons/src/text-truncate.tsx new file mode 100644 index 0000000000..fa120abcc9 --- /dev/null +++ b/packages/icons/src/text-truncate.tsx @@ -0,0 +1,36 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const TextTruncateIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + + ); + } +); +TextTruncateIcon.displayName = "TextTruncateIcon"; diff --git a/packages/icons/src/text-underline.tsx b/packages/icons/src/text-underline.tsx new file mode 100644 index 0000000000..a0e36e6dc0 --- /dev/null +++ b/packages/icons/src/text-underline.tsx @@ -0,0 +1,26 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const TextUnderlineIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + ); + } +); +TextUnderlineIcon.displayName = "TextUnderlineIcon"; diff --git a/packages/icons/src/text-uppercase.tsx b/packages/icons/src/text-uppercase.tsx new file mode 100644 index 0000000000..b96c00181f --- /dev/null +++ b/packages/icons/src/text-uppercase.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const TextUppercaseIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + ); + } +); +TextUppercaseIcon.displayName = "TextUppercaseIcon"; From f3eb430eb3f82751b6bd1092e9b43ff159c2242d Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Mon, 14 Nov 2022 19:01:05 +0300 Subject: [PATCH 7/8] review amendments --- .../sections/typography/typography.tsx | 525 +++++++++--------- 1 file changed, 276 insertions(+), 249 deletions(-) diff --git a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx index 02bfb7e202..285b5ded8b 100644 --- a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx +++ b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx @@ -29,263 +29,290 @@ import { import { ToggleGroupControl } from "../../controls/toggle/toggle-control"; import { ValuePickerPopover } from "../../shared/value-picker-popover"; -export const TypographySection = ({ - setProperty, - currentStyle, - sectionStyle, -}: RenderCategoryProps) => { - const getTextAlign = (value: string) => { - switch (value) { - case "left": - return "start"; - case "right": - return "end"; - default: - return value; - } - }; +export const TypographySection = (props: RenderCategoryProps) => { + return ( + + + + + + ); +}; + +export const TypographySectionFont = (props: RenderCategoryProps) => { + const { sectionStyle } = props; + + return ( + + + + + + + + + + + + + + + ); +}; + +export const TypographySectionSizing = (props: RenderCategoryProps) => { + const { sectionStyle } = props; + + return ( + + + + + + + + + + + + + + + ); +}; + +export const TypographySectionAdvanced = (props: RenderCategoryProps) => { + const { setProperty, currentStyle } = props; const setTextAlign = setProperty("textAlign"); const setTextDecorationLine = setProperty("textDecorationLine"); const setTextTransform = setProperty("textTransform"); const setFontStyle = setProperty("fontStyle"); + + return ( + + + setTextAlign(value)} + value={String(getTextAlign(String(currentStyle.textAlign?.value)))} + items={[ + { + child: , + label: "align: left", + value: "start", + }, + { + child: , + label: "align: center", + value: "center", + }, + { + child: , + label: "align: right", + value: "end", + }, + { + child: , + label: "align: justify", + value: "justify", + }, + ]} + /> + setTextDecorationLine(value)} + value={String(currentStyle.textDecorationLine?.value)} + items={[ + { + child: , + label: "None", + value: "none", + }, + { + child: , + label: "Underline", + value: "underline", + }, + { + child: , + label: "Line through", + value: "line-through", + }, + ]} + /> + + + setTextTransform(value)} + value={String(currentStyle.textTransform?.value)} + items={[ + { + child: , + label: "None", + value: "none", + }, + { + child: , + label: "Uppercase", + value: "uppercase", + }, + { + child: , + label: "Capitalize", + value: "capitalize", + }, + { + child: , + label: "Lowercase", + value: "lowercase", + }, + ]} + /> + setFontStyle(value)} + value={String(currentStyle.fontStyle?.value)} + items={[ + { + child: , + label: "None", + value: "normal", + }, + { + child: , + label: "Italic", + value: "italic", + }, + ]} + /> + + + + ); +}; + +export const TypographySectionAdvancedPopover = ( + props: RenderCategoryProps +) => { + const { setProperty, currentStyle, sectionStyle } = props; const setDirection = setProperty("direction"); const setTextOverflow = setProperty("textOverflow"); const setHyphens = setProperty("hyphens"); - return ( - - - - - + + + + + + + + setDirection(value)} + value={String(currentStyle.direction?.value)} + items={[ + { + child: , + label: "Left to Right", + value: "ltr", + }, + { + child: , + label: "Right to Left", + value: "rtl", + }, + ]} + /> + + + + setHyphens(value)} + value={String(currentStyle.hyphens?.value)} + items={[ + { + child: , + label: "None", + value: "manual", + }, + { + child: , + label: "Auto", + value: "auto", + }, + ]} + /> + + + + setTextOverflow(value)} + value={String(currentStyle.textOverflow?.value)} + items={[ + { + child: , + label: "None", + value: "clip", + }, + { + child: , + label: "Ellipsis", + value: "ellipsis", + }, + ]} + /> + - - - - - - - - - - - - - - - - - - - - - - - - - - - - setTextAlign(value)} - value={String(getTextAlign(String(currentStyle.textAlign?.value)))} - items={[ - { - child: , - label: "align: left", - value: "start", - }, - { - child: , - label: "align: center", - value: "center", - }, - { - child: , - label: "align: right", - value: "end", - }, - { - child: , - label: "align: justify", - value: "justify", - }, - ]} - /> - setTextDecorationLine(value)} - value={String(currentStyle.textDecorationLine?.value)} - items={[ - { - child: , - label: "None", - value: "none", - }, - { - child: , - label: "Underline", - value: "underline", - }, - { - child: , - label: "Line through", - value: "line-through", - }, - ]} - /> - - - setTextTransform(value)} - value={String(currentStyle.textTransform?.value)} - items={[ - { - child: , - label: "None", - value: "none", - }, - { - child: , - label: "Uppercase", - value: "uppercase", - }, - { - child: , - label: "Capitalize", - value: "capitalize", - }, - { - child: , - label: "Lowercase", - value: "lowercase", - }, - ]} - /> - setFontStyle(value)} - value={String(currentStyle.fontStyle?.value)} - items={[ - { - child: , - label: "None", - value: "normal", - }, - { - child: , - label: "Italic", - value: "italic", - }, - ]} - /> - - - - - - - - setDirection(value)} - value={String(currentStyle.direction?.value)} - items={[ - { - child: , - label: "Left to Right", - value: "ltr", - }, - { - child: , - label: "Right to Left", - value: "rtl", - }, - ]} - /> - - - - setHyphens(value)} - value={String(currentStyle.hyphens?.value)} - items={[ - { - child: , - label: "None", - value: "manual", - }, - { - child: , - label: "Auto", - value: "auto", - }, - ]} - /> - - - - setTextOverflow(value)} - value={String(currentStyle.textOverflow?.value)} - items={[ - { - child: , - label: "None", - value: "clip", - }, - { - child: , - label: "Ellipsis", - value: "ellipsis", - }, - ]} - /> - - - } - > - - - - - - - - - - - + } + > + + + + + + + + ); }; + +const getTextAlign = (value: string) => { + switch (value) { + case "left": + return "start"; + case "right": + return "end"; + default: + return value; + } +}; From 9d3a92b558c58f0c3d5f2ff7f8da5381415c8b9e Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Tue, 15 Nov 2022 02:24:15 +0300 Subject: [PATCH 8/8] fix weird specificity issue --- packages/design-system/src/components/toggle-group.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/design-system/src/components/toggle-group.tsx b/packages/design-system/src/components/toggle-group.tsx index 8cb67c13c7..674aec8c7c 100644 --- a/packages/design-system/src/components/toggle-group.tsx +++ b/packages/design-system/src/components/toggle-group.tsx @@ -9,7 +9,8 @@ export const ToggleGroupRoot = styled(ToggleGroupPrimitive.Root, { }); export const ToggleGroupItem = styled(ToggleGroupPrimitive.Item, { - all: "unset", + // all: "unset", // @note weird bug, this somehow gets into weird specifity issues with how styles are inserted + border: "none", backgroundColor: "$loContrast", color: "$hiContrast", display: "flex",