diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 2f3e719186..e426a045d1 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -17,23 +17,23 @@ diverse, inclusive, and healthy community. Examples of behavior that contributes to a positive environment for our community include: -* Demonstrating empathy and kindness toward other people -* Being respectful of differing opinions, viewpoints, and experiences -* Giving and gracefully accepting constructive feedback -* Accepting responsibility and apologizing to those affected by our mistakes, +- Demonstrating empathy and kindness toward other people +- Being respectful of differing opinions, viewpoints, and experiences +- Giving and gracefully accepting constructive feedback +- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience -* Focusing on what is best not just for us as individuals, but for the +- Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: -* The use of sexualized language or imagery, and sexual attention or +- The use of sexualized language or imagery, and sexual attention or advances of any kind -* Trolling, insulting or derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or email +- Trolling, insulting or derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or email address, without their explicit permission -* Other conduct which could reasonably be considered inappropriate in a +- Other conduct which could reasonably be considered inappropriate in a professional setting ## Enforcement Responsibilities @@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban. ### 4. Permanent Ban **Community Impact**: Demonstrating a pattern of violation of community -standards, including sustained inappropriate behavior, harassment of an +standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. **Consequence**: A permanent ban from any sort of public interaction within diff --git a/apps/designer/app/designer/features/style-panel/controls/index.ts b/apps/designer/app/designer/features/style-panel/controls/index.ts index 8d0e75c464..03f708c803 100644 --- a/apps/designer/app/designer/features/style-panel/controls/index.ts +++ b/apps/designer/app/designer/features/style-panel/controls/index.ts @@ -5,3 +5,4 @@ export * from "./menu/menu-control"; export * from "./font-family/font-family-control"; export * from "./font-weight/font-weight-control"; export * from "./image/image-control"; +export * from "./toggle/toggle-control"; diff --git a/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx b/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx new file mode 100644 index 0000000000..6005155e93 --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx @@ -0,0 +1,66 @@ +import { + styled, + Flex, + Tooltip, + ToggleGroupRoot, + ToggleGroupItem, +} from "@webstudio-is/design-system"; +import { StyleProperty } from "@webstudio-is/react-sdk"; +import { useIsFromCurrentBreakpoint } from "../../shared/use-is-from-current-breakpoint"; + +export type ToggleGroupControlProps = { + property: StyleProperty | StyleProperty[]; + value: string; + items: { child: JSX.Element; label: string; value: string }[]; + onValueChange?: (value: string) => void; +}; + +export const ToggleGroupControl = ({ + property, + value = "", + items = [], + onValueChange, +}: ToggleGroupControlProps) => { + const isCurrentBreakpoint = useIsFromCurrentBreakpoint(property); + return ( + + {items.map(({ child, label, value }, index) => { + return ( + + + {child} + + + ); + })} + + ); +}; + +const ToggleGroupControlItem = styled(ToggleGroupItem, { + variants: { + state: { + set: { + "&[data-state=on]": { + color: "$colors$blue11", + backgroundColor: "$colors$blue4", + }, + }, + inherited: { + "&[data-state=on]": { + color: "$colors$orange4", + backgroundColor: "$colors$orange4", + }, + }, + }, + }, +}); diff --git a/apps/designer/app/designer/features/style-panel/sections/backgrounds/backgrounds.tsx b/apps/designer/app/designer/features/style-panel/sections/backgrounds/backgrounds.tsx new file mode 100644 index 0000000000..c0c66b8dfe --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/backgrounds/backgrounds.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const BackgroundsSection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/borders/borders.tsx b/apps/designer/app/designer/features/style-panel/sections/borders/borders.tsx new file mode 100644 index 0000000000..9ed390754b --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/borders/borders.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const BordersSection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/effects/effects.tsx b/apps/designer/app/designer/features/style-panel/sections/effects/effects.tsx new file mode 100644 index 0000000000..59cb2fc213 --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/effects/effects.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const EffectsSection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx new file mode 100644 index 0000000000..1674ae2135 --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx @@ -0,0 +1,277 @@ +import { Flex, Grid } from "@webstudio-is/design-system"; +import type { RenderCategoryProps } from "../../style-sections"; +import { ToggleGroupControl } from "../../controls"; +import { PropertyName } from "../../shared/property-name"; +import { TextControl } from "../../controls"; +import { + CrossSmallIcon, + AlignSelfStartIcon, + AlignSelfEndIcon, + AlignSelfCenterIcon, + AlignSelfBaselineIcon, + AlignSelfStretchIcon, + FlexSizingShrinkIcon, + FlexSizingGrowIcon, + OrderFirstIcon, + OrderLastIcon, + EllipsesIcon, +} from "@webstudio-is/icons"; +import { ValuePickerPopover } from "../../shared/value-picker-popover"; + +export const FlexChildSection = (props: RenderCategoryProps) => { + return ( + + + + + + ); +}; + +const FlexChildSectionAlign = (props: RenderCategoryProps) => { + const { setProperty, currentStyle, sectionStyle } = props; + const setAlignSelf = setProperty("alignSelf"); + + return ( + + + setAlignSelf(value)} + value={String(currentStyle.alignSelf?.value)} + items={[ + { + child: , + label: "Do not align items", + value: "auto", + }, + { + child: , + label: "align-items: flex-start", + value: "start", + }, + { + child: , + label: "align-items: flex-end", + value: "end", + }, + { + child: , + label: "align-items: center", + value: "center", + }, + { + child: , + label: "align-items: stretch", + value: "stretch", + }, + { + child: , + label: "align-items: baseline", + value: "baseline", + }, + ]} + /> + + ); +}; + +const FlexChildSectionSizing = (props: RenderCategoryProps) => { + const { createBatchUpdate, currentStyle, sectionStyle } = props; + const setSizing = createBatchUpdate(); + + return ( + + + { + switch (value) { + case "none": { + setSizing.setProperty("flexGrow")("0"); + setSizing.setProperty("flexShrink")("0"); + setSizing.publish(); + break; + } + case "grow": { + setSizing.setProperty("flexGrow")("1"); + setSizing.setProperty("flexShrink")("0"); + setSizing.publish(); + break; + } + case "shrink": { + setSizing.setProperty("flexGrow")("0"); + setSizing.setProperty("flexShrink")("1"); + setSizing.publish(); + break; + } + } + }} + value={getSizingValue( + String(currentStyle.flexGrow?.value), + String(currentStyle.flexShrink?.value) + )} + items={[ + { + child: , + label: "Don't grow or shrink", + value: "none", + }, + { + child: , + label: "Grow if possible", + value: "grow", + }, + { + child: , + label: "Shrink if needed", + value: "shrink", + }, + { + child: , + label: "More sizing options", + value: "", + }, + ]} + /> + + ); +}; + +const FlexChildSectionSizingPopover = ({ + sectionStyle, +}: RenderCategoryProps) => { + return ( + + + + + + + + + + + + + + + } + > + + + + + ); +}; + +const FlexChildSectionOrder = (props: RenderCategoryProps) => { + const { setProperty, currentStyle, sectionStyle } = props; + const setOrder = setProperty("order"); + + return ( + + + { + switch (value) { + case "0": + case "1": + case "-1": { + setOrder(value); + break; + } + } + }} + value={String(currentStyle.order?.value)} + items={[ + { + child: , + label: "Dont't change", + value: "0", + }, + { + child: , + label: "Make first", + value: "1", + }, + { + child: , + label: "Make last", + value: "-1", + }, + { + child: , + label: "Customize order", + value: "", + }, + ]} + /> + + ); +}; + +const FlexChildSectionOrderPopover = (props: RenderCategoryProps) => { + const { sectionStyle } = props; + return ( + + + + + + + } + > + + + + + ); +}; + +const getSizingValue = (flexGrow: string, flexShrink: string) => { + if (flexGrow === "0" && flexShrink === "0") return "none"; + if (flexGrow === "1" && flexShrink === "0") return "grow"; + if (flexGrow === "0" && flexShrink === "1") return "shrink"; + return ""; +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/grid-child/grid-child.tsx b/apps/designer/app/designer/features/style-panel/sections/grid-child/grid-child.tsx new file mode 100644 index 0000000000..543ed0e8e5 --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/grid-child/grid-child.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const GridChildSection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/index.ts b/apps/designer/app/designer/features/style-panel/sections/index.ts index ceb46300a7..6e82bdbb6e 100644 --- a/apps/designer/app/designer/features/style-panel/sections/index.ts +++ b/apps/designer/app/designer/features/style-panel/sections/index.ts @@ -1,2 +1,11 @@ export * from "./layout/layout"; +export * from "./flex-child/flex-child"; +export * from "./grid-child/grid-child"; export * from "./spacing/spacing"; +export * from "./size/size"; +export * from "./position/position"; +export * from "./typography/typography"; +export * from "./backgrounds/backgrounds"; +export * from "./borders/borders"; +export * from "./effects/effects"; +export * from "./other/other"; diff --git a/apps/designer/app/designer/features/style-panel/sections/other/other.tsx b/apps/designer/app/designer/features/style-panel/sections/other/other.tsx new file mode 100644 index 0000000000..ac4b9548b7 --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/other/other.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const OtherSection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/position/position.tsx b/apps/designer/app/designer/features/style-panel/sections/position/position.tsx new file mode 100644 index 0000000000..41fc379430 --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/position/position.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const PositionSection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/size/size.tsx b/apps/designer/app/designer/features/style-panel/sections/size/size.tsx new file mode 100644 index 0000000000..2d558697e8 --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/size/size.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const SizeSection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; 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 new file mode 100644 index 0000000000..a71078d2ec --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const TypographySection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/shared/property-name.tsx b/apps/designer/app/designer/features/style-panel/shared/property-name.tsx index d667541bad..260911c56a 100644 --- a/apps/designer/app/designer/features/style-panel/shared/property-name.tsx +++ b/apps/designer/app/designer/features/style-panel/shared/property-name.tsx @@ -28,7 +28,7 @@ export const PropertyName = ({ property, label, css }: PropertyProps) => { color: "$hiContrast", }), }} - htmlFor={property} + htmlFor={String(property)} > {label} diff --git a/apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx b/apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx index 0195cfadd7..816b4d4bfe 100644 --- a/apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx +++ b/apps/designer/app/designer/features/style-panel/shared/value-picker-popover.tsx @@ -56,8 +56,8 @@ export const ValuePickerPopover = ({ align="start" css={{ width: PANEL_WIDTH }} > - {content} + diff --git a/apps/designer/app/designer/features/style-panel/style-sections.tsx b/apps/designer/app/designer/features/style-panel/style-sections.tsx index 7501ca59fe..04112db691 100644 --- a/apps/designer/app/designer/features/style-panel/style-sections.tsx +++ b/apps/designer/app/designer/features/style-panel/style-sections.tsx @@ -9,12 +9,23 @@ import { import type { SetProperty, CreateBatchUpdate } from "./shared/use-style-data"; import type { InheritedStyle } from "./shared/get-inherited-style"; import * as controls from "./controls"; -import { ShowMore } from "./shared/show-more"; -import { LayoutSection, SpacingSection } from "./sections"; +import { + LayoutSection, + FlexChildSection, + GridChildSection, + SpacingSection, + SizeSection, + PositionSection, + TypographySection, + BackgroundsSection, + BordersSection, + EffectsSection, + OtherSection, +} from "./sections"; import { PropertyName } from "./shared/property-name"; export type PropertyProps = { - property: StyleProperty; + property: StyleProperty | StyleProperty[]; label: string; css?: CSS; }; @@ -32,7 +43,7 @@ export type RenderCategoryProps = { createBatchUpdate: CreateBatchUpdate; currentStyle: Style; sectionStyle: { - [Property in keyof Style]: RenderPropertyProps; + [Property in Required]: RenderPropertyProps; }; inheritedStyle: InheritedStyle; category: Category; @@ -60,7 +71,7 @@ export const renderProperty = ({ if (!Control) return null; return ( - + { - const Category = sections[category]; - if (!Category) { - return ( - <> - {styleConfigsByCategory.map((entry) => renderProperty(entry))} - - renderProperty(entry) - )} - /> - - ); - } - + const Section = sections[category]; return ( - JSX.Element | null; + [Property in Category]: (props: RenderCategoryProps) => JSX.Element | null; } = { layout: LayoutSection, + flexChild: FlexChildSection, + gridChild: GridChildSection, spacing: SpacingSection, + size: SizeSection, + position: PositionSection, + typography: TypographySection, + backgrounds: BackgroundsSection, + borders: BordersSection, + effects: EffectsSection, + other: OtherSection, }; diff --git a/apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx b/apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx index 149dc43b91..85d80606f1 100644 --- a/apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx +++ b/apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx @@ -5,7 +5,11 @@ import { type TextToolbarState, useTextToolbarState, } from "~/designer/shared/nano-states"; -import { ToggleGroup, type CSS } from "@webstudio-is/design-system"; +import { + type CSS, + ToggleGroupRoot, + ToggleGroupItem, +} from "@webstudio-is/design-system"; import { FontBoldIcon, FontItalicIcon, @@ -105,7 +109,7 @@ const Toolbar = ({ css, rootRef, state, onToggle }: ToolbarProps) => { value.push("span"); } return ( - { ...css, }} > - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + ); }; diff --git a/packages/design-system/src/components/popover.tsx b/packages/design-system/src/components/popover.tsx index ef76a4f3b9..def00764ee 100644 --- a/packages/design-system/src/components/popover.tsx +++ b/packages/design-system/src/components/popover.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { CrossIcon } from "@webstudio-is/icons"; +import { CrossLargeIcon } from "@webstudio-is/icons"; import * as PopoverPrimitive from "@radix-ui/react-popover"; import { Box } from "./box"; import { panelStyles } from "./panel"; @@ -25,6 +25,8 @@ const StyledContent = styled(PopoverPrimitive.Content, panelStyles, { "&:focus": { outline: "none", }, + display: "flex", + flexDirection: "column", }); type PopoverContentPrimitiveProps = React.ComponentProps< @@ -67,7 +69,7 @@ type PopoverHeaderProps = { export const PopoverHeader = ({ title }: PopoverHeaderProps) => { return ( - <> + { - + - + ); }; diff --git a/packages/design-system/src/components/toggle-group.tsx b/packages/design-system/src/components/toggle-group.tsx index b8a0d7e7fe..8cb67c13c7 100644 --- a/packages/design-system/src/components/toggle-group.tsx +++ b/packages/design-system/src/components/toggle-group.tsx @@ -1,16 +1,16 @@ import { styled } from "../stitches.config"; import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"; -export const Root = styled(ToggleGroupPrimitive.Root, { +export const ToggleGroupRoot = styled(ToggleGroupPrimitive.Root, { display: "inline-flex", - backgroundColor: "$slate6", - borderRadius: 4, - boxShadow: `0 2px 10px $blackA7`, + borderRadius: "$spacing$3", + boxShadow: `0 0 0 $spacing$1 $colors$slate7`, + padding: 2, }); -export const Item = styled(ToggleGroupPrimitive.Item, { +export const ToggleGroupItem = styled(ToggleGroupPrimitive.Item, { all: "unset", - backgroundColor: "$panel", + backgroundColor: "$loContrast", color: "$hiContrast", display: "flex", whiteSpace: "nowrap", @@ -19,9 +19,10 @@ export const Item = styled(ToggleGroupPrimitive.Item, { alignItems: "center", justifyContent: "center", marginLeft: 1, + borderRadius: 2, + height: "$spacing$11", "&": { - px: "$spacing$5", - py: "$spacing$3", + px: "$spacing$3", }, "&:first-child": { marginLeft: 0, @@ -30,11 +31,7 @@ export const Item = styled(ToggleGroupPrimitive.Item, { }, "&:last-child": { borderTopRightRadius: 4, borderBottomRightRadius: 4 }, "&:hover": { backgroundColor: "$slateA3" }, - "&[data-state=on]": { - backgroundColor: "$slateA5", - }, - "&:focus": { - position: "relative", - boxShadow: `0 0 0 2px black`, - }, + // @note because the outline is outside of the element others can end up covering it + "&:focus": { boxShadow: "0 0 0 $spacing$2 $colors$blue10", zIndex: 1 }, + "&[data-state=on]": { backgroundColor: "$slate5" }, }); diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index a158012adc..a8646bfce6 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -7,7 +7,7 @@ export * as Portal from "@radix-ui/react-portal"; export * from "@radix-ui/react-id"; export { Container } from "./components/container"; export { Label } from "./components/label"; -export * as ToggleGroup from "./components/toggle-group"; +export * from "./components/toggle-group"; export * from "./components/progress-radial"; export * from "./components/select"; export * from "./components/text-field"; diff --git a/packages/icons/src/align-self-baseline.tsx b/packages/icons/src/align-self-baseline.tsx new file mode 100644 index 0000000000..806450615b --- /dev/null +++ b/packages/icons/src/align-self-baseline.tsx @@ -0,0 +1,47 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const AlignSelfBaselineIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + + + + ); + } +); +AlignSelfBaselineIcon.displayName = "AlignSelfBaselineIcon"; diff --git a/packages/icons/src/align-self-center.tsx b/packages/icons/src/align-self-center.tsx new file mode 100644 index 0000000000..5b8f8e0a37 --- /dev/null +++ b/packages/icons/src/align-self-center.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const AlignSelfCenterIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + ); + } +); +AlignSelfCenterIcon.displayName = "AlignSelfCenterIcon"; diff --git a/packages/icons/src/align-self-end.tsx b/packages/icons/src/align-self-end.tsx new file mode 100644 index 0000000000..0c99ee9245 --- /dev/null +++ b/packages/icons/src/align-self-end.tsx @@ -0,0 +1,35 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const AlignSelfEndIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + ); + } +); +AlignSelfEndIcon.displayName = "AlignSelfEndIcon"; diff --git a/packages/icons/src/align-self-start.tsx b/packages/icons/src/align-self-start.tsx new file mode 100644 index 0000000000..b705dd7827 --- /dev/null +++ b/packages/icons/src/align-self-start.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const AlignSelfStartIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + ); + } +); +AlignSelfStartIcon.displayName = "AlignSelfStartIcon"; diff --git a/packages/icons/src/align-self-stretch.tsx b/packages/icons/src/align-self-stretch.tsx new file mode 100644 index 0000000000..26c738d71c --- /dev/null +++ b/packages/icons/src/align-self-stretch.tsx @@ -0,0 +1,41 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const AlignSelfStretchIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + ); + } +); +AlignSelfStretchIcon.displayName = "AlignSelfStretchIcon"; diff --git a/packages/icons/src/cross-large.tsx b/packages/icons/src/cross-large.tsx new file mode 100644 index 0000000000..0b1c591b1c --- /dev/null +++ b/packages/icons/src/cross-large.tsx @@ -0,0 +1,26 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const CrossLargeIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + ); + } +); +CrossLargeIcon.displayName = "CrossLargeIcon"; diff --git a/packages/icons/src/cross-small.tsx b/packages/icons/src/cross-small.tsx new file mode 100644 index 0000000000..f930d59adf --- /dev/null +++ b/packages/icons/src/cross-small.tsx @@ -0,0 +1,26 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const CrossSmallIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + ); + } +); +CrossSmallIcon.displayName = "CrossSmallIcon"; diff --git a/packages/icons/src/ellipses.tsx b/packages/icons/src/ellipses.tsx new file mode 100644 index 0000000000..bcca0255fb --- /dev/null +++ b/packages/icons/src/ellipses.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const EllipsesIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + ); + } +); +EllipsesIcon.displayName = "EllipsesIcon"; diff --git a/packages/icons/src/flex-sizing-grow.tsx b/packages/icons/src/flex-sizing-grow.tsx new file mode 100644 index 0000000000..a91ba276fd --- /dev/null +++ b/packages/icons/src/flex-sizing-grow.tsx @@ -0,0 +1,34 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const FlexSizingGrowIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + ); + } +); +FlexSizingGrowIcon.displayName = "FlexSizingGrowIcon"; diff --git a/packages/icons/src/flex-sizing-shrink.tsx b/packages/icons/src/flex-sizing-shrink.tsx new file mode 100644 index 0000000000..db9977fe43 --- /dev/null +++ b/packages/icons/src/flex-sizing-shrink.tsx @@ -0,0 +1,30 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const FlexSizingShrinkIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + ); + } +); +FlexSizingShrinkIcon.displayName = "FlexSizingGrowIcon"; diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts index e5f9f02f1a..71cfed5e37 100644 --- a/packages/icons/src/index.ts +++ b/packages/icons/src/index.ts @@ -65,3 +65,15 @@ export * from "./cross-circled-filled"; export * from "./cross"; export * from "./magnifying-glass"; export * from "./menu"; +export * from "./align-self-start"; +export * from "./align-self-end"; +export * from "./align-self-center"; +export * from "./align-self-stretch"; +export * from "./align-self-baseline"; +export * from "./flex-sizing-grow"; +export * from "./flex-sizing-shrink"; +export * from "./order-first"; +export * from "./order-last"; +export * from "./cross-small"; +export * from "./cross-large"; +export * from "./ellipses"; diff --git a/packages/icons/src/order-first.tsx b/packages/icons/src/order-first.tsx new file mode 100644 index 0000000000..319d43a83b --- /dev/null +++ b/packages/icons/src/order-first.tsx @@ -0,0 +1,36 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const OrderFirstIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + ); + } +); +OrderFirstIcon.displayName = "OrderFirstIcon"; diff --git a/packages/icons/src/order-last.tsx b/packages/icons/src/order-last.tsx new file mode 100644 index 0000000000..d5a0ea57f8 --- /dev/null +++ b/packages/icons/src/order-last.tsx @@ -0,0 +1,36 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const OrderLastIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + + ); + } +); +OrderLastIcon.displayName = "OrderLastIcon";