+{"description":"\n`<ContextView/>` is a container that can be rendered inline in the document flow (vs as a [Popover](Popover)) but with an arrow pointing to something. See [RangeInput](RangeInput) for an example of how ContextView can be used to display contextual information in conjunction with another component. It is used internally in [Popover](Popover).\n\n- Defaults to no padding around its content. To add padding, use the `padding` prop.\n\n- Use the `textAlign` prop to change the alignment of the text inside `<ContextView />`.\n\n- In use cases where `<ContextView/>` is not absolutely positioned, use the `margin` prop to set margin around the component.\n\n```js\n---\ntype: example\n---\n<div>\n <ContextView\n padding=\"small\"\n margin=\"large\"\n placement=\"end top\"\n shadow=\"resting\"\n >\n <Heading level=\"h3\">Hello World</Heading>\n </ContextView>\n <ContextView\n margin=\"0 large 0 0\"\n padding=\"small\"\n placement=\"top\"\n >\n <Heading level=\"h3\">Hello World</Heading>\n <Text size=\"small\">Some informational text that is helpful</Text>\n </ContextView>\n <ContextView\n margin=\"0 large 0 0\"\n padding=\"small\"\n textAlign=\"end\"\n placement=\"start\"\n >\n <Heading level=\"h3\">Hello World</Heading>\n <Text size=\"small\">This ContextView is end-text-aligned</Text>\n </ContextView>\n <ContextView\n placement=\"end bottom\"\n padding=\"medium\"\n background=\"inverse\"\n width=\"30rem\"\n margin=\"x-large 0 0\"\n >\n <Text size=\"small\">\n This ContextView uses the inverse background and medium padding. Its width prop is set to `30rem`, which causes long strings like this to wrap. It also has top margin to separate it from the ContextViews above it.\n </Text>\n </ContextView>\n</div>\n```\n","displayName":"ContextView","methods":[{"name":"handleRef","docblock":null,"modifiers":[],"params":[{"name":"el","optional":false,"type":{"name":"union","raw":"Element | null","elements":[{"name":"Element"},{"name":"null"}]}}],"returns":null}],"props":{"as":{"required":false,"tsType":{"name":"AsElementType"},"description":"","defaultValue":{"value":"'span'","computed":false}},"elementRef":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(element: Element | null) => void","signature":{"arguments":[{"type":{"name":"union","raw":"Element | null","elements":[{"name":"Element"},{"name":"null"}]},"name":"element"}],"return":{"name":"void"}}},"description":"","defaultValue":{"value":"() => {}","computed":false}},"height":{"required":false,"tsType":{"name":"union","raw":"string | number","elements":[{"name":"string"},{"name":"number"}]},"description":"","defaultValue":{"value":"'auto'","computed":false}},"width":{"required":false,"tsType":{"name":"union","raw":"string | number","elements":[{"name":"string"},{"name":"number"}]},"description":"","defaultValue":{"value":"'auto'","computed":false}},"maxHeight":{"required":false,"tsType":{"name":"union","raw":"string | number","elements":[{"name":"string"},{"name":"number"}]},"description":""},"maxWidth":{"required":false,"tsType":{"name":"union","raw":"string | number","elements":[{"name":"string"},{"name":"number"}]},"description":""},"minHeight":{"required":false,"tsType":{"name":"union","raw":"string | number","elements":[{"name":"string"},{"name":"number"}]},"description":""},"minWidth":{"required":false,"tsType":{"name":"union","raw":"string | number","elements":[{"name":"string"},{"name":"number"}]},"description":""},"children":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":"","defaultValue":{"value":"null","computed":false}},"textAlign":{"required":false,"tsType":{"name":"union","raw":"'start' | 'center' | 'end'","elements":[{"name":"literal","value":"'start'"},{"name":"literal","value":"'center'"},{"name":"literal","value":"'end'"}]},"description":"","defaultValue":{"value":"'start'","computed":false}},"background":{"required":false,"tsType":{"name":"union","raw":"'default' | 'inverse'","elements":[{"name":"literal","value":"'default'"},{"name":"literal","value":"'inverse'"}]},"description":"","defaultValue":{"value":"'default'","computed":false}},"debug":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}},"margin":{"required":false,"tsType":{"name":"Spacing"},"description":""},"padding":{"required":false,"tsType":{"name":"Spacing"},"description":""},"shadow":{"required":false,"tsType":{"name":"union","raw":"'resting' | 'above' | 'topmost' | 'none'","elements":[{"name":"literal","value":"'resting'"},{"name":"literal","value":"'above'"},{"name":"literal","value":"'topmost'"},{"name":"literal","value":"'none'"}]},"description":"","defaultValue":{"value":"'resting'","computed":false}},"stacking":{"required":false,"tsType":{"name":"Stacking"},"description":""},"placement":{"required":false,"tsType":{"name":"PlacementPropValues"},"description":"","defaultValue":{"value":"'center end'","computed":false}},"borderColor":{"required":false,"tsType":{"name":"string"},"description":""}},"category":"components","relativePath":"packages/ui-view/src/ContextView/v1/index.tsx","extension":".tsx","srcPath":"packages/ui-view/src/ContextView/v1/index.tsx","srcUrl":"https://github.com/instructure/instructure-ui/tree/master/packages/ui-view/src/ContextView/v1/index.tsx","packageName":"@instructure/ui-view","requirePath":"@instructure/ui-view/lib/ContextView/v1/index","requireStr":"require('/home/runner/work/instructure-ui/instructure-ui/packages/ui-view/src/ContextView/v1/index.tsx').default","esPath":"@instructure/ui-view/es/ContextView/v1/index","themePath":"packages/ui-view/src/ContextView/v1/styles.ts","themeUrl":"https://github.com/instructure/instructure-ui/tree/master/packages/ui-view/src/ContextView/v1/styles.ts","id":"ContextView","title":"ContextView","componentVersion":"v1","componentDirName":"ContextView"}
0 commit comments