{"componentChunkName":"component---src-pages-components-ui-shell-right-panel-usage-mdx","path":"/components/UI-shell-right-panel/usage/","result":{"pageContext":{"frontmatter":{"title":"UI shell right panel","description":"This right panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/UI-shell-right-panel/usage.mdx","titleType":"prepend","MdxNode":{"id":"9194d1a2-4d62-5f04-b782-2abbe18b0f1f","children":[],"parent":"20671c06-54e6-5d4b-9d8f-3ee5a8963bfc","internal":{"content":"---\ntitle: UI shell right panel\ndescription: This right panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n<PageDescription>\n\nThe right panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform. It provides a common set of interaction patterns that persist between and across products.\n\n</PageDescription>\n\n<AnchorLinks>\n\n<AnchorLink>General guidance</AnchorLink>\n<AnchorLink>Anatomy</AnchorLink>\n<AnchorLink>Behavior</AnchorLink>\n\n</AnchorLinks>\n\n## Resources\n\n<Row className=\"resource-card-group\">\n  <Column colLg={4} colMd={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"UI Shell template\"\n      href=\"https://sketch.cloud/s/EjVmA\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## General guidance\n\nThe UI shell is made up of three components: The [header](/components/UI-shell-header/usage), the [left panel](/components/UI-shell-right-panel/usage), and the right panel. All three can be used independently, but the components were designed to work together.\n\n| Shell UI component |                                                                                                                                         |\n| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |\n| Header             | The highest level of navigation. The header can be used on its own for simple products or be used to trigger the left and right panels. |\n| Left panel         | An optional panel that is used for a product's navigation.                                                                              |\n| Right panel        | An optional panel that shows additional system level actions or content associated with a system icon in the header.                    |\n\n<Row>\n<Column colLg={8}>\n\n![UI shell components.](images/shell-usage-1.png)\n\n<Caption>UI shell components</Caption>\n\n</Column>\n</Row>\n\n## Anatomy\n\nThe right panel is invoked by icons on the right side of the header, and remains anchored to that icon. Right panels have a consistent width, span the full height of the viewport, and are flush to the right edge of the viewport.\n\nNote that the switcher also lives in a right panel.\n\n![Header panel and switcher.](images/right-panel-usage-1.png)\n\n<Caption>\n  The right panel configured as an empty header panel (left) and a switcher\n  (right).\n</Caption>\n\n#### Switcher item\n\nA switcher item is anything that changes what product, offering, or property occupies the UI shell. Consider moments in a product when you switch from a calendar to a mailbox, from Kubernetes to Catalog. These items belong in the switcher.\n\n#### Switcher divider\n\nA switcher divider groups similar switcher items. You can use a divider to set apart a parent domain, group child domains similar in hierarchy to the parent, and set apart additional resources. The divider should not be used to separate every switcher item.\n\n### Switcher\n\nThe far right header icon is reserved for the switcher icon. The switcher icon and the switcher panel should only be used together.\n\n<Row>\n<Column  colMd={4} colLg={6}>\n  <DoDontExample type=\"do\" caption=\"Positioned the switcher to the far right.\">\n\n![Example of the switcher icon being used correctly.](images/right-panel-usage-2.png)\n\n  </DoDontExample>\n</Column>\n<Column colMd={4} colLg={6} >\n  <DoDontExample  caption=\"Do not position other icons to the right of the switcher.\">\n\n![The switcher icon is not positioned to the far right.](images/right-panel-usage-3.png)\n\n  </DoDontExample>\n</Column>\n<Column  colMd={4} colLg={6} >\n  <DoDontExample  caption=\"Do not use another icon for the switcher.\">\n\n![The switcher not using the switcher icon.](images/right-panel-usage-4.png)\n\n  </DoDontExample>\n</Column>\n</Row>\n\n## Behavior\n\n#### Expansion\n\nRight panels always float over page content, and always remain anchored to their associated icon. You can have multiple right panels, but only only one can be expanded at any time.\n\n#### Dismissal\n\nOnce expanded, the panel's associated icon is outlined, with its bottom border flowing into the panel. To dismiss the panel, a user must select an item, or click or tap the header icon.\n\n#### Selected state\n\nThere is no selected state for right panel items. Even if a user is currently within one of the panel items, the item remains unselected.\n","type":"Mdx","contentDigest":"ffd71ac283b0ee8f455c7c34807f012c","counter":1475,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"UI shell right panel","description":"This right panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: UI shell right panel\ndescription: This right panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n<PageDescription>\n\nThe right panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform. It provides a common set of interaction patterns that persist between and across products.\n\n</PageDescription>\n\n<AnchorLinks>\n\n<AnchorLink>General guidance</AnchorLink>\n<AnchorLink>Anatomy</AnchorLink>\n<AnchorLink>Behavior</AnchorLink>\n\n</AnchorLinks>\n\n## Resources\n\n<Row className=\"resource-card-group\">\n  <Column colLg={4} colMd={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"UI Shell template\"\n      href=\"https://sketch.cloud/s/EjVmA\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## General guidance\n\nThe UI shell is made up of three components: The [header](/components/UI-shell-header/usage), the [left panel](/components/UI-shell-right-panel/usage), and the right panel. All three can be used independently, but the components were designed to work together.\n\n| Shell UI component |                                                                                                                                         |\n| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |\n| Header             | The highest level of navigation. The header can be used on its own for simple products or be used to trigger the left and right panels. |\n| Left panel         | An optional panel that is used for a product's navigation.                                                                              |\n| Right panel        | An optional panel that shows additional system level actions or content associated with a system icon in the header.                    |\n\n<Row>\n<Column colLg={8}>\n\n![UI shell components.](images/shell-usage-1.png)\n\n<Caption>UI shell components</Caption>\n\n</Column>\n</Row>\n\n## Anatomy\n\nThe right panel is invoked by icons on the right side of the header, and remains anchored to that icon. Right panels have a consistent width, span the full height of the viewport, and are flush to the right edge of the viewport.\n\nNote that the switcher also lives in a right panel.\n\n![Header panel and switcher.](images/right-panel-usage-1.png)\n\n<Caption>\n  The right panel configured as an empty header panel (left) and a switcher\n  (right).\n</Caption>\n\n#### Switcher item\n\nA switcher item is anything that changes what product, offering, or property occupies the UI shell. Consider moments in a product when you switch from a calendar to a mailbox, from Kubernetes to Catalog. These items belong in the switcher.\n\n#### Switcher divider\n\nA switcher divider groups similar switcher items. You can use a divider to set apart a parent domain, group child domains similar in hierarchy to the parent, and set apart additional resources. The divider should not be used to separate every switcher item.\n\n### Switcher\n\nThe far right header icon is reserved for the switcher icon. The switcher icon and the switcher panel should only be used together.\n\n<Row>\n<Column  colMd={4} colLg={6}>\n  <DoDontExample type=\"do\" caption=\"Positioned the switcher to the far right.\">\n\n![Example of the switcher icon being used correctly.](images/right-panel-usage-2.png)\n\n  </DoDontExample>\n</Column>\n<Column colMd={4} colLg={6} >\n  <DoDontExample  caption=\"Do not position other icons to the right of the switcher.\">\n\n![The switcher icon is not positioned to the far right.](images/right-panel-usage-3.png)\n\n  </DoDontExample>\n</Column>\n<Column  colMd={4} colLg={6} >\n  <DoDontExample  caption=\"Do not use another icon for the switcher.\">\n\n![The switcher not using the switcher icon.](images/right-panel-usage-4.png)\n\n  </DoDontExample>\n</Column>\n</Row>\n\n## Behavior\n\n#### Expansion\n\nRight panels always float over page content, and always remain anchored to their associated icon. You can have multiple right panels, but only only one can be expanded at any time.\n\n#### Dismissal\n\nOnce expanded, the panel's associated icon is outlined, with its bottom border flowing into the panel. To dismiss the panel, a user must select an item, or click or tap the header icon.\n\n#### Selected state\n\nThere is no selected state for right panel items. Even if a user is currently within one of the panel items, the item remains unselected.\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/UI-shell-right-panel/usage.mdx"}}}}