From 6d33a0806951195ec19c1dc3342d2c1956aefb2b Mon Sep 17 00:00:00 2001 From: Malik Rashad Date: Wed, 5 Jul 2023 08:41:32 -0500 Subject: [PATCH 01/11] initial push --- apps/website/src/pages/_global.astro | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/apps/website/src/pages/_global.astro b/apps/website/src/pages/_global.astro index 2d76fcfb644..7353cbe2660 100644 --- a/apps/website/src/pages/_global.astro +++ b/apps/website/src/pages/_global.astro @@ -62,6 +62,11 @@ const { content = {} } = Astro.props; max-width: 75ch; } + :where(p) { + padding-block-start: 0.5; + padding-block-end: 1.5rem; + } + :where(h1, h2) { line-height: 1.2; } From 6a0afad805b35c17956a665ec3c3ba7ab1a03249 Mon Sep 17 00:00:00 2001 From: Malik Rashad Date: Wed, 5 Jul 2023 09:27:27 -0500 Subject: [PATCH 02/11] updated padding & alert.mdx --- apps/website/src/pages/_global.astro | 10 ++++++---- apps/website/src/pages/docs/alert.mdx | 24 ++++++++++++------------ 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/apps/website/src/pages/_global.astro b/apps/website/src/pages/_global.astro index 7353cbe2660..352aa970746 100644 --- a/apps/website/src/pages/_global.astro +++ b/apps/website/src/pages/_global.astro @@ -63,12 +63,12 @@ const { content = {} } = Astro.props; } :where(p) { - padding-block-start: 0.5; - padding-block-end: 1.5rem; + padding-block-start: 0.5rem; + padding-block-end: 0.5rem; } - :where(h1, h2) { - line-height: 1.2; + :where(h1, h2, h3) { + line-height: 1; } :where(h1) { @@ -77,10 +77,12 @@ const { content = {} } = Astro.props; :where(h2) { font-size: var(--type-3); + padding-block-start: 4rem; } :where(h3) { font-size: var(--type-2); + padding-block-start: 4rem; } :where(code, pre) { diff --git a/apps/website/src/pages/docs/alert.mdx b/apps/website/src/pages/docs/alert.mdx index 00a97c6b5f2..e98b4f2e784 100644 --- a/apps/website/src/pages/docs/alert.mdx +++ b/apps/website/src/pages/docs/alert.mdx @@ -25,36 +25,36 @@ The alert message must be concise, we recommend no more than 256 characters. If ### Informational +Default style when there is no defined status for the alert. Inform users about events that they should be aware of, but that are not disruptive to their work. + -Default style when there is no defined status for the alert. Inform users about events that they should be aware of, but that are not disruptive to their work. - ### Positive +The positive alert is used to inform the user of a positive status. + -The positive alert is used to inform the user of a positive status. - ### Warning +The warning alert is used to inform the user of something that is not currently disruptive to their work, but may be soon or eventually. + -The warning alert is used to inform the user of something that is not currently disruptive to their work, but may be soon or eventually. - ### Negative +Use this only when the system is broken. Leave the technical details behind and explain the problem to the user in an easily understood tone. Mention when the problem might get solved, if it applies. + -Use this only when the system is broken. Leave the technical details behind and explain the problem to the user in an easily understood tone. Mention when the problem might get solved, if it applies. - ### Multilines All alerts may support multiple lines if necessary. We recommend keeping it brief and keep the message as concise as possible. @@ -65,22 +65,22 @@ The alert notification can display in two different ways: ### Inline +An inline alert appears embedded within the copy of the site as a block element. This means that when the user scrolls, the alert scrolls as well. + -An inline alert appears embedded within the copy of the site as a block element. This means that when the user scrolls, the alert scrolls as well. - Inline alerts can optionally be dismissible. Once the alert is dismissed, the content below it will shift upwards due to the alert no longer consuming space. ### Sticky +A sticky alert appears full width stuck at the top of the window frame. That means if the user scrolls, the alert stays at the top of the frame and as the content scrolls underneath it. A sticky alert must always be dismissible. The alert appears above all other UI elements except for toast notifications and modals. + -A sticky alert appears full width stuck at the top of the window frame. That means if the user scrolls, the alert stays at the top of the frame and as the content scrolls underneath it. A sticky alert must always be dismissible. The alert appears above all other UI elements except for toast notifications and modals. - It is up to the development team wether or not the sticky alert should push the rest of the content down or not. ## Props From 1cecb96e5ec393ddc7990e0cc7f45c6dec5b9705 Mon Sep 17 00:00:00 2001 From: Malik Rashad Date: Wed, 5 Jul 2023 10:17:21 -0500 Subject: [PATCH 03/11] updated styling (for left-sidebar) --- apps/website/src/pages/_global.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/_global.astro b/apps/website/src/pages/_global.astro index 352aa970746..41ff64e151b 100644 --- a/apps/website/src/pages/_global.astro +++ b/apps/website/src/pages/_global.astro @@ -75,7 +75,7 @@ const { content = {} } = Astro.props; font-size: var(--type-4); } - :where(h2) { + :where(h2:not(left-sidebar *)) { font-size: var(--type-3); padding-block-start: 4rem; } From d927ac41f3237b15209fd551e17e34977f2d2d40 Mon Sep 17 00:00:00 2001 From: Malik Rashad Date: Wed, 5 Jul 2023 15:30:55 -0500 Subject: [PATCH 04/11] reorganized the website element order --- apps/website/src/pages/docs/blockquote.mdx | 4 +- apps/website/src/pages/docs/button.mdx | 40 +++++++++---------- apps/website/src/pages/docs/checkbox.mdx | 24 +++++------ apps/website/src/pages/docs/nonidealstate.mdx | 28 ++++++------- apps/website/src/pages/docs/radio.mdx | 4 +- apps/website/src/pages/docs/radiotile.mdx | 4 +- apps/website/src/pages/docs/select.mdx | 8 ++-- apps/website/src/pages/docs/slider.mdx | 24 +++++------ apps/website/src/pages/docs/stepper.mdx | 24 +++++------ apps/website/src/pages/docs/tag.mdx | 24 +++++------ apps/website/src/pages/docs/textarea.mdx | 14 +++---- apps/website/src/pages/docs/toggleswitch.mdx | 16 ++++---- 12 files changed, 107 insertions(+), 107 deletions(-) diff --git a/apps/website/src/pages/docs/blockquote.mdx b/apps/website/src/pages/docs/blockquote.mdx index ecf20ac2418..c9bf4a5a811 100644 --- a/apps/website/src/pages/docs/blockquote.mdx +++ b/apps/website/src/pages/docs/blockquote.mdx @@ -21,12 +21,12 @@ Blockquotes are used to isolate and highlight a large quotation made by a source ## Usage +If the citation was pulled from a website, you can provide the URL using the 'cite' tag for best practice purposes, but the blockquote does not provide a hyperlink to that location. + -If the citation was pulled from a website, you can provide the URL using the 'cite' tag for best practice purposes, but the blockquote does not provide a hyperlink to that location. - ## Props diff --git a/apps/website/src/pages/docs/button.mdx b/apps/website/src/pages/docs/button.mdx index ff70f66cad2..629abe6a8d0 100644 --- a/apps/website/src/pages/docs/button.mdx +++ b/apps/website/src/pages/docs/button.mdx @@ -29,97 +29,97 @@ In some cases, buttons can also be used in place of href links to draw special a ### Default +The default button should be used in most circumstances. If you are unsure as to what button to use, use this button! + -The default button should be used in most circumstances. If you are unsure as to what button to use, use this button! - ### High visibility +This is the button to emphasize an action applicable to an area of the page or a [dialog](dialog). High visibility buttons are used to draw the user’s attention to the main action of the page. +There should only be one high visibility button per area of the user interface. + -This is the button to emphasize an action applicable to an area of the page or a [dialog](dialog). High visibility buttons are used to draw the user’s attention to the main action of the page. -There should only be one high visibility button per area of the user interface. - ### Call-to-action +The call-to-action button, also referred to as the CTA, is the button that is used for most full page layouts and whole-page overlays (think Next in [stepper](stepper) interactions). This is the biggest and most noticeable button. +One call-to-action button per visible page is the rule. Treat it as a large, “CLICK HERE” guide for the user. + -The call-to-action button, also referred to as the CTA, is the button that is used for most full page layouts and whole-page overlays (think Next in [stepper](stepper) interactions). This is the biggest and most noticeable button. -One call-to-action button per visible page is the rule. Treat it as a large, “CLICK HERE” guide for the user. - ### Borderless +The borderless button is useful in tighter areas where using a default button would visibly cause too many boxes. + -The borderless button is useful in tighter areas where using a default button would visibly cause too many boxes. - The borderless button is often used by actionable icons in relation to another component. They are commonly used within [table](table) rows and widgets. ### Size +There are 3 different sizes available, which can be applied to any button. The medium size is a default and should always be the first choice, unless there are good reasons to use the small or large version. + -There are 3 different sizes available, which can be applied to any button. The medium size is a default and should always be the first choice, unless there are good reasons to use the small or large version. - ## Button props ## Split button +Pressing the left side of this button will commit the action. Pressing the right side of the button will open a menu. + -Pressing the left side of this button will commit the action. Pressing the right side of the button will open a menu. - ### Props ## Dropdown button +Pressing this button will always open a menu. Upon selecting an option from the menu, the action immediately takes place. The menu button should only be styled as default buttons and borderless buttons. + -Pressing this button will always open a menu. Upon selecting an option from the menu, the action immediately takes place. The menu button should only be styled as default buttons and borderless buttons. - ### Props ## Icon button +Icon button gives the icon the correct styling as well as adds some clickable padding within the button, ensuring icons meet the necessary touch target size. + -Icon button gives the icon the correct styling as well as adds some clickable padding within the button, ensuring icons meet the necessary touch target size. - ### Props ## Ideas button +The Ideas button is unique and should only be used under certain circumstances. You will need to perform an audit of your application to ensure that the feedback button does not cover / obscure any tools. + -The Ideas button is unique and should only be used under certain circumstances. You will need to perform an audit of your application to ensure that the feedback button does not cover / obscure any tools. - If the button does obscure anything important, we suggest adding empty space at the bottom of the page so the user can scroll far enough down that the button doesn’t overlap the underlying tools. ### Props diff --git a/apps/website/src/pages/docs/checkbox.mdx b/apps/website/src/pages/docs/checkbox.mdx index 846f8e572b0..eb5806efb60 100644 --- a/apps/website/src/pages/docs/checkbox.mdx +++ b/apps/website/src/pages/docs/checkbox.mdx @@ -27,54 +27,54 @@ A checkbox is not interchangeable with a [radio](radio). A radio must have at mi ### Default +The default checkboxes are used to turn on and off one or multiple options. + -The default checkboxes are used to turn on and off one or multiple options. - ### Visibility +Often times checkboxes are used to visibly turn on and off a layer within a view. If the checkboxes are used for visibility you can use the eyeball variant which uses an eyeball icon instead of a checkmark to reinforce that something is being shown or hidden. + -Often times checkboxes are used to visibly turn on and off a layer within a view. If the checkboxes are used for visibility you can use the eyeball variant which uses an eyeball icon instead of a checkmark to reinforce that something is being shown or hidden. - ## Usage ### With input group +Checkboxes are often paired with the [input group](inputgroup) which gives many additional options. + -Checkboxes are often paired with the [input group](inputgroup) which gives many additional options. - ### Indeterminate +When a main option has associated sub-options, parent-child checkboxes are used. They make selecting/unselecting the entirety of a list of options easier if all or neither of them apply to a user’s choice. If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox. + -When a main option has associated sub-options, parent-child checkboxes are used. They make selecting/unselecting the entirety of a list of options easier if all or neither of them apply to a user’s choice. If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox. - ### Loading +If the checkbox is performing an action immediately after being checked, it may take the user interface some time before reflecting that change. While waiting for that change to occur you can display a loading checkbox so the user understands that the action taken has yet to be applied. + -If the checkbox is performing an action immediately after being checked, it may take the user interface some time before reflecting that change. While waiting for that change to occur you can display a loading checkbox so the user understands that the action taken has yet to be applied. - ### Statuses +If you ever need to display the status or severity of a single checkbox, you can apply a status on the checkbox. Before doing so, consider if using an [input group](inputgroup) with a status message makes more sense. + -If you ever need to display the status or severity of a single checkbox, you can apply a status on the checkbox. Before doing so, consider if using an [input group](inputgroup) with a status message makes more sense. - ## Props diff --git a/apps/website/src/pages/docs/nonidealstate.mdx b/apps/website/src/pages/docs/nonidealstate.mdx index b19aed9610c..6bc634b7b95 100644 --- a/apps/website/src/pages/docs/nonidealstate.mdx +++ b/apps/website/src/pages/docs/nonidealstate.mdx @@ -48,60 +48,60 @@ Potential causes other than invalid credentials; - Page loaded incorrectly; - Mistake on the site owner’s side. +A 403 error means the client encountering it is completely forbidden from accessing the page. In this case, the user cannot do much to resolve it, as the resource is accessible only by the authorized parties. + -A 403 error means the client encountering it is completely forbidden from accessing the page. In this case, the user cannot do much to resolve it, as the resource is accessible only by the authorized parties. - ### Error 500 +Also called Internal Server Error, a 500 error code means something went wrong with the website’s server, but it is unable to identify what caused the issue. More often than not, the error is on the user’s side. + -Also called Internal Server Error, a 500 error code means something went wrong with the website’s server, but it is unable to identify what caused the issue. More often than not, the error is on the user’s side. - ### Error 502 +Error code 502 is a Bad Gateway error. This means the communication between two servers resulted in an error, leading to a deadend. The user has no control over this error as it happens when there is a miscommunication between online servers. + -Error code 502 is a Bad Gateway error. This means the communication between two servers resulted in an error, leading to a deadend. The user has no control over this error as it happens when there is a miscommunication between online servers. - ### Error 503 +Service Unavailable is the issue you get from a 503 error. It means the online server has encountered a problem because the network is unavailable (internet connection was interrupted), and thus cannot fulfill the request. The user cannot do anything about this issue. + -Service Unavailable is the issue you get from a 503 error. It means the online server has encountered a problem because the network is unavailable (internet connection was interrupted), and thus cannot fulfill the request. The user cannot do anything about this issue. - ### Timed out +For security reasons, certain web sessions will automatically sign a user out when they remain inactive for a few minutes. The user must then renew the session. This process may or may not require that they re-enter their credentials to resume; this is at developer’s discretion. + -For security reasons, certain web sessions will automatically sign a user out when they remain inactive for a few minutes. The user must then renew the session. This process may or may not require that they re-enter their credentials to resume; this is at developer’s discretion. - ### Generic error +Used in any error that isn’t discussed above. This error can also be used if you disagree that an illustration doesn’t properly convey your specific error. + -Used in any error that isn’t discussed above. This error can also be used if you disagree that an illustration doesn’t properly convey your specific error. - ### Redirection notice +This one isn’t technically an error, but more of an information page that requires an action from the user. If a clickable link has more than one potential destination, take the user to this page so they can decide where they want to land. A Remember my choice checkbox can be shown below so if the link is used more than once, the user won’t need to select a button every time. + -This one isn’t technically an error, but more of an information page that requires an action from the user. If a clickable link has more than one potential destination, take the user to this page so they can decide where they want to land. A Remember my choice checkbox can be shown below so if the link is used more than once, the user won’t need to select a button every time. - If the two destinations offered have the exact same relevance, use hollow buttons for both. If one destination is more likely to be selected than the other based on the user’s goal upon clicking the original link, use a high-visibility button for the most relevant destination, and a hollow button for the other. Always put the high-visibility button on the left. If the amount of redirection locations exceed 2, you may use an alternative design where the redirection selection is made via a select menu. diff --git a/apps/website/src/pages/docs/radio.mdx b/apps/website/src/pages/docs/radio.mdx index fe80aa93fda..93e76ba3366 100644 --- a/apps/website/src/pages/docs/radio.mdx +++ b/apps/website/src/pages/docs/radio.mdx @@ -23,12 +23,12 @@ A radio is not interchangeable with a [checkbox](checkbox). A radio must have at ### Statuses +If you ever need to display the status or severity of a single radio, you can apply a status on the radio. Before doing so, consider if using an [input group](inputgroup) with a status message makes more sense. + -If you ever need to display the status or severity of a single radio, you can apply a status on the radio. Before doing so, consider if using an [input group](inputgroup) with a status message makes more sense. - ## Props diff --git a/apps/website/src/pages/docs/radiotile.mdx b/apps/website/src/pages/docs/radiotile.mdx index 5c41c3cb2dd..a2a45219feb 100644 --- a/apps/website/src/pages/docs/radiotile.mdx +++ b/apps/website/src/pages/docs/radiotile.mdx @@ -11,6 +11,8 @@ import PropsTable from '~/components/PropsTable.astro'; import LiveExample from '~/components/LiveExample.astro'; import * as AllExamples from 'examples'; +A series of selectable tile components that behave like [radio button](radio). You may include icons to help make each tile more identifiable. +

{frontmatter.description}

@@ -19,8 +21,6 @@ import * as AllExamples from 'examples'; ## Usage -A series of selectable tile components that behave like [radio button](radio). You may include icons to help make each tile more identifiable. - The example below is the condensed version of the radio tiles. They contain only a label and an icon (the icon is optional but recommended if using condensed). If you do not need descriptive text, go with the condensed radio tiles to save space. Disabled radio tiles can coexit with active tile. A selected tile can also take on the disabled state. diff --git a/apps/website/src/pages/docs/select.mdx b/apps/website/src/pages/docs/select.mdx index 09fc7751d7d..d257029e582 100644 --- a/apps/website/src/pages/docs/select.mdx +++ b/apps/website/src/pages/docs/select.mdx @@ -45,12 +45,12 @@ The default appearance of the collapsed select menu can either display placehold ### Sublabels +If the options have sub-labels, but the field is default-sized, omit the sub-label in the field when it displays a selected option (as shown above). + -If the options have sub-labels, but the field is default-sized, omit the sub-label in the field when it displays a selected option (as shown above). - ### Statuses @@ -59,12 +59,12 @@ If the options have sub-labels, but the field is default-sized, omit the sub-lab ### Truncation +Ideally, truncation in select menus should be avoided as much as possible. It is recommended that the collapsed select be wide enough to fit 24 characters, plus the ellipsis symbol. There may be cases where this cannot be followed, so it is only our best recommendation. + -Ideally, truncation in select menus should be avoided as much as possible. It is recommended that the collapsed select be wide enough to fit 24 characters, plus the ellipsis symbol. There may be cases where this cannot be followed, so it is only our best recommendation. - In certain situations, text truncation is inevitable. This may happen in a select menu containing files or folders that were named by the user. ## Props diff --git a/apps/website/src/pages/docs/slider.mdx b/apps/website/src/pages/docs/slider.mdx index 55ccfa61838..659815276f2 100644 --- a/apps/website/src/pages/docs/slider.mdx +++ b/apps/website/src/pages/docs/slider.mdx @@ -29,26 +29,26 @@ Use the default slider in most situations, when a simple gradation between numer ### Range +The range sliders should be used when the desired input is a range such as 25 through 75. + -The range sliders should be used when the desired input is a range such as 25 through 75. +You can have multiple ranges and can also have the range wrap. -You can have multiple ranges and can also have the range wrap. - ### Vertical +The slider can be displayed horizontally (default) or vertically. + -The slider can be displayed horizontally (default) or vertically. - ## Usage Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters. @@ -63,34 +63,34 @@ Sliders reflect the current state of the settings they control. ### Labels & steps +You can display min / max labels as text or icons and can optionally enable tick labels underneath the slider. You can also have the value jump by a certain amount of steps - in this example it jumps by `10`. To have more finer control, the jump can be changed to a decimal such as `0.5`. + -You can display min / max labels as text or icons and can optionally enable tick labels underneath the slider. You can also have the value jump by a certain amount of steps - in this example it jumps by `10`. To have more finer control, the jump can be changed to a decimal such as `0.5`. - ### Custom thumb +The thumb can be customized if desired. + -The thumb can be customized if desired. - ### Tooltips +Tooltips are enabled by default but can be turned off. + -Tooltips are enabled by default but can be turned off. +Tooltips can also be customized such as changing the placement or the information that is displayed within it. -Tooltips can also be customized such as changing the placement or the information that is displayed within it. - ## Props To be defined. diff --git a/apps/website/src/pages/docs/stepper.mdx b/apps/website/src/pages/docs/stepper.mdx index 369fa29c7a3..943cf66599f 100644 --- a/apps/website/src/pages/docs/stepper.mdx +++ b/apps/website/src/pages/docs/stepper.mdx @@ -25,22 +25,22 @@ There are two different styles of stepper, depending on the amount of steps requ ### Short Stepper +In the default "short" stepper, each step is named under a circle. + -In the default "short" stepper, each step is named under a circle. - Designers should confirm the display is acceptable due to the number of steps and labels at various resolutions. If text wrapping occurs or the stepper's visual quality decreases significantly when the window is re-sized, use the [long stepper](#long-stepper) instead. ### Long Stepper +In the long stepper, there are no labels underneath the step indicators to save space. Instead, the label for the step currently in progress appears under the diagram along with ‘Step X of X’. This allocates more space for longer step names, as well as allowing more step indicators to be contained within the diagram. + -In the long stepper, there are no labels underneath the step indicators to save space. Instead, the label for the step currently in progress appears under the diagram along with ‘Step X of X’. This allocates more space for longer step names, as well as allowing more step indicators to be contained within the diagram. - ## Usage ### Short vs Long Stepper @@ -53,26 +53,22 @@ In the long stepper, there are no labels underneath the step indicators to save ### Tooltip +Additional (optional) information can be displayed within a [tooltip](tooltip) when hovering over a step indicator. + -Additional (optional) information can be displayed within a [tooltip](tooltip) when hovering over a step indicator. - ### Localization +The ‘Step X of X’ label that appears in the default long stepper can be replaced with a localized string. + -The ‘Step X of X’ label that appears in the default long stepper can be replaced with a localized string. - ### Layout - - - - We recommend the following layout: 1. **Title**: Displayed above the stepper so the user acknowledges what the process is about. @@ -83,6 +79,10 @@ We recommend the following layout: 4. [**Buttons**](button): A [call-to-action button](button#call-to-action) for progress & one or two [default](button#default) buttons for canceling and/or going back one step. If the user has not completed a required task, the call-to-action button may be disabled. If the stepper is in a full screen page, the buttons can be placed within a sticky footer. + + + + ## Props diff --git a/apps/website/src/pages/docs/tag.mdx b/apps/website/src/pages/docs/tag.mdx index 939f7324eff..790c3052220 100644 --- a/apps/website/src/pages/docs/tag.mdx +++ b/apps/website/src/pages/docs/tag.mdx @@ -24,56 +24,56 @@ Tags are user-generated keywords used to label, categorize, or organize items an ### Default +Default tags can be added and removed by a user. Tags adapt their size to the length of the label inside, making it easier to tell them apart due to their different sizes. + -Default tags can be added and removed by a user. Tags adapt their size to the length of the label inside, making it easier to tell them apart due to their different sizes. - ### Basic +Tags in the basic state are static and cannot be removed or edited by the user. No new tags can be added through this state either. This state is commonly seen in [tile](tile) metadata. + -Tags in the basic state are static and cannot be removed or edited by the user. No new tags can be added through this state either. This state is commonly seen in [tile](tile) metadata. - ## Props ## Tag container +Tag containers may be used to group tags, depending on the page layout and usage. + -Tag containers may be used to group tags, depending on the page layout and usage. - ### Wrapping +The wrapping container wraps tags around to the following line when the maximum width is reached on the previous line. This allows display of the full tags without label truncation. + -The wrapping container wraps tags around to the following line when the maximum width is reached on the previous line. This allows display of the full tags without label truncation. - ### Truncating +The truncating container has fixed height, so it only displays tags that fit on a single line, and truncates tags that exceeds the maximum width. It uses ellipsis (…) to inform the user that there are hidden extra tags beyond what is currently shown. + -The truncating container has fixed height, so it only displays tags that fit on a single line, and truncates tags that exceeds the maximum width. It uses ellipsis (…) to inform the user that there are hidden extra tags beyond what is currently shown. - ### Scrollable +The scrollable container is much like the truncating container, except it allows the user to horizontally scroll to reveal the tags that go beyond the maximum width. The tag that extends past the width is cut off, to hint at the scrolling possibility. + -The scrollable container is much like the truncating container, except it allows the user to horizontally scroll to reveal the tags that go beyond the maximum width. The tag that extends past the width is cut off, to hint at the scrolling possibility. - ### Props diff --git a/apps/website/src/pages/docs/textarea.mdx b/apps/website/src/pages/docs/textarea.mdx index 93a2915ae25..d164d58ff0e 100644 --- a/apps/website/src/pages/docs/textarea.mdx +++ b/apps/website/src/pages/docs/textarea.mdx @@ -13,36 +13,36 @@ import * as AllExamples from 'examples';

{frontmatter.description}

+Textarea (or multi-line fields) are larger text field that can accommodate more text. It is vertically resizable and wraps text to the next line when maximum line length is reached. It automatically scrolls down to allow more text to be input when the bottom is reached. This type of text field implies that a larger input of text is possible and encouraged. + -Textarea (or multi-line fields) are larger text field that can accommodate more text. It is vertically resizable and wraps text to the next line when maximum line length is reached. It automatically scrolls down to allow more text to be input when the bottom is reached. This type of text field implies that a larger input of text is possible and encouraged. +If the area is shrunk to a size smaller than the amount of text within, a scrollbar appears to keep navigation possible. This behavior is especially important for textarea without a resizing handle, to avoid making text editing tedious. -If the area is shrunk to a size smaller than the amount of text within, a scrollbar appears to keep navigation possible. This behavior is especially important for textarea without a resizing handle, to avoid making text editing tedious. - ## Variants ### Status +If status messages are required, the styling is similar to [inputs](input). For the default textarea, the bottom border gains the color of the alert level, as well as the corresponding icon and message. + -If status messages are required, the styling is similar to [inputs](input). For the default textarea, the bottom border gains the color of the alert level, as well as the corresponding icon and message. - ### Inline +It's possible to use textarea inline. This could be useful in styling forms. + -It's possible to use textarea inline. This could be useful in styling forms. - ## Usage Use multi-line textarea when a form requires extensive information to be entered by the user. Examples include incident reports, daily logs, and details of events. diff --git a/apps/website/src/pages/docs/toggleswitch.mdx b/apps/website/src/pages/docs/toggleswitch.mdx index 85ef2df801e..b5a4b04da28 100644 --- a/apps/website/src/pages/docs/toggleswitch.mdx +++ b/apps/website/src/pages/docs/toggleswitch.mdx @@ -25,36 +25,36 @@ It fulfills a role similar to that of a [checkbox](checkbox), though they are no ### Sizes +There are two sizes available. + -There are two sizes available. - ### Label placement +A toggle switch's label can be placed on the right (default), left, or not used at all although it is strongly recommended that a label should be used. + -A toggle switch's label can be placed on the right (default), left, or not used at all although it is strongly recommended that a label should be used. - ### With icon +A toggle switch can optionally show an icon when in the checked state. Note that the [small size toggle switch](#sizes) does not support icons. + -A toggle switch can optionally show an icon when in the checked state. Note that the [small size toggle switch](#sizes) does not support icons. - ### With input group +Toggle switches can be paired with the [input group](inputgroup) which gives many additional options. + -Toggle switches can be paired with the [input group](inputgroup) which gives many additional options. - ## Props From 0e00c1b92dc79f9be3b05c035c1292d975eaad54 Mon Sep 17 00:00:00 2001 From: Malik Rashad Date: Thu, 6 Jul 2023 10:00:27 -0500 Subject: [PATCH 05/11] h3 padding change --- apps/website/src/pages/_global.astro | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/website/src/pages/_global.astro b/apps/website/src/pages/_global.astro index 41ff64e151b..9cb06cbfe24 100644 --- a/apps/website/src/pages/_global.astro +++ b/apps/website/src/pages/_global.astro @@ -82,7 +82,11 @@ const { content = {} } = Astro.props; :where(h3) { font-size: var(--type-2); - padding-block-start: 4rem; + padding-block-start: 1rem; + } + + :where(code) { + padding-block-end: 1rem; } :where(code, pre) { From 0cc24116aa253a2fe591f633d0f16c7d254107f4 Mon Sep 17 00:00:00 2001 From: Malik Rashad Date: Thu, 6 Jul 2023 13:44:32 -0500 Subject: [PATCH 06/11] revert _global.astro --- apps/website/src/pages/_global.astro | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/apps/website/src/pages/_global.astro b/apps/website/src/pages/_global.astro index 9cb06cbfe24..2d76fcfb644 100644 --- a/apps/website/src/pages/_global.astro +++ b/apps/website/src/pages/_global.astro @@ -62,31 +62,20 @@ const { content = {} } = Astro.props; max-width: 75ch; } - :where(p) { - padding-block-start: 0.5rem; - padding-block-end: 0.5rem; - } - - :where(h1, h2, h3) { - line-height: 1; + :where(h1, h2) { + line-height: 1.2; } :where(h1) { font-size: var(--type-4); } - :where(h2:not(left-sidebar *)) { + :where(h2) { font-size: var(--type-3); - padding-block-start: 4rem; } :where(h3) { font-size: var(--type-2); - padding-block-start: 1rem; - } - - :where(code) { - padding-block-end: 1rem; } :where(code, pre) { From b98ce17847f4400150d39209518dd3074e2a5448 Mon Sep 17 00:00:00 2001 From: Malik Rashad Date: Mon, 10 Jul 2023 10:44:51 -0500 Subject: [PATCH 07/11] radiotile.mdx description --- apps/website/src/pages/docs/radiotile.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/radiotile.mdx b/apps/website/src/pages/docs/radiotile.mdx index a2a45219feb..533c1d6a745 100644 --- a/apps/website/src/pages/docs/radiotile.mdx +++ b/apps/website/src/pages/docs/radiotile.mdx @@ -1,6 +1,6 @@ --- title: Radio Tile -description: +description: A series of selectable tile components that behave like [radio button](radio). layout: ./_layout.astro propsPath: '@itwin/itwinui-react/esm/core/RadioTiles/RadioTile.d.ts' thumbnail: RadioTile From dcf04e591ba84cccaacdc08e83f4b07d92201af8 Mon Sep 17 00:00:00 2001 From: Malik Rashad Date: Mon, 10 Jul 2023 13:42:42 -0500 Subject: [PATCH 08/11] cut and paste :) --- apps/website/src/pages/docs/radiotile.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/website/src/pages/docs/radiotile.mdx b/apps/website/src/pages/docs/radiotile.mdx index 533c1d6a745..e131fdfed6d 100644 --- a/apps/website/src/pages/docs/radiotile.mdx +++ b/apps/website/src/pages/docs/radiotile.mdx @@ -11,8 +11,6 @@ import PropsTable from '~/components/PropsTable.astro'; import LiveExample from '~/components/LiveExample.astro'; import * as AllExamples from 'examples'; -A series of selectable tile components that behave like [radio button](radio). You may include icons to help make each tile more identifiable. -

{frontmatter.description}

From bffd1141b002a72f4a206d38ccc978cd8e62b3e3 Mon Sep 17 00:00:00 2001 From: Malik Rashad Date: Mon, 10 Jul 2023 14:12:05 -0500 Subject: [PATCH 09/11] how about this? --- apps/website/src/pages/docs/radiotile.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/radiotile.mdx b/apps/website/src/pages/docs/radiotile.mdx index e131fdfed6d..a8ac536c54e 100644 --- a/apps/website/src/pages/docs/radiotile.mdx +++ b/apps/website/src/pages/docs/radiotile.mdx @@ -1,6 +1,6 @@ --- title: Radio Tile -description: A series of selectable tile components that behave like [radio button](radio). +description: A series of selectable tile components that behave like Radio. layout: ./_layout.astro propsPath: '@itwin/itwinui-react/esm/core/RadioTiles/RadioTile.d.ts' thumbnail: RadioTile From 9b464571147e1956e75607a107e1db167a089f57 Mon Sep 17 00:00:00 2001 From: Malik Rashad Date: Mon, 10 Jul 2023 14:22:00 -0500 Subject: [PATCH 10/11] revert --- apps/website/src/pages/docs/radiotile.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/radiotile.mdx b/apps/website/src/pages/docs/radiotile.mdx index a8ac536c54e..5c41c3cb2dd 100644 --- a/apps/website/src/pages/docs/radiotile.mdx +++ b/apps/website/src/pages/docs/radiotile.mdx @@ -1,6 +1,6 @@ --- title: Radio Tile -description: A series of selectable tile components that behave like Radio. +description: layout: ./_layout.astro propsPath: '@itwin/itwinui-react/esm/core/RadioTiles/RadioTile.d.ts' thumbnail: RadioTile @@ -19,6 +19,8 @@ import * as AllExamples from 'examples'; ## Usage +A series of selectable tile components that behave like [radio button](radio). You may include icons to help make each tile more identifiable. + The example below is the condensed version of the radio tiles. They contain only a label and an icon (the icon is optional but recommended if using condensed). If you do not need descriptive text, go with the condensed radio tiles to save space. Disabled radio tiles can coexit with active tile. A selected tile can also take on the disabled state. From aa582faf0410cf0c0531debce7dcd5884a6e09bb Mon Sep 17 00:00:00 2001 From: Malik Rashad Date: Mon, 10 Jul 2023 14:54:20 -0500 Subject: [PATCH 11/11] ok we finally got it --- apps/website/src/pages/docs/radiotile.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/src/pages/docs/radiotile.mdx b/apps/website/src/pages/docs/radiotile.mdx index 5c41c3cb2dd..d2d099b787d 100644 --- a/apps/website/src/pages/docs/radiotile.mdx +++ b/apps/website/src/pages/docs/radiotile.mdx @@ -13,14 +13,14 @@ import * as AllExamples from 'examples';

{frontmatter.description}

+A series of selectable tile components that behave like [radio button](radio). You may include icons to help make each tile more identifiable. + ## Usage -A series of selectable tile components that behave like [radio button](radio). You may include icons to help make each tile more identifiable. - The example below is the condensed version of the radio tiles. They contain only a label and an icon (the icon is optional but recommended if using condensed). If you do not need descriptive text, go with the condensed radio tiles to save space. Disabled radio tiles can coexit with active tile. A selected tile can also take on the disabled state.