diff --git a/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx b/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx index 44f3c9320..0a94c9285 100644 --- a/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx +++ b/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx @@ -1,4 +1,4 @@ -import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; +import { DxcBulletedList, DxcFlex, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; @@ -8,6 +8,7 @@ import Example from "@/common/example/Example"; import basicExample from "./examples/basicExample"; import nestedExample from "./examples/nestedExample"; import placement from "./images/accordion_placement.png"; +import Link from "next/link"; const sections = [ { @@ -173,22 +174,22 @@ const sections = [ ), }, - { - title: "Mobile", - content: ( - <> - - In small devices, extremely long pages are detrimental to the user experience. Collapsing information - minimises excessive scrolling and gives an overview of the structure and content available on the page. - - - In mobile use 100% of the available screen width - - - ), - }, ], }, + { + title: "Responsive behavior", + content: ( + <> + + In small devices, extremely long pages are detrimental to the user experience. Collapsing information + minimises excessive scrolling and gives an overview of the structure and content available on the page. + + + In mobile use 100% of the available screen width + + + ), + }, { title: "Best practices", content: ( diff --git a/apps/website/screens/components/alert/overview/AlertOverviewPage.tsx b/apps/website/screens/components/alert/overview/AlertOverviewPage.tsx index 77636b994..4642493e4 100644 --- a/apps/website/screens/components/alert/overview/AlertOverviewPage.tsx +++ b/apps/website/screens/components/alert/overview/AlertOverviewPage.tsx @@ -53,21 +53,25 @@ const sections = [ it easy for users to grasp its importance at a glance. - Description: the detailed text within the alert that provides context or additional - information about the message, ensuring clarity for the user. + Pagination: a navigation element that allows users to browse multiple alerts within the + same container, useful for managing sequential or grouped notifications. Divider: a subtle separator that visually organizes the alert's content, enhancing readability and distinguishing the pagination element from the closable action. - Pagination: a navigation element that allows users to browse multiple alerts within the - same container, useful for managing sequential or grouped notifications. + Close action: an interactive button placed next to the pagination (if there's any) that + allows the user to dismiss the alert. Actions: interactive buttons placed within the alert that enable users to take relevant actions in response to the message, such as dismissing, acknowledging, or navigating to further details. + + Description: the detailed text within the alert that provides context or additional + information about the message, ensuring clarity for the user. + ), @@ -297,6 +301,23 @@ const sections = [ }, ], }, + { + title: "Responsive behavior", + content: ( + <> + + + Be sure to consider content length when designing for smaller screen sizes. + + Alerts grow vertically to display the full content. + + Keep in mind the screen size where the alert will appear, and take into account the length of the + description it contains. + + + + ), + }, { title: "Best practices", subSections: [ diff --git a/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx b/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx index f5b3a8bb3..2d336c837 100644 --- a/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx +++ b/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx @@ -75,7 +75,7 @@ const sections = [ content: ( <> - Designed mainly for data visualization interfaces, the contextual variant of the Badge component’s main + Designed mainly for data visualization interfaces, the contextual variant of the Badge component's main advantage lies in its ability to categorize content and represent specific information. It is intentionally non-interactive and may contain icons strategically chosen to enhance the conveyed information. diff --git a/apps/website/screens/components/card/overview/CardOverviewPage.tsx b/apps/website/screens/components/card/overview/CardOverviewPage.tsx index 8c5323fff..a9aed1e13 100644 --- a/apps/website/screens/components/card/overview/CardOverviewPage.tsx +++ b/apps/website/screens/components/card/overview/CardOverviewPage.tsx @@ -66,9 +66,9 @@ const sections = [ Image placement: cards support placing the image either on the left or the right side of the layout. The image should maintain a fixed ratio and size for visual harmony. By default, the component provides layout options where the image can appear on the left or right side of the content. However, - alternative layouts —such as vertical image placements — can be achieved by placing the image directly within - the custom content area. This allows for more flexibility while still adhering to spacing and alignment - guidelines. + alternative layouts —such as vertical image placements — can be achieved by placing the image directly + within the custom content area. This allows for more flexibility while still adhering to spacing and + alignment guidelines. Text content: titles, descriptions, metadata, or status labels are typically placed in the @@ -83,7 +83,15 @@ const sections = [ card should be easy to scan and act upon. - Card's example + {/* Card's example */} + + ), + }, + { + title: "Responsive behavior", + content: ( + <> + The card component will adjust to the size of its parent container. ), }, diff --git a/apps/website/screens/components/data-grid/overview/DataGridOverviewPage.tsx b/apps/website/screens/components/data-grid/overview/DataGridOverviewPage.tsx index b2dde9228..e93e888db 100644 --- a/apps/website/screens/components/data-grid/overview/DataGridOverviewPage.tsx +++ b/apps/website/screens/components/data-grid/overview/DataGridOverviewPage.tsx @@ -4,6 +4,9 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; import Image from "@/common/Image"; import anatomy from "./images/datagrid-anatomy.png"; +import reducedDataGrid from "./images/datagrid_reduced.png"; +import fullWidthDataGrid from "./images/datagrid_fullWidth.png"; +import Figure from "@/common/Figure"; const sections = [ { @@ -197,6 +200,32 @@ const sections = [ }, ], }, + { + title: "Responsive behavior", + content: ( + <> + The datagrid's size adjusts to the available space. + + + When placing a datagrid inside a parent component, adjusting the parent component's width also + correspondingly adjusts datagrid width up to a certain extent. A datagrid's minimum width based on the + content of the column headers and the number of columns it has. + + + The Datagrid will adjust its own scroll based on the content and the avalaible space. Careful planning for + structuring large datagrids (such as using a combination of managing column counts, using expandable + content, or even resizeable columns) can help minimize over reliance on scrollbars to display a lot of + information. + + + For smaller screen sizes, managing information density becomes even more important because of limited space. + Leveraging features such as allowing for expandable rows or managing the number of columns during initial + display can go a long way towards maintaining a clean and manageable datagrid. + + + + ), + }, { title: "Best practices", content: ( diff --git a/apps/website/screens/components/data-grid/overview/images/datagrid_fullWidth.png b/apps/website/screens/components/data-grid/overview/images/datagrid_fullWidth.png new file mode 100644 index 000000000..72bf10bad Binary files /dev/null and b/apps/website/screens/components/data-grid/overview/images/datagrid_fullWidth.png differ diff --git a/apps/website/screens/components/data-grid/overview/images/datagrid_reduced.png b/apps/website/screens/components/data-grid/overview/images/datagrid_reduced.png new file mode 100644 index 000000000..b29a2a6d0 Binary files /dev/null and b/apps/website/screens/components/data-grid/overview/images/datagrid_reduced.png differ diff --git a/apps/website/screens/components/date-input/overview/DateInputOverviewPage.tsx b/apps/website/screens/components/date-input/overview/DateInputOverviewPage.tsx index d3a79924f..8e0ddf98b 100644 --- a/apps/website/screens/components/date-input/overview/DateInputOverviewPage.tsx +++ b/apps/website/screens/components/date-input/overview/DateInputOverviewPage.tsx @@ -216,7 +216,7 @@ const sections = [ content: ( - Match the date format to the user’s regional settings (DD/MM/YYYY or MM/DD/YYYY), and consider using + Match the date format to the user's regional settings (DD/MM/YYYY or MM/DD/YYYY), and consider using placeholder text to guide formatting. diff --git a/apps/website/screens/components/footer/overview/FooterOverviewPage.tsx b/apps/website/screens/components/footer/overview/FooterOverviewPage.tsx index 1087c7d0a..1a921ec41 100644 --- a/apps/website/screens/components/footer/overview/FooterOverviewPage.tsx +++ b/apps/website/screens/components/footer/overview/FooterOverviewPage.tsx @@ -33,7 +33,7 @@ const sections = [ reinforce company recognition across all pages. - Social icons: A set of clickable icons linking to the company’s social media platforms + Social icons: A set of clickable icons linking to the company's social media platforms (e.g., LinkedIn, Facebook). Placed on the right side for easy visibility and access. diff --git a/apps/website/screens/components/header/overview/HeaderOverviewPage.tsx b/apps/website/screens/components/header/overview/HeaderOverviewPage.tsx index 4251a849e..4eeffad4f 100644 --- a/apps/website/screens/components/header/overview/HeaderOverviewPage.tsx +++ b/apps/website/screens/components/header/overview/HeaderOverviewPage.tsx @@ -6,6 +6,7 @@ import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import anatomy from "./images/header_anatomy.png"; import responsive from "./images/header_responsive.png"; +import responsiveDetails from "./images/header_responsive_details.png"; import variants from "./images/header_variants.png"; const sections = [ @@ -78,18 +79,19 @@ const sections = [ ), }, { - title: "Responsive version for mobile and tablet", + title: "Responsive version", content: ( <> - Since applications are accessed from a variety of devices, including laptops, tablets, and smartphones, it's - essential to design a Header that adapts fluidly to different screen sizes. The responsive Header should - maintain the core structure and visual hierarchy of the desktop version, ensuring a consistent and intuitive - user experience across all devices. + Applications are accessed on a wide range of devices, including laptops, tablets, and smartphones. To support + this, the header must be designed to scale responsively across screen sizes. The responsive header should + preserve the structural layout and visual hierarchy of the desktop version, ensuring consistency and usability + across all platforms. + + + “On smaller screens, the header content is replaced by a button. Triggering this button opens a menu that + displays custom content.” -
- Header menu responsive version -
), }, diff --git a/apps/website/screens/components/header/overview/images/header_responsive_details.png b/apps/website/screens/components/header/overview/images/header_responsive_details.png new file mode 100644 index 000000000..6cf81b7d2 Binary files /dev/null and b/apps/website/screens/components/header/overview/images/header_responsive_details.png differ diff --git a/apps/website/screens/components/link/overview/LinkOverviewPage.tsx b/apps/website/screens/components/link/overview/LinkOverviewPage.tsx index 8e062fd01..9b045bbd5 100644 --- a/apps/website/screens/components/link/overview/LinkOverviewPage.tsx +++ b/apps/website/screens/components/link/overview/LinkOverviewPage.tsx @@ -26,10 +26,10 @@ const sections = [ Icon: an optional visual element that can be used to represent more graphically the purpose - of the link. It can be placed before or after the link it’s representing. + of the link. It can be placed before or after the link it's representing. - Label: displays the textual content of the link, conveying where exactly it’s going to + Label: displays the textual content of the link, conveying where exactly it's going to navigate the component. diff --git a/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx b/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx index 73f4becbf..5c7918589 100644 --- a/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx +++ b/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx @@ -146,6 +146,17 @@ const sections = [ }, ], }, + { + title: "Responsive behavior", + content: ( + <> + + The size of the navigation tabs adjusts according to the container. On smaller screen resolutions, if the + content exceeds the available space, a scroll bar will appear. + + + ), + }, { title: "Best practices", content: ( diff --git a/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx b/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx index 0c1e7563c..71ce9d06e 100644 --- a/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx +++ b/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx @@ -72,7 +72,7 @@ const sections = [ <> Our paginator component offers different configurations to accommodate various use cases. Take the time to - explore these options and identify the best fit for your specific needs—whether it’s simple navigation, + explore these options and identify the best fit for your specific needs—whether it's simple navigation, dynamic content loading, or more advanced pagination controls. Choosing the right configuration ensures a seamless experience for users. @@ -96,6 +96,17 @@ const sections = [ }, ], }, + { + title: "Responsive behavior", + content: ( + + Selecting the right type of paginator is important - particularly for applications that may be displayed in + smaller screen sizes. Configurations with a simple navigation can go a long way towards reducing cognitive load + and visual clutter (ex. simply show what page the user is on or limit interactive elements to the page selection + dropdown for navigation). + + ), + }, { title: "Best practices", content: ( diff --git a/apps/website/screens/components/progress-bar/overview/ProgressBarOverviewPage.tsx b/apps/website/screens/components/progress-bar/overview/ProgressBarOverviewPage.tsx index b5943e7f9..93a3fdd9e 100644 --- a/apps/website/screens/components/progress-bar/overview/ProgressBarOverviewPage.tsx +++ b/apps/website/screens/components/progress-bar/overview/ProgressBarOverviewPage.tsx @@ -115,7 +115,7 @@ const sections = [ Use the right variant: use determinate when the completion percentage is known (e.g., file - uploads, task completion). Use indeterminate when the system can’t predict the time or progress (e.g., + uploads, task completion). Use indeterminate when the system can't predict the time or progress (e.g., loading content, waiting for server responses). diff --git a/apps/website/screens/components/quick-nav/overview/QuickNavOverviewsPage.tsx b/apps/website/screens/components/quick-nav/overview/QuickNavOverviewsPage.tsx index aa4af3f44..0d9a310c2 100644 --- a/apps/website/screens/components/quick-nav/overview/QuickNavOverviewsPage.tsx +++ b/apps/website/screens/components/quick-nav/overview/QuickNavOverviewsPage.tsx @@ -43,6 +43,21 @@ const sections = [ ), }, + { + title: "Responsive behavior", + content: ( + <> + + When designing applications that contain a quick nav for smaller screens, make sure to set a minimum width for + the main content so that the quick nav does not overwhelm the main content. + + + Also consider hiding this component once a specific breakpoint has been reached to allow users to focus on the + primary content. + + + ), + }, { title: "Best practices", content: ( diff --git a/apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx b/apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx index 218ca03dd..0ab3ddc1e 100644 --- a/apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx +++ b/apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx @@ -4,6 +4,8 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; import Code from "@/common/Code"; import anatomy from "./images/resultset_table_anatomy.png"; +import resultsetTableOverflow from "./images/resultset_table_overflow.png"; +import resultsetTableResponsive from "./images/resultset_table_responsive.png"; import Image from "@/common/Image"; const sections = [ @@ -129,6 +131,35 @@ const sections = [ }, ], }, + { + title: "Responsive behavior", + content: ( + <> + + Changes to the screen size affects tables based on the default behavior of their parent components (ex. + container, flexbox, grid). + + + + When placing a table inside a container component that adjusts based on screen width, the table's width also + correspondingly adjusts up to a certain minimum value based on its content and the number of columns. + Resultset table overflow + + + Using the overflow property of the container (to account for both horizontal and vertical adjustments) is + one way to preserve the size of the display of the table while using scrollbars for the adjustments needed + in place of continuous resizing. + Resultset table responsive + + + Consider using the reduced mode for tables that are information dense and need to minimize the spacing in + between table cells. This can help accommodate more information as the screen size is reduced up to a + certain extent. + + + + ), + }, { title: "Best practices", content: ( diff --git a/apps/website/screens/components/resultset-table/overview/images/resultset_table_overflow.png b/apps/website/screens/components/resultset-table/overview/images/resultset_table_overflow.png new file mode 100644 index 000000000..2b8f1ba7c Binary files /dev/null and b/apps/website/screens/components/resultset-table/overview/images/resultset_table_overflow.png differ diff --git a/apps/website/screens/components/resultset-table/overview/images/resultset_table_responsive.png b/apps/website/screens/components/resultset-table/overview/images/resultset_table_responsive.png new file mode 100644 index 000000000..3292203c3 Binary files /dev/null and b/apps/website/screens/components/resultset-table/overview/images/resultset_table_responsive.png differ diff --git a/apps/website/screens/components/select/overview/SelectOverviewPage.tsx b/apps/website/screens/components/select/overview/SelectOverviewPage.tsx index bfd159473..7177b5860 100644 --- a/apps/website/screens/components/select/overview/SelectOverviewPage.tsx +++ b/apps/website/screens/components/select/overview/SelectOverviewPage.tsx @@ -276,7 +276,7 @@ const sections = [ Label optional fields clearly: when the select field is optional, ensure a placeholder option - is available to indicate that the field can be left empty. If it’s required, provide an error message when + is available to indicate that the field can be left empty. If it's required, provide an error message when left unselected. diff --git a/apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx b/apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx index 914c32f76..b74632a21 100644 --- a/apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx +++ b/apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx @@ -131,11 +131,8 @@ const sections = [ content: ( <> - On mobile and tablet screens, the sidenav becomes an{" "} - overlay panel that can be toggled open or closed. This responsive version ensures that - navigation remains accessible without occupying valuable screen space. Users can open the sidenav using a - dedicated menu icon, and close it either by interacting with the backdrop or selecting a navigation - option. This enhances usability and maintains focus on content in smaller viewports. + In smaller screens, the sidenav is collapsed into a single row at the top of the page with an expandable + icon to show the full list of sidenav content when triggered. Responsive sidenav diff --git a/apps/website/screens/components/sidenav/overview/images/sidenav_responsive.png b/apps/website/screens/components/sidenav/overview/images/sidenav_responsive.png index de7c1cc91..6e1c121e3 100644 Binary files a/apps/website/screens/components/sidenav/overview/images/sidenav_responsive.png and b/apps/website/screens/components/sidenav/overview/images/sidenav_responsive.png differ diff --git a/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx b/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx index ec49dbb0e..fa2144c05 100644 --- a/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx +++ b/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx @@ -108,13 +108,19 @@ const sections = [ Label before - Improves clarity by describing the setting being controlled. This is the default and recommended position. + + Improves clarity by describing the setting being controlled. This is the default and recommended + position. + Label after - Useful in minimalist interfaces or when the switch’s current state needs to be highlighted. Recommended only for specific use cases. + + Useful in minimalist interfaces or when the switch's current state needs to be highlighted. Recommended + only for specific use cases. + diff --git a/apps/website/screens/foundations/color/ColorPage.tsx b/apps/website/screens/foundations/color/ColorPage.tsx index 46bfe7b38..c5a5dc933 100644 --- a/apps/website/screens/foundations/color/ColorPage.tsx +++ b/apps/website/screens/foundations/color/ColorPage.tsx @@ -189,7 +189,7 @@ const sections = [ reassures users and reinforces positive outcomes. - Orange - Warning: Used for cautionary messages or potential risks that don’t block + Orange - Warning: Used for cautionary messages or potential risks that don't block progress but may require attention. diff --git a/apps/website/screens/foundations/elevation/ElevationPage.tsx b/apps/website/screens/foundations/elevation/ElevationPage.tsx index 0cf6c76d8..98e86baf4 100644 --- a/apps/website/screens/foundations/elevation/ElevationPage.tsx +++ b/apps/website/screens/foundations/elevation/ElevationPage.tsx @@ -143,7 +143,7 @@ const sections = [ hierarchy and component behavior. - Don’t overlay too much: avoid stacking multiple shadows or using high-intensity shadows on + Don't overlay too much: avoid stacking multiple shadows or using high-intensity shadows on too many components, as this leads to visual clutter. diff --git a/apps/website/screens/foundations/spacing/SpacingPage.tsx b/apps/website/screens/foundations/spacing/SpacingPage.tsx index 9b30a3089..0f9a40e29 100644 --- a/apps/website/screens/foundations/spacing/SpacingPage.tsx +++ b/apps/website/screens/foundations/spacing/SpacingPage.tsx @@ -258,6 +258,29 @@ const sections = [ }, ], }, + { + title: "Responsive behavior", + content: ( + <> + + Both fixed and fluid spacing behaviors play a key role in determining the placement of components when + adjusting screen sizes. + + + + Fixed spacing can make parts of the application stop resizing or show scrollbars when the + screen gets too small. This is useful for layouts that need to stay structured so information is displayed + correctly. + + + Fluid spacing works better in smaller screens, letting elements move around as needed. For + example, a form might switch from two columns to one, or components might wrap to the next line, creating a + more vertical, flowing layout.” + + + + ), + }, { title: "Best practices", content: ( diff --git a/apps/website/screens/foundations/typography/TypographyPage.tsx b/apps/website/screens/foundations/typography/TypographyPage.tsx index 5a7143ff0..a16791b61 100644 --- a/apps/website/screens/foundations/typography/TypographyPage.tsx +++ b/apps/website/screens/foundations/typography/TypographyPage.tsx @@ -20,11 +20,11 @@ const sections = [ content: ( <> - Typography plays a critical role in structuring the user’s experience through the visual impact it has on the + Typography plays a critical role in structuring the user's experience through the visual impact it has on the interface content. - It defines what is the first noticeable piece of information or data based on the font’s + It defines what is the first noticeable piece of information or data based on the font's shape, size, color, or type, and it highlights some pieces of text over others.