From 9450ca42cfc6d6223b5273b9709a4cc591c4a1e8 Mon Sep 17 00:00:00 2001 From: ot07 Date: Wed, 20 Dec 2023 23:57:13 +0900 Subject: [PATCH 1/2] docs: Vibes to vibes in stories.tsx files --- docs/Design/Layout/Layout.stories.mdx | 2 +- docs/Design/Readme.stories.mdx | 12 ++++++------ docs/Storybook.stories.mdx | 2 +- docs/TypeScript.stories.mdx | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/Design/Layout/Layout.stories.mdx b/docs/Design/Layout/Layout.stories.mdx index feb116dd9..b4bc3ecaf 100644 --- a/docs/Design/Layout/Layout.stories.mdx +++ b/docs/Design/Layout/Layout.stories.mdx @@ -21,7 +21,7 @@ import heightImg from './height.jpg'; ## ブラウザ幅に合わせてコンテンツ幅をどう表示するか コンテンツをブラウザの横幅にあわせて無尽蔵に広げられると、右端に配置したボタン等がユーザーの目に入りにくくなります。そのためコンテンツの最大幅を設定しています。 -現在のVibesでは Container コンポーネントのオプションによって、以下からレイアウトを選択することができます。 +現在のvibesでは Container コンポーネントのオプションによって、以下からレイアウトを選択することができます。 - narrow: 640px = 40rem固定 - ウィザードUIなど、左右幅を大きく必要としない場合に使用します - normal: 1120px = 70rem固定 diff --git a/docs/Design/Readme.stories.mdx b/docs/Design/Readme.stories.mdx index f8938ac46..9ff7ceb92 100644 --- a/docs/Design/Readme.stories.mdx +++ b/docs/Design/Readme.stories.mdx @@ -5,18 +5,18 @@ import { Meta } from "@storybook/addon-docs"; # コンポーネント設計の指針 -Vibesのコンポーネントを設計するときには以下のような方針で行っています。 -Vibesを使用して画面を設計する際にも意識することで、デザインの一貫性を保ち、アクセシビリティを高め、実装コストを最小限にすることができます。 +vibesのコンポーネントを設計するときには以下のような方針で行っています。 +vibesを使用して画面を設計する際にも意識することで、デザインの一貫性を保ち、アクセシビリティを高め、実装コストを最小限にすることができます。 -- [Vibesのカラーパレット](?path=/docs/doc-colors--page) を使用し、適切なコントラスト比を持つ組み合わせにする +- [vibesのカラーパレット](?path=/docs/doc-colors--page) を使用し、適切なコントラスト比を持つ組み合わせにする - CSSで `rem` によるサイズ指定を行うため、コンポーネントのサイズは16の倍数ピクセルを基準として設計する - コンポーネントにはマージンのオプションをつけるため、コンポーネント自体には固定のマージンをつけない - ユーザーがインタラクションできるものの輪郭は角を丸くし、そうでないものは角を丸くしない -# Vibesのコンポーネントを使った画面設計 +# vibesのコンポーネントを使った画面設計 Sketch CloudからlibraryとしてSketchファイルを提供しています。 -これを使うことで、簡単にSketch内でVibesコンポーネントのシンボルを使用できます。 +これを使うことで、簡単にSketch内でvibesコンポーネントのシンボルを使用できます。 ## Storybookを使った確認 @@ -27,7 +27,7 @@ Knobsを使うことで、使おうとしているものに近い状態のコン ## マージン -ほとんどのVibesのコンポーネントにはマージンを付けるためのオプションが用意されています。 +ほとんどのvibesのコンポーネントにはマージンを付けるためのオプションが用意されています。 そのため、コンポーネントにマージンをつけるときにはこのオプションが使用できるサイズでマージンをつける必要があります。 - マージンの大きさは 0.5rem(8px), 1rem(16px), 1.5rem(24px), 2rem(32px), 3rem(48px) である必要があります diff --git a/docs/Storybook.stories.mdx b/docs/Storybook.stories.mdx index 9d599b3d4..718eb6b46 100644 --- a/docs/Storybook.stories.mdx +++ b/docs/Storybook.stories.mdx @@ -8,7 +8,7 @@ Storybookではコンポーネントの見た目や挙動や仕様を確かめ ### コンポーネントの探し方 -Vibesのコンポーネントは、どのコンポーネントからも独立しているLv1と、他のコンポーネントに依存するLv2があります。 +vibesのコンポーネントは、どのコンポーネントからも独立しているLv1と、他のコンポーネントに依存するLv2があります。 車輪の再発明を防ぐため、コンポーネントはまずLv2から探すようにしてください。 また、サイドバーには検索機能があります。使いたいコンポーネントの名前がわかっている場合はこちらもご利用ください。 diff --git a/docs/TypeScript.stories.mdx b/docs/TypeScript.stories.mdx index 97ff5580b..bd142045c 100644 --- a/docs/TypeScript.stories.mdx +++ b/docs/TypeScript.stories.mdx @@ -21,7 +21,7 @@ TypeScriptの型定義に加えて、Flowでの型定義を `lv1.js.flow` `lv2.j 部分的にstyled-componentsを採用しはじめていますが、以下をルールとします -- Vibesの外部から利用できるかたちでstyled-components由来のpropを提供しない +- vibesの外部から利用できるかたちでstyled-components由来のpropを提供しない - 特に as をexportしない。as を提供する場合は、使用できるtagNameを限定する - コンポーネントは `CommonStyle` (`src/internal/CommonStyle.ts`) を extendしたもの（`styled(CommonStyle)`）が最外層にあるようにする - ここに `ma` `mt` `mb` `mr` `mr` のようなマージンを提供するpropや、共通のフォント設定などが定義されています From 1e550dc65c631f7d6d98fe1b3df0898f07c88d31 Mon Sep 17 00:00:00 2001 From: ot07 Date: Wed, 20 Dec 2023 23:59:14 +0900 Subject: [PATCH 2/2] docs: Vibes to vibes in comments in ts, tsx files --- src/lv1/a11y/FocusHighlight.tsx | 2 +- src/lv1/forms/CheckBox.tsx | 2 +- src/lv1/forms/RadioButton.tsx | 2 +- src/lv2/formControl/FormControl.tsx | 2 +- src/lv2/tagBox/MiniTag.tsx | 2 +- src/utilities/VibesProvider.tsx | 2 +- src/utilities/index.ts | 4 ++-- src/utilities/selfWindowNavigator.ts | 2 +- 8 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/lv1/a11y/FocusHighlight.tsx b/src/lv1/a11y/FocusHighlight.tsx index 13088fac0..e6fb58eb9 100644 --- a/src/lv1/a11y/FocusHighlight.tsx +++ b/src/lv1/a11y/FocusHighlight.tsx @@ -26,7 +26,7 @@ type Props = { /** * フォーカスインジケーターを非表示にしている要素を `children` に入れ、フォーカスインジケーターを表示させるためのコンポーネントです。 * - * ほとんどのVibesのコンポーネントは、フォーカスインジケーターの指定をしていないため、ブラウザが提供するものが使用されます。 + * ほとんどのvibesのコンポーネントは、フォーカスインジケーターの指定をしていないため、ブラウザが提供するものが使用されます。 * そのため、ほとんどの場所ではこのコンポンーネントを使用する必要はありません。 * ブラウザが提供するフォーカスインジケーターの表示では視認性が低いなどの問題がある場合にのみ、使用してください。 */ diff --git a/src/lv1/forms/CheckBox.tsx b/src/lv1/forms/CheckBox.tsx index 16e5dde27..ea7cbe5ba 100644 --- a/src/lv1/forms/CheckBox.tsx +++ b/src/lv1/forms/CheckBox.tsx @@ -120,7 +120,7 @@ const CheckBoxInternal: React.ForwardRefRenderFunction< * - 基本的に、チェックボックスのラベルには句読点は使わないようにしてください。 * * ## accessibility - * VibesのCheckBoxコンポーネントはブラウザのデフォルト表示の見た目から変更していません。 + * vibesのCheckBoxコンポーネントはブラウザのデフォルト表示の見た目から変更していません。 * a11yチェックにある「クリックやタッチに反応するサイズが、充分な大きさになっているか」の項目OKにして問題ありません。 * */ diff --git a/src/lv1/forms/RadioButton.tsx b/src/lv1/forms/RadioButton.tsx index 343510203..d30099c7f 100644 --- a/src/lv1/forms/RadioButton.tsx +++ b/src/lv1/forms/RadioButton.tsx @@ -53,7 +53,7 @@ type Props = { * - 基本的にラジオボタンのラベルには句読点は使わないようにしてください。 * * ## accessibility - * VibesのRadioButtonコンポーネントはブラウザのデフォルト表示の見た目から変更していません。 + * vibesのRadioButtonコンポーネントはブラウザのデフォルト表示の見た目から変更していません。 * a11yチェックにある「クリックやタッチに反応するサイズが、充分な大きさになっているか」の項目OKにして問題ありません。 * * ラジオボタンを実装する際は、グループ単位で使用してください。 diff --git a/src/lv2/formControl/FormControl.tsx b/src/lv2/formControl/FormControl.tsx index 5964cfe2e..163524751 100644 --- a/src/lv2/formControl/FormControl.tsx +++ b/src/lv2/formControl/FormControl.tsx @@ -29,7 +29,7 @@ type Props = { * * 複数のラジオボタンやテキストフィールドが入る場合には、`fieldId` を設定しないでください（`
`と`` による表現になります）。 * この場合、個別のフィールドには別の方法でラベル付けを行ってください。 * * `CheckBox` や `RadioButton` コンポーネントは、内部 (`children` propの部分）に `