Skip to content

Commit

Permalink
Refactor help modal with wordpress components (#221)
Browse files Browse the repository at this point in the history
  • Loading branch information
@t-hamano
t-hamano authored Oct 20, 2024
1 parent 67ec55a commit 10797c2
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 67 deletions.
126 changes: 72 additions & 54 deletions src/settings/global-settings/help-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,13 @@ import type { Dispatch, SetStateAction } from 'react';
*/
import { __ } from '@wordpress/i18n';
import { createInterpolateElement } from '@wordpress/element';
import { Modal, ExternalLink } from '@wordpress/components';
import {
Modal,
ExternalLink,
__experimentalVStack as VStack,
__experimentalText as Text,
__experimentalHeading as Heading,
} from '@wordpress/components';

type Props = {
setIsHelpModalOpen: Dispatch< SetStateAction< boolean > >;
Expand All @@ -21,59 +27,71 @@ export default function HelpModal( { setIsHelpModalOpen }: Props ) {
className="ftb-global-help-modal"
onRequestClose={ () => setIsHelpModalOpen( false ) }
>
<h2>{ __( 'About default table style', 'flexible-table-block' ) }</h2>
<p>
{ __(
'Flexible Table Block is a block that allows you to create tables in various styles. First of all, it is recommended to set the default style of the table from "Global Setting".',
'flexible-table-block'
) }
</p>
<h2>{ __( 'Select multiple cells', 'flexible-table-block' ) }</h2>
<p>
{ createInterpolateElement(
__(
'Hold <code>Ctrl</code> key to select multiple cells or hold <code>Shift</code> key to select the range. Selecting multiple cells is used to merge cells or to change styles of multiple cells.',
'flexible-table-block'
),
{ code: <code /> }
) }
</p>
<h2>{ __( 'About scroll table', 'flexible-table-block' ) }</h2>
<p>
{ __(
'If table scrolling is enabled, set "Table Width" or "Table Min Width" larger than the content width.',
'flexible-table-block'
) }
</p>
<h2>{ __( 'About accessibility', 'flexible-table-block' ) }</h2>
<p>
{ createInterpolateElement(
__(
'You can tell screenreaders exactly by properly defining <code>id</code>, <code>headers</code>, and <code>scope</code> attributes for each cell.',
'flexible-table-block'
),
{ code: <code /> }
) }
</p>
<p>
{ createInterpolateElement(
__(
'Refer to <Link>this page</Link> for the specifications of each attribute.',
'flexible-table-block'
),
{
Link: (
// @ts-ignore
<ExternalLink
href={ __(
'https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced',
'flexible-table-block'
) }
/>
),
}
) }
</p>
<VStack spacing={ 4 }>
<VStack>
<Heading level={ 5 }>
{ __( 'About default table style', 'flexible-table-block' ) }
</Heading>
<Text as="p">
{ __(
'Flexible Table Block is a block that allows you to create tables in various styles. First of all, it is recommended to set the default style of the table from "Global Setting".',
'flexible-table-block'
) }
</Text>
</VStack>
<VStack>
<Heading level={ 5 }>{ __( 'Select multiple cells', 'flexible-table-block' ) }</Heading>
<Text as="p">
{ createInterpolateElement(
__(
'Hold <code>Ctrl</code> key to select multiple cells or hold <code>Shift</code> key to select the range. Selecting multiple cells is used to merge cells or to change styles of multiple cells.',
'flexible-table-block'
),
{ code: <code /> }
) }
</Text>
</VStack>
<VStack>
<Heading level={ 5 }>{ __( 'About scroll table', 'flexible-table-block' ) }</Heading>
<Text as="p">
{ __(
'If table scrolling is enabled, set "Table Width" or "Table Min Width" larger than the content width.',
'flexible-table-block'
) }
</Text>
</VStack>
<VStack>
<Heading level={ 5 }>{ __( 'About accessibility', 'flexible-table-block' ) }</Heading>
<Text as="p">
{ createInterpolateElement(
__(
'You can tell screenreaders exactly by properly defining <code>id</code>, <code>headers</code>, and <code>scope</code> attributes for each cell.',
'flexible-table-block'
),
{ code: <code /> }
) }
</Text>
<Text as="p">
{ createInterpolateElement(
__(
'Refer to <Link>this page</Link> for the specifications of each attribute.',
'flexible-table-block'
),
{
Link: (
// @ts-ignore
<ExternalLink
href={ __(
'https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced',
'flexible-table-block'
) }
/>
),
}
) }
</Text>
</VStack>
</VStack>
</Modal>
);
}
13 changes: 0 additions & 13 deletions src/settings/global-settings/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,17 +216,4 @@

.ftb-global-help-modal {
max-width: 600px;

h2 {
margin: 1.5em 0 0.5em;
font-size: 0.9rem;
}

p {
margin: 0 0 1em;
}

hr {
margin: 1.5em 0;
}
}

0 comments on commit 10797c2

Please sign in to comment.