From b1d748f8bd6d4e31e3ff6a583c1ef16eccee9948 Mon Sep 17 00:00:00 2001 From: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com> Date: Thu, 23 Nov 2023 02:35:34 +0500 Subject: [PATCH] UI Component docs (Display & Feedback components) (#2453) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ui docs * UI docs for display components * docs for display and feedback components * minor edits * minor changes * cleaned up code * Move telemetry * Revised Feedback/Display UI docs & added input UI docs * Docs for Input components * updated icons * docs for input/components * minor edits based on feedback * add css to ui components * Fixed spacing issue in button groups --------- Co-authored-by: Félix Malfait Co-authored-by: Charles Bochet --- docs/docs/contributor/frontend/frontend.mdx | 1 + .../ui-components/display/_category_.json | 6 +- .../ui-components/display/app-tooltip.mdx | 139 +++ .../ui-components/display/checkmark.mdx | 97 ++- .../frontend/ui-components/display/chip.mdx | 252 ++++++ .../frontend/ui-components/display/icons.mdx | 134 +++ .../ui-components/display/soon-pill.mdx | 49 ++ .../frontend/ui-components/display/tag.mdx | 68 ++ .../ui-components/feedback/_category_.json | 9 + .../ui-components/feedback/progress-bar.mdx | 143 ++++ .../ui-components/input/_category_.json | 9 + .../frontend/ui-components/input/button.mdx | 798 ++++++++++++++++++ .../frontend/ui-components/input/checkbox.mdx | 93 ++ .../ui-components/input/color-scheme.mdx | 111 +++ .../ui-components/input/icon-picker.mdx | 92 ++ .../ui-components/input/image-input.mdx | 92 ++ .../frontend/ui-components/input/radio.mdx | 164 ++++ .../ui-components/input/text-input.mdx | 160 ++++ .../frontend/ui-components/ui-components.mdx | 6 +- docs/docs/index.mdx | 3 + docs/docs/others/_category_.json | 4 - docs/docs/others/telemetry.mdx | 16 - .../{others => start}/bug-and-requests.mdx | 2 + .../self-hosting/enviroment-variables.mdx | 6 +- docs/sidebars.js | 12 +- docs/src/theme/icons.js | 19 + docs/src/ui/SandpackEditor.js | 45 +- docs/src/ui/display/animatedCheckmarkCode.js | 14 + docs/src/ui/display/appTooltipCode.js | 22 + docs/src/ui/display/checkmarkCode.js | 5 + docs/src/ui/display/chipCode.js | 17 + docs/src/ui/display/entityChipCode.js | 19 + docs/src/ui/display/iconAddressBookCode.js | 5 + .../display/overflowingTextWithTooltipCode.js | 8 + docs/src/ui/display/soonPillCode.js | 5 + docs/src/ui/display/tablerIconExampleCode.js | 5 + docs/src/ui/display/tagCode.js | 12 + .../ui/feedback/circularProgressBarCode.js | 5 + docs/src/ui/feedback/progressBarCode.js | 14 + docs/src/ui/generated/index.d.ts | 376 ++++++++- docs/src/ui/generated/index.js | 2 +- docs/src/ui/input/button/buttonCode.js | 20 + docs/src/ui/input/button/buttonGroupCode.js | 51 ++ .../src/ui/input/button/floatingButtonCode.js | 18 + .../input/button/floatingButtonGroupCode.js | 32 + .../ui/input/button/floatingIconButtonCode.js | 19 + .../button/floatingIconButtonGroupCode.js | 24 + docs/src/ui/input/button/lightButtonCode.js | 14 + .../ui/input/button/lightIconButtonCode.js | 19 + docs/src/ui/input/button/mainButtonCode.js | 14 + .../ui/input/button/roundedIconButtonCode.js | 10 + .../input/color-scheme/colorSchemeCardCode.js | 10 + .../color-scheme/colorSchemePickerCode.js | 8 + .../input/components/autosizeTextInputCode.js | 18 + docs/src/ui/input/components/checkboxCode.js | 15 + .../entityTitleDoubleTextInputCode.js | 27 + .../src/ui/input/components/iconPickerCode.js | 23 + .../src/ui/input/components/imageInputCode.js | 5 + docs/src/ui/input/components/radioCode.js | 25 + .../src/ui/input/components/radioGroupCode.js | 20 + docs/src/ui/uiComponents.css | 9 + .../ui/display/pill/components/SoonPill.tsx | 2 +- .../modules/ui/display/tag/components/Tag.tsx | 2 +- .../button/components/FloatingButtonGroup.tsx | 2 +- .../components/FloatingIconButtonGroup.tsx | 2 +- front/tsup.ui.index.tsx | 28 +- 66 files changed, 3394 insertions(+), 62 deletions(-) create mode 100644 docs/docs/contributor/frontend/ui-components/display/app-tooltip.mdx create mode 100644 docs/docs/contributor/frontend/ui-components/display/chip.mdx create mode 100644 docs/docs/contributor/frontend/ui-components/display/icons.mdx create mode 100644 docs/docs/contributor/frontend/ui-components/display/soon-pill.mdx create mode 100644 docs/docs/contributor/frontend/ui-components/display/tag.mdx create mode 100644 docs/docs/contributor/frontend/ui-components/feedback/_category_.json create mode 100644 docs/docs/contributor/frontend/ui-components/feedback/progress-bar.mdx create mode 100644 docs/docs/contributor/frontend/ui-components/input/_category_.json create mode 100644 docs/docs/contributor/frontend/ui-components/input/button.mdx create mode 100644 docs/docs/contributor/frontend/ui-components/input/checkbox.mdx create mode 100644 docs/docs/contributor/frontend/ui-components/input/color-scheme.mdx create mode 100644 docs/docs/contributor/frontend/ui-components/input/icon-picker.mdx create mode 100644 docs/docs/contributor/frontend/ui-components/input/image-input.mdx create mode 100644 docs/docs/contributor/frontend/ui-components/input/radio.mdx create mode 100644 docs/docs/contributor/frontend/ui-components/input/text-input.mdx delete mode 100644 docs/docs/others/_category_.json delete mode 100644 docs/docs/others/telemetry.mdx rename docs/docs/{others => start}/bug-and-requests.mdx (85%) create mode 100644 docs/src/ui/display/animatedCheckmarkCode.js create mode 100644 docs/src/ui/display/appTooltipCode.js create mode 100644 docs/src/ui/display/checkmarkCode.js create mode 100644 docs/src/ui/display/chipCode.js create mode 100644 docs/src/ui/display/entityChipCode.js create mode 100644 docs/src/ui/display/iconAddressBookCode.js create mode 100644 docs/src/ui/display/overflowingTextWithTooltipCode.js create mode 100644 docs/src/ui/display/soonPillCode.js create mode 100644 docs/src/ui/display/tablerIconExampleCode.js create mode 100644 docs/src/ui/display/tagCode.js create mode 100644 docs/src/ui/feedback/circularProgressBarCode.js create mode 100644 docs/src/ui/feedback/progressBarCode.js create mode 100644 docs/src/ui/input/button/buttonCode.js create mode 100644 docs/src/ui/input/button/buttonGroupCode.js create mode 100644 docs/src/ui/input/button/floatingButtonCode.js create mode 100644 docs/src/ui/input/button/floatingButtonGroupCode.js create mode 100644 docs/src/ui/input/button/floatingIconButtonCode.js create mode 100644 docs/src/ui/input/button/floatingIconButtonGroupCode.js create mode 100644 docs/src/ui/input/button/lightButtonCode.js create mode 100644 docs/src/ui/input/button/lightIconButtonCode.js create mode 100644 docs/src/ui/input/button/mainButtonCode.js create mode 100644 docs/src/ui/input/button/roundedIconButtonCode.js create mode 100644 docs/src/ui/input/color-scheme/colorSchemeCardCode.js create mode 100644 docs/src/ui/input/color-scheme/colorSchemePickerCode.js create mode 100644 docs/src/ui/input/components/autosizeTextInputCode.js create mode 100644 docs/src/ui/input/components/checkboxCode.js create mode 100644 docs/src/ui/input/components/entityTitleDoubleTextInputCode.js create mode 100644 docs/src/ui/input/components/iconPickerCode.js create mode 100644 docs/src/ui/input/components/imageInputCode.js create mode 100644 docs/src/ui/input/components/radioCode.js create mode 100644 docs/src/ui/input/components/radioGroupCode.js create mode 100644 docs/src/ui/uiComponents.css diff --git a/docs/docs/contributor/frontend/frontend.mdx b/docs/docs/contributor/frontend/frontend.mdx index 47a071768..1069f4000 100644 --- a/docs/docs/contributor/frontend/frontend.mdx +++ b/docs/docs/contributor/frontend/frontend.mdx @@ -1,4 +1,5 @@ --- +id: frontend title: Frontend Development displayed_sidebar: frontendSidebar sidebar_position: 0 diff --git a/docs/docs/contributor/frontend/ui-components/display/_category_.json b/docs/docs/contributor/frontend/ui-components/display/_category_.json index c461eded7..02fc981b5 100644 --- a/docs/docs/contributor/frontend/ui-components/display/_category_.json +++ b/docs/docs/contributor/frontend/ui-components/display/_category_.json @@ -1,9 +1,9 @@ { "label": "Display", - "position": 0, + "position": 1, "collapsible": true, - "collapsed": true, + "collapsed": false, "customProps": { - "icon": "TbForms" + "icon": "TbAppWindow" } } diff --git a/docs/docs/contributor/frontend/ui-components/display/app-tooltip.mdx b/docs/docs/contributor/frontend/ui-components/display/app-tooltip.mdx new file mode 100644 index 000000000..3ad04432d --- /dev/null +++ b/docs/docs/contributor/frontend/ui-components/display/app-tooltip.mdx @@ -0,0 +1,139 @@ +--- +title: App Tooltip +sidebar_position: 6 +sidebar_custom_props: + icon: TbTooltip +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import appTooltipCode from '!!raw-loader!@site/src/ui/display/appTooltipCode.js' +import overflowingTextWithTooltipCode from '!!raw-loader!@site/src/ui/display/overflowingTextWithTooltipCode.js' +import { SandpackEditor} from '@site/src/ui/SandpackEditor' + +A brief message that displays additional information when a user interacts with an element. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropsTypeDescription
classNamestringOptional CSS class for additional styling
anchorSelectCSS selectorSelector for the tooltip anchor (the element that triggers the tooltip)
contentstringThe content you want to display within the tooltip
delayHidenumberThe delay in seconds before hiding the tooltip after the cursor leaves the anchor
offsetnumberThe offset in pixels for positioning the tooltip
noArrowbooleanIf `true`, hides the arrow on the tooltip
isOpenbooleanIf `true`, the tooltip is open by default
place`PlacesType` string from `react-tooltip`Specifies the placement of the tooltip. Values include `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, and `left-end`
positionStrategy`PositionStrategy` string from `react-tooltip`Position strategy for the tooltip. Has two values: `absolute` and `fixed`
+ + + + + + +## Overflowing Text with Tooltip + +Handles overflowing text and displays a tooltip when the text overflows. + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropsTypeDescription
textstringThe content you want to display in the overflowing text area
+ + + + \ No newline at end of file diff --git a/docs/docs/contributor/frontend/ui-components/display/checkmark.mdx b/docs/docs/contributor/frontend/ui-components/display/checkmark.mdx index ccb3cb8b7..b4c8d926c 100644 --- a/docs/docs/contributor/frontend/ui-components/display/checkmark.mdx +++ b/docs/docs/contributor/frontend/ui-components/display/checkmark.mdx @@ -1,18 +1,95 @@ --- title: Checkmark sidebar_position: 1 +sidebar_custom_props: + icon: TbCheck --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import checkmarkCode from '!!raw-loader!@site/src/ui/display/checkmarkCode.js' +import animatedCheckmarkCode from '!!raw-loader!@site/src/ui/display/animatedCheckmarkCode.js' import { SandpackEditor} from '@site/src/ui/SandpackEditor' +Represents a successful or completed action. + + + + { - return <>